[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x

Bootstrap

Bootstrap is a free and open-source collection of tools for creating websites and web applications. It contains HTML- and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions. It aims to ease the development of dynamic websites and web applications. Bootstrap is a front end web framework, that is, an interface for the user, unlike the server-side code which resides on the "back end" or server.

Share tech news, updates, or what's on your mind.

Sign up to Post

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
Become a Microsoft Certified Solutions Expert
LVL 12
Become a Microsoft Certified Solutions Expert

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).

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
0
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

1
<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
1
<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



check boxes

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 ?
0
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
0
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.
1
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!
0
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

1
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>
0
Fundamentals of JavaScript
LVL 12
Fundamentals of JavaScript

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

Hi,
I have responsive html.

I wanted slant banner. It works well on desktop (Desktop Screen shot) but doesn't work on mobile well See Image Screen Capture on MobileI wanted on mobile banner should be Required banner on mobile
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.
0
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?

Sample what I need
Best regards,
Jorge Maldonado
0
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?

 
0
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

1
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 ?
0
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!
0
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 …
0
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,
0
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
0
Build an E-Commerce Site with Angular 5
LVL 12
Build an E-Commerce Site with Angular 5

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>
0
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

0
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

0
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.

tosend.png
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

tosend.JPG
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
0
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>
0
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>
0

Bootstrap

Bootstrap is a free and open-source collection of tools for creating websites and web applications. It contains HTML- and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions. It aims to ease the development of dynamic websites and web applications. Bootstrap is a front end web framework, that is, an interface for the user, unlike the server-side code which resides on the "back end" or server.

Top Experts In
Bootstrap
<
Monthly
>