Bootstrap Help

Question by

Rabbit W

2d ago

Compare the items

Thanks for the expert Zakaria's prompt advice!
I followed his example, but still have some issues.
It works perfectly if the image is listed individually. When the checkbox is checked, the image is added to the comparing area

 <div class="col-sm-4 col-md-3">
          <div class="thumbnail">
           
 <div class="thumbnail-img">
              <img src="images/1.jpg" width="150" height="150" class="img-p1">
            </div>
           
              <h3>Product 1</h3>
              <p>10 $</p>
              <p><input type="checkbox" class="p1"> Compare Product
              </p>
            </div>
          </div>

Open in new window

But if add to the datalist area, it does not work. When checking the checkbox, it does not do anything.

<asp:DataList ID="compare"
									           CellPadding="0"
                                               CellSpacing="0"
                                               RepeatDirection="Horizontal"
									           borderstyle= "none"
									           GridLines="None"
									           RepeatLayout="Table"
									           RepeatColumns="3"									          
									           ShowBorder="false"
									           runat="server" HeaderText="" HeaderStyle-BackColor="#fff" HeaderStyle-ForeColor="#FFFFFF" HeaderStyle-Font-Bold="true">

                                   <ItemTemplate>
								   
	
 

<table>
      <tr>
		<td> <a href="products.aspx?id=<%# DataBinder.Eval(Container.DataItem, "idProduct") %>">
   
        <div class="thumbnail"> <div class="thumbnail-img"><img src="images/<%# DataBinder.Eval(Container.DataItem, "idProduct") %>.jpg" class="img-p1"> </div></a>

</td>
	</tr>

 <tr><td><input type="checkbox" class="p1"> Compare Product</td></tr>

Open in new window

Lastly how to add the Compare link to the comparing area, which will be linked to the page with the four compared products. Click each product and then linked to the product page. Per the attached image.
compare.jpg

0 Comments

Become a Microsoft Certified Solutions Expert

LVL 12

This course teaches how to install and configure Windows Server 2012 R2. It is the first step on your path to becoming a Microsoft Certified Solutions Expert (MCSE).

Question by

smitty62

2018-11-30SolvedPrivate

Mobile menu dropdown cut off in length.

I'm having a problem with a menu. Full page looks good, but mobile cuts off bottom of menu. I think the problem is in the dropdown-menu class in the bootstrap.min.css. Please see attached

http://insuranceqa.illinois.gov/GCI6/index.html
menuError.jpg

Bootstrap

2 Comments

Question by

Richard Korts

2018-11-30Solved

Unmatched <div>'s?

I have this HTML (based on bootstrap):

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <link rel="stylesheet" href="/resources/demos/style.css">

    <title>Backflow Assembly & Test Report Form - Log In</title>
    <style>
        .nopadding {
            padding: 0 !important;
            margin: 0 !important;
        }
        
        .wrapper {
            max-width: 767px;
            min-width: 480px;
            margin: 0 auto;
        }
    </style>
	<script>
	sus = "";
	u = "";
	s = "";
	function chk_vals() {
		if (document.st.uid.value == "" || document.st.pwd.value == "") {
			alert("Please enter Email & Password");
			return false;
		}
		return true;
	}
	$(function() {
            $("#datepickerfr").datepicker();
        });
    $(function() {
            $("#datepickerto").datepicker();
        });

Open in new window

…

5 Comments

Question by

Alex Lord

2018-11-29Solved

Cant check checkboxes !

<div id="property-2563" class="form-group text-left"><label class="control-label" style="" for="property2563">Contact CheckBox</label><br><div style="margin-top:20px; " class="form-check form-check-inline"><input style="width: 0 !important;" class="form-check-inline" type="checkbox" name="property2563[]" id="property25630" value="Winning"><label style="margin-top:0px; margin-left:5px" class="form-check-label" for="property25630">Winning</label></div><div style="margin-top:20px; " class="form-check form-check-inline"><input style="width: 0 !important;" class="form-check-inline" type="checkbox" name="property2563[]" id="property25631" value="Winning"><label style="margin-top:0px; margin-left:5px" class="form-check-label" for="property25631">Winning</label></div></div>

