[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

I am looking for a better way to display the nav bar links starting with "Awards     Bib Look-Up     Results by Team ..."  on https://www.gopherstateevents.com/results/cc_rslts/cc_rslts.asp?meet_id=548&show_indiv=n&hide_team=n&hide_ind=n&sport=Nordic%20Ski

Any ideas would be much appreciated!
1
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 am having a slight issue with my nav-bar. I am using bootstrap and the menu on my nav-bar's are all joint together n space in-between them. Kindly can someone assist me through this? i used to inspect stuff to try i couldnt get it, tried adding display's and margin's too didnt work.
here is the screenshot and the navbar code:

 <div class="wrapper">
  <div class="container">
    <nav style="background: linear-gradient(to right,rgba( 0, 0, 0, 0.55),  rgba( 234, 15, 15, 0.39),rgba(14, 168, 6, 0.4));
	-webkit-transition: all 0.6s;" class="navbar navbar-default navbar-fixed-top">
      <div class="container"> 
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header page-scroll">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
        </div>
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse navbar-right" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav">
            <li><a style="color: white;"  class="page-scroll" href="../index.html">Home</a></li> 
            <li><a style="color: white;"  class="page-scroll" href="../index.html">About</a></li>
            <li><a style="color: 

Open in new window

0
My bootstrap is messed up on https://www.gopherstateevents.com/series/cc_nordic/series_results.asp

Can someone tell me why the data table is spanning the entire page please?

Thank you very much!
0
socialHandles.push('<div id="editAction'+[i]+'" data-toggle="dropdown" class ="col-lg-3 dropdown-toggle"><div class="file-manager__item file-manager__item--directory card card-small social-hover mb-3"><div class="card-footer"><span class="file-manager__item-icon"><img class="img-responsive img-thumbnail" src="images/icons/fullcontact/' + demo1.infomation.TYPE_ID[i] + '.png"/></span><h6 class="file-manager__item-title">'+demo1.infomation.TYPE_NAME[i]+'</h6></div></div></div><div id="social-action'+[i]+'"  class="dropdown-menu" aria-labelledby="editAction'+[i]+'"> <a class="dropdown-item edit-social-profile" href="#"><i class="fas fa-wrench mr-1"></i>Edit</a><a id='+ demo1.infomation.ID[i] +' class="dropdown-item delete-social-profile" href="#"><i  style = "" class="fas fa-times-circle mr-1"></i>Delete</a></div>');
            }// end for
        }


   
        $("#social-handles").append(socialHandles);

Open in new window


This code is in a for loop from a array.

now it output correctly but the dropdown isnt working correctly,  as yo see i have sperated each dropwon with the number of entires 0, 1 ,2 3 etc,

all seems correct but when i trigger the drop down it keeps opening the first for example

when i click a container with id editActions3 it will open editActions0 dropdown ?

any hints
1
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
Learn SQL Server Core 2016
LVL 12
Learn SQL Server Core 2016

This course will introduce you to SQL Server Core 2016, as well as teach you about SSMS, data tools, installation, server configuration, using Management Studio, and writing and executing queries.

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
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
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
Microsoft Azure 2017
LVL 12
Microsoft Azure 2017

Azure has a changed a lot since it was originally introduce by adding new services and features. Do you know everything you need to about Azure? This course will teach you about the Azure App Service, monitoring and application insights, DevOps, and Team Services.

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 can't figure out how to make this content stretch across the entire width of the column.

Check it out...

screenshot
The issue is the fact that I can't get the black section to extend the entire width of the column. Here's the code:

<div class="row">
					<div class="col-12" style="background-color:#ccc;">
						<div class="featured_column" style="width:100%; padding:0px !important; margin:0 !important; height:125px; background-color:#000; margin:0;">
							<div class="featured_title">featured product</div>
							<!--<div class="featured_picture"></div>
							<div class="featured_copy"></div>-->
						</div>
					</div>
				</div>

Open in new window


I've got the actual column colored in grey. The black section is the issue. How can I get it to extend the entire width of the column?

The green "top" is going to be the top section of the div and you'll notice that it has no trouble extending across the entire width of the column. How can get the black section to extend the entire width of the column like the green top?

Thanks!
0
I am using bootstrap 4 in asp.net web site. how to apply bootstrap dropdown style to asp net controls. for example, asp:dropdown.

<asp:dropdown id="ddl" runat="server" /> .

also, when we use  bootstrap classes to create form and inputs , like below. how to add  vertical space between the inputs ?

<div class="form-control">
   <div class="row">
       <div class="col-6>
            <div class="form-group">
                   <asp:textbox id="txt" runat="server">
              </div>
              ,<div class="form-group">
                     <asp:dropdown .....
0
Hi,

I have a signup form in div tag today. And that is a model open at the bottom of the site.
We have full control of form in that today.
Now this form needs to be submitted to external url.
Now once user submits the form data to be posted in external url.
Once the data is successfully submitted then the external URL will redirect to thankyou page or error page which is configured.
We pass thank you page or error page full url in hidden field.

Please help me how to submit the form in div (model) and the re-direction to success page should open in the same div tag only.

I used iFrame for that. But it is not working well. Please advice.

I have form in subscribeform.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <form action="http://www.externalurl.com">
        <input id="SucccessURL" type="http://www.mysite.com/thankyou" />
        <input id="ErrorURL" type="http://www.mysite.com/erroronSubscribe" />
        First name:<br>
        <input type="text" name="firstname" value="Mickey">
        <br>
        Last name:<br>
        <input type="text" name="lastname" value="Mouse">
        <br><br>
        <input type="submit" value="Submit">
    </form>
</body>
</html>

Open in new window



<div class="modal fade" id="news-sign-up" tabindex="-1" role="dialog" aria-labelledby="myModallabel" aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-body">

                <a class="close" data-dismiss="modal" aria-hidden="true">Close</a>
                <h2>Subscribe</h2>
                <iframe width="100%" height="100%" src="http://localhost:2014/subscribeform.html"></iframe>
            </div>
            <!-- /.modal-content -->
        </div>     
        <!-- /.modal-dialog -->
    </div>
</div>
@Html.Partial("~/Views/Contact/Partial/InvalidCaptcha.cshtml")

Open in new window

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
>