Open in new window

cant check my checkboxes, these are created from a database.

anyone see why ?

using bootstrap 4 forms

2 Comments

<div class="form-group">
	 <label  class="" for="property-2563">Contact CheckBox</label>
<div  id="property-2563" class="form-check form-check-inline">
	<input class="form-check-inline" type="checkbox" name="property25630" id="property25630" value="test1">
	<label  class="form-check-label" for="property25630">test1</label>
</div>
<div class="form-check form-check-inline">  
	<input class="form-check-inline" type="checkbox" name="property25631" id="property25631" value="test2"><label style="margin-top:0px; margin-left:5px" class="form-check-label" for="property25631">test2</label>
    </div>
    		</div>

Open in new window

so above is html and picture is the result

the label isnt inline with checkboxes and i dont know how as this is bootstrap 4 classes.

any hints ?

3 Comments

Question by

smitty62

2018-11-28SolvedPrivate

non-responsive image to screen.

On the title on the below page, when I expand it down the image changes to the text of "undefined". The text is no where in my css or js. I don't know where it's coming from. I added bootstrap.css and img-responsive, but than found that it is no longer in the bootstrap file. How do I get the image to be responsive and remove the "undefined" text?

http://insuranceqa.illinois.gov/GCI3/index.html

2 Comments

LVL 7

Question by

Daniel Pineault

2018-11-20Solved

Reopen modal buttons no longer work?

I'm struggling to close a modal window and then reopen it.

Upon submitting a modal I use

$('form#{$model->formName()}').on('beforeSubmit', function(e){
    var \$form = $(this);
    $.post(
        \$form.attr("action"), //serialize Yii2 form 
        \$form.serialize()
    )

    .done(function(result){
        //console.log(result);
        result = JSON.parse(result);
        if(result.status == 'Success'){
            $(\$form).trigger("reset");
            // $.pjax.reload({container:'#InvoiceItemsListGrid'}); //Does not work and reloads the main page, not the modal window?!
            $("#closeButton3").click(); //Close the 3rd modal
            $("#closeButton2").click(); //Close the 2nd modal
            $("#"+$('#modalPopup2 #passInfo #refBtn').val()).click(); //re-open the 2nd modal by clicking on the appro button to refresh the info
        }else{
            $(\$form).trigger("reset");
            $("#message").html(result.message);
        }
    })

    .fail(function(){
        console.log("server error");
    });

    return false;
});

Open in new window

Now, although not the way I wanted to handle this, it does work in a general sense. It closes the 2 modal windows and then reopens the second one displaying the submission. The issue I'm facing is that if I close the modal and then reopen it, none of the buttons works. They all loose their event and I don't get why?

I've been at this for 2 days and just can't figure it out. I've tried all sorts of things.

Thank you in advance.

4 Comments

Question by

Rabbit W

2018-11-19

Modal Window

I have the coding below:

<script>
var popUpObj;
function showModalPopUp() {
  popUpObj = window.open("product.aspx?id=<%# DataBinder.Eval(Container.DataItem, "idProduct") %>",
    "ModalPopUp",
    "toolbar=no," +
    "scrollbars=no," +
    "location=no," +
    "statusbar=no," +
    "menubar=no," +
    "resizable=0," +
    "width=500," +
    "height=500," +
    "left = 490," +
    "top=300"
  );
  popUpObj.focus();
  LoadModalDiv();
}
</script>

<script>
function LoadModalDiv() {
  var bcgDiv = document.getElementById("divBackground");
  bcgDiv.style.display = "block";
}
</script>
<script>
function HideModalDiv() {
  var bcgDiv = document.getElementById("divBackground");
  bcgDiv.style.display = "none";
}

function OnUnload() {
  if (false == popUpObj.closed) {
    popUpObj.close();
  }
}

window.onunload = OnUnload;
</script>

<a href="javascript:showModalPopUp()">Open My Window</a>

Open in new window

1. Error:

'DataItem' is not a member of 'System.Web.UI.Page'.

How to fix popUpObj = window.open("product.aspx?id=<%# DataBinder.Eval(Container.DataItem, "idProduct") %>"

2. How to change the background color to gray

Thank you!

1 Comment

Hi,I'm having trouble trying to change the bootstrap .active class state via jquery.I've googled and found several solutions but none of them are working for me.Here is my html code:

[code]<section id="hero">
   			<div class="container-fluid">
               <div class="container">
				   <div class="row">
						<div class="col-md-12">
							<nav class="navbar navbar-toggleable-md navbar-light">
							  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown2" aria-controls="navbarNavDropdown2" aria-expanded="false" aria-label="Toggle navigation">
								  <span class="navbar-toggler-icon"></span>
								  <span class="fas fa-times hide" data-wow-delay="2s"></span>
							  </button>
							  <a class="navbar-brand logo" href="index.php"></a>
							  <div class="collapse navbar-collapse" id="navbarNavDropdown2">
								<ul class="navbar-nav ml-auto">
								  <li class="nav-item active">
									<a class="nav-link" href="index.php">Home <span class="sr-only">(current)</span></a>
								  </li>
								  <li class="nav-item">
									<a class="nav-link" href="about.php">About Us</a>
								  </li>
								  <li class="nav-item">
									<a class="nav-link" href="howitworks.php">How it Works</a>
								  </li>
								  <?php
								  if( $_SESSION['loggedInUser'] ) { // if user is logged in
								  ?>
							      <li class="nav-item dropdown">
									<a class="nav-link"

Open in new window

…

9 Comments

Question by

mikha

2018-11-14SolvedPrivate

layout issues

I have following layout, the main content area is loaded dynamically, based on the user input. sometimes there is no data to be displayed, say the table is empty.
I have min height set for the table section. but, when there is no data in the table. the footer doesn't stick to the bottom of the page .

is there a way to make the footer stick to the bottom of the page, all the time?

<div id=header></div>
<div id="mainContent">
..... dynamically loaded section

</div>
<div id="footer"></div>

5 Comments

Fundamentals of JavaScript

LVL 12

Learn the fundamentals of the popular programming language JavaScript so that you can explore the realm of web development.

Question by

Dinesh Bali

2018-11-14Solved

Slant banner on mobile

Hi,
I have responsive html.

I wanted slant banner. It works well on desktop (

) but doesn't work on mobile well See Image

I wanted on mobile banner should be

The Html code to create banner is:

<div>
    <div class="d-flex">
        <div class="slant">START EXECUTING YOUR PROJECT</div>
        <div style="background-color:black;width: 40%" class="flex-grow-1">
            <a href="#" class="themesflat-button bg-white small">
                <span>
                    <span class="icon">
                        <i class="autora-icon-phone-contact"> </i>
                    </span> (+123) 4567 8901
                </span>
            </a>
        </div>
    </div>
</div>

Open in new window

CSS code used is:

.slant {
    background: red;
    line-height: 50px;
    text-align: center;
    width: 60%;
    color: #fff;
    position: relative;
    overflow: hidden;
}

    .slant::after {
        position: absolute;
        content: " ";
        display: block;
        left: 50%;
        bottom: -20px;
        width: 100%;
        transform: rotate(140deg);
        background: black;
        top: 0;
    }

Open in new window

Please advise the solution.

28 Comments

I am new to Bootstrap and I have the following HTML code:

<div class="row">
    <div class="col-lg-1 col-md-1 col-sm-2 col-xs-2">
    </div>

    <div class="col-lg-5 col-md-5 col-sm-10 col-xs-10">
    </div>

    <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
    </div>

    <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
    </div>
</div>

Open in new window

As you can see, for SM and XS devices I have 2 and 10 columns for first 2 divs inside the row div, and 12 columns for divs 3 and 4. This means that the content will occupy 3 rows (inside the main row div). Content displayed in rows 2 and 3 start at column 1 and I want them to start at column 3 for both SM and XS devices.

How can I achieve this effect?

Best regards,
Jorge Maldonado

3 Comments

LVL 1

Question by

Jazzy 1012

2018-11-09Solved

How can I create an animation of text line per line

Hello,

I have this code:

<div class="fodmap_section">
<center>
<p class="annimate_text">
So, what exactly is LOW FODMAP?
</p>

<p class="subtext">(and why does it matter) </p>

<div class="textNew">
<span class="FirstLetters">F</span>ermentable &nbsp;
<span class="FirstLetters">O</span>ligosaccharides &nbsp;
<span class="FirstLetters">D</span>isaccharides &nbsp;
<span class="FirstLetters">M</span>onosaccharides &nbsp;
<span class="FirstLetters">A</span>nd &nbsp;
<span class="FirstLetters">P</span>olyols&nbsp;

</div>

<p class="fodmap_info">
<b>
FODMAPs are natural sugars found in all foods that can be difficult for many<br>
people to digest. If you have Irritable Bowel Syndrome (IBS). Crohn's or Ulcerative Colitis (IBD),<br>
FODMAPS may be contributing to your symptoms. 
<span class="fodmap_info_semi">Following a low FODMAP diet can help!</span></b>
</p>
<button class="fodmapBtn">Click here to end show!</button>
</center>
</div>

Open in new window

I want that when the user scrolls down that line by line to be animated to rise up onto the screen when scrolled over.
Is that possible?

1 Comment

Question by

Nikhil Dange

2018-11-08Solved

Modal not working in DataTable bootstrap

Modal is not working after 1st page when click on "Change" button in datatable bootstrap:

View Info Modal :

<div id="dataModal" class="modal fade">  
      <div class="modal-dialog">  
           <div class="modal-content">  
                <div class="modal-header">  
                     <button type="button" class="close" data-dismiss="modal">&times;</button>  
                     <h4 class="modal-title">Customer Details</h4>  
                </div>  
                <div class="modal-body" id="customer_detail">  
                </div>  
                <div class="modal-footer">  
                     <button type="button" class="btn btn-gradient-light btn-fw" data-dismiss="modal">Close</button>  
                </div>  
           </div>  
      </div>  
 </div>

Open in new window

Change Info Modal:

 <div id="changeModal" class="modal fade">  
      <div class="modal-dialog">  
           <div class="modal-content">  
                <div class="modal-header">  
                     <button type="button" class="close" data-dismiss="modal">&times;</button>  
                     <h4 class="modal-title">Change Status</h4>  
                </div>  
                <div class="modal-body" id="change_detail">  
                </div>  
                <div class="modal-footer">  
                     <button type="button" class="btn btn-gradient-light btn-fw" data-dismiss="modal">Close</button>  
                </div>  
           </div>  
      </div>  
 </div>

Open in new window

JQuery :

 $(document).ready(function(){  
      $('.view_data').click(function(){  
           var book_id = $(this).attr("id");  
           /*alert(employee_id);*/
           $.ajax({  
                url:"ajax/viewCustomer.php",  
                method:"post",  
                data:{book_id:book_id},  
                success:function(data){ 
                     $('#customer_detail').html(data);  
                     $('#dataModal').modal("show");  
                }  
           });  
      });  
 });
  $(document).ready(function(){  
      $('.change_data').click(function(){  
           var book_id = $(this).attr("id");
           $.ajax({  
                url:"ajax/updateServiceStatus.php",  
                method:"post",  
                data:{book_id:book_id},  
                success:function(data){ 
                     $('#change_detail').html(data);  
                     $('#changeModal').modal("show");  
                }  
           });  
      });  
 });

Open in new window

3 Comments

Question by

Alex Lord

2018-11-06Solved

Bootstrap datePicker not working

bootstrap date picker not working on click

i setup the input from js and append it with js to a modals content.

$("#EXPECTED_CLOSE_DATE").datepicker({dateFormat:"yy-mm-dd", minDate: new Date()});

Open in new window

this is sitting in the document.ready

how the input is set up.

   dateForm.push('<div class="form-group">'
                          ,'<label class="control-label col-xs-4" for="edit-deal-date">Estimated closing date</label>' 
                          ,'<div id = "find-bind" class="col-xs-8">'
                          ,'<input id="EXPECTED_CLOSE_DATE" name="EXPECTED_CLOSE_DATE" placeholder="click for new date!" value="'+dealJson.date+'"type="text" class="form-control hasDatepicker">'
                          ,'<input id="subaction" name="subaction" value="updateDeals" type="hidden" class="form-control">'
                          ,'<input id="engID" name="engID" value="'+engID+'" type="hidden" class="form-control">'
                          ,'</div>'
                          ,'</div>' 
                        );
        $("#update-deal").html(dateForm);

Open in new window

any clues ?

6 Comments

Question by

Bob Schneider

2018-11-01Solved

JQuery/Bootstrap Issue

Can someone help me identify what is wrong with my JQuery/Bootstrap? On my main page (https://www.gopherstateevents.com/) the top dropdown works well...designed to work on mouse over. This is a page created in Mobirise. I tried to re-create the rest of my pages (using classic ASP) but the nav bar has to be clicked to function. Here is an example: https://www.gopherstateevents.com/results/cc_rslts/cc_rslts.asp?sport=cc

Obviously something is either mis-placed or missing altogether. Any help would be much appreciated!

5 Comments

Question by

mikha

2018-10-27Private

implementing bootstrap in an existing site

I have an website and I want to use bootstrap 4 to make it responsive, if possible.
I have current layout ( see at the bottom) , (example contrived for this question). there is standard header , footer and two column layout.
I have left side menu , which is 200px and next to it is main content div, which has certain width, let's say 800px for the sake of this example.
In addition, in the main content area, I have several input fields with specific height and width.

Now, if I implement bootstrap in the current layout. how should I do it.
can i create a row and col layout and put the current content inside these rows.
the side navigation menu has certain width which I would like to maintain , because of the content inside it.
how should i approach this?

<div class=container>
<div class=row>
<div class= col-3>
<div class="site-navigation">side navigation menu</div>
</div>
<div class=col-9>
<div class=site-content">
.........main content.............
<input type="text" height="30px" width="160px"/>
</div>
</div>
</div>
</div>

------------------------------------------------------------------------------------------------------------------------------------------
.site-content { width: 800px; }
.site-navigation { width: 200px; }

<div class="container">
<div>Header </div>
<div class="site-navigation">side navigation menu</div>
<div …

3 Comments

Question by

Dinesh Bali

2018-10-26Solved

Fit background image to area

HI,

I am setting background image and using below style
width:100%; background-size: cover;background:url('/media/1149/solve_header1.jpg') no-repeat;

My image width is too big and I wanted backgroud image to fit the area. Because of big width half image is shown.
Please advise the way in CSS, bootstrap

Regards,

6 Comments

Question by

Dinesh Bali

2018-10-26Solved

Angle banner in css/bootstrap

HI,

I wanted to cut the image as below and my site is responsive.
How do I give this cut effect in css, bootstrap? Please see attached for details.
Please advise
slicedImage.png

20 Comments

Build an E-Commerce Site with Angular 5

LVL 12

Learn how to build an E-Commerce site with Angular 5, a JavaScript framework used by developers to build web, desktop, and mobile applications.

I have following markup, with everything wrapped in bootstrap container class.
In the main-content section. I have created 3 sections , with each set to float:left, so that they stack up on top of each other.
in the middle div, I want to have a table, such that the table is contained inside its border and any overflow is scrollable. so i have set the overflow property to auto. (see below)
the table is a bootstrap 4 striped table, but table appears or overflows outside the content area, it acually appears outside the main-content area. what am i doing wrong.

<div id="container">
      <div id="header" style="height:120px"></div>

      <div id="main-content">
<div id="content-header" style="float:left; overflow:auto">
</div>

<div id="content" style="float:left">
<table class="table table-striped">....
</table>
</div>

<div id="content-footer" style="float:left">
</div>
</div>

      <div id="footer" style="height:80px"></div>
</div>

7 Comments

Hello Experts,

I need help with Bootstrap 4.1.3 and Javascript/Jquery to make it work the way I would like to do it.
I follow this user's example: https://github.com/bootstrapthemesco/bootstrap-4-multi-dropdown-navbar

What I would like to do:
1. How do I get the "arrow" on the submenu to be right-aligned in the uploaded images? There is a before and an after image.
2. How can I make it so that when I move/hover away from the dropdown menu item, it will collapse. For example, if I move away from "About Us", the dropdown menu for it, collapse?
3. Finally, I like that you have to click to get the main menu item (i.e Metrics) to expand the dropdown menu. However, I want it so that when I hover over Submenu, it will expand auotmatically expand. No clicking, but hovering.

Please provide any assistance for any or all of my wish list. Thank you.

Here is my code for my menu:

<nav class="navbar navbar-expand-md navbar-light bg-light">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <ul class="navbar-nav">
      <li class="nav-item active"><a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a></li>
      <li class="nav-item dropdown">
        <a class="nav-link

Open in new window

…

4 Comments

Question by

Ridgejp

2018-10-12Solved

Bootstrap: Add Margin to a Pull-Right Class

Trying to add a right margin (to my first button) so as to present 2 buttons in a cleaner manner that have a pull-right bootstrap class on them ... the pull right seems to remove all margins is there a way around this?

<a href="rev_logout.php" 	class="btn btn-danger navbar-btn pull-right " 	role="button">Log Out</a>
	   <a href="inventory.php" 	class="btn btn-info navbar-btn pull-right" 		role="button">Home</a>

Open in new window

3 Comments

Hi Experts,

I am not able set fixed width and height for a card image in bootstrap. I want all in same height and width for all the images. Please see the below image.

I had tried setting min-width:100% height:40vh and object-fit:cover but not able to resolve this issue. Please find below the debugger window details

Please see the below code

 return (
          <div  key={i.id} className={`card paper ${this.props.selected == i.id ? ' selected': ''}`}
                 style={{width:dimension, height:dimension+50}} onClick={() => this.props.actions.viewItem(i)}>

              {!i?.source?.brand ? null :
               <img src={i.source.brand} className="card-img-top img-fluid "  alt={i.source}/>
              }
              <img src={thumbnail} alt={i.title} className="card-img-top img-fluid" style={{width:"100%!important", 'min-width':"100%",height:"15rem", 'object-fit':'cover'}}/>
            <div className="card-body">
               <p class="card-text"> {i.title} {' '} <span style={{color: '#777'}} > {date} </span></p>
            </div>
         </div>);
         });

Open in new window

Please help me in resolving this issue.

With many thanks,
Bharath AK

5 Comments

Question by

mikha

2018-10-09SolvedPrivate

adjust the height of input type in bootstrap 4

I am trying to adjust the height of input type in bootstrap 4, which has following sample markup.

is there a quick way to do just the input types?

<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>

3 Comments

I have added a bootstrap 4 panel. how can I add a right arrow after the anchor tag , when it is collapsed and add a down arrow on expand?

<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse1">Collapsible panel</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">Panel Body</div>
<div class="panel-footer">Panel Footer</div>
</div>
</div>
</div>

4 Comments

Bootstrap

Related Topics

Bootstrap

Related Topics