1 . What is the difference among col-lg-*, col-md-* and col-sm-* in Bootstrap?

Answer :

The bootstrap docs do explain it, but it still took me a while to get it. It makes more sense when I explain it to myself in one of two ways:

If you think of the columns starting out horizontally, then you can choose when you want them to stack.

For example, if you start with columns: A B C

You decide when should they stack to be like this:

A

B

C

If you choose col-lg, then the columns will stack when the width is < 1200px.

If you choose col-md, then the columns will stack when the width is < 992px.

If you choose col-sm, then the columns will stack when the width is < 768px.

If you choose col-xs, then the columns will never stack.

On the other hand, if you think of the columns starting out stacked, then you can choose at what point they become horizontal:

If you choose col-sm, then the columns will become horizontal when the width is >= 768px.

If you choose col-md, then the columns will become horizontal when the width is >= 992px.

If you choose col-lg, then the columns will become horizontal when the width is >= 1200px.


Leave a Comment

Name  
  Email   
Message
1 . Contain form within a bootstrap popover?
 

Answer :

JS Code:

$('#popover').popover({ 
    html : true,
    title: function() {
      return $("#popover-head").html();
    },
    content: function() {
      return $("#popover-content").html();
    }
});

HTML Markup:

<a href="#" id="popover">the popover link</a>
<div id="popover-head" class="hide">
  some title
</div>
<div id="popover-content" class="hide">
  <!-- MyForm -->
</div>

Demo

Alternative Approaches:

X-Editable

You might want to take a look at X-Editable. A library that allows you to create editable elements on your page based on popovers.

X-Editable demo

Webcomponents

Mike Costello has released Bootstrap Web Components. This nifty library has a Popovers Component that lets you embed the form as markup:

<button id="popover-target" data-original-title="MyTitle" title="">Popover</button>

<bs-popover title="Popover with Title" for="popover-target">
  <!-- MyForm -->
</bs-popover>

2 . Bootstrap won't detect jQuery 1.11.0 - Uncaught Error: Bootstrap's JavaScript requires jQuery?

Answer :

If you're in a Browser-Only environment, use @SridharR's solution.

If you're in a Node/CommonJS + Browser environment (e.g. electron, node-webkit, etc..); the reason for this error is that jQuery's export logic first checks for module, not window:

if (typeof module === "object" && typeof module.exports === "object") {
    // CommonJS/Node
} else {
    // window
}

Note that it exports itself via module.exports in this case; so jQuery and $ are not assigned to window.

So to resolve this, instead of <script src="path/to/jquery.js"></script>;

Simply assign it yourself by a require statement:

<script>
    window.jQuery = window.$ = require('jquery');
</script>

NOTE: If your electron app does not need nodeIntegration, set it to false so you won't need this workaround.


3 . Bootstrap dropdown closing when clicked?
 

Answer :

You can omit the dropdown call all together, the bootstrap dropdown works without it. Make sure you're wrapping your script properly, you can include it on the header or body of your page, although personally i prefer placing it on the body of your page.

JS

<script type="text/javascript">
    $('.dropdown-menu input, .dropdown-menu label').click(function(e) {
        e.stopPropagation();
    });
</script>

4 . span style="font-size:14px">Twitter bootstrap grid system. Spacing between columns?

Answer :

You could try spacing the boxes with padding.

<div class="col-md-6 box">
        <div class="inner">Hello</div>
</div>
<div class="col-md-6 box">
        <div class="inner">Hello</div>
</div>

CSS:

.box {
    padding: 0 5px 0 5px;
}
.box .inner {
    background-color: #fff;
}

5 . How to add a search box with icon to the navbar in Bootstrap 3?
 

Answer :

I'm running BS3 on a dev site and the following produces the affect/layout you're requesting. Of course you'll need the glyphicons set up in BS3.

<div class="navbar navbar-inverse navbar-static-top" role="navigation">

    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" rel="home" href="/" title="Aahan Krish's Blog - Homepage">ITSMEEE</a>
    </div>

    <div class="collapse navbar-collapse navbar-ex1-collapse">

        <ul class="nav navbar-nav">
            <li><a href="/topic/notes/">/notes</a></li>
            <li><a href="/topic/dev/">/dev</a></li>
            <li><a href="/topic/good-reads/">/good-reads</a></li>
            <li><a href="/topic/art/">/art</a></li>
            <li><a href="/topic/bookmarks/">/bookmarks</a></li>
            <li><a href="/all-topics/">/all</a></li>
        </ul>

        <div class="col-sm-3 col-md-3 pull-right">
        <form class="navbar-form" role="search">
        <div class="input-group">
            <input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
            <div class="input-group-btn">
                <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
            </div>
        </div>
        </form>
        </div>

    </div>
</div>


6 . Bootstrap 3.0 - Fluid Grid that includes Fixed Column Sizes?
 

Answer :

 had a slightly different problem:

  • I needed to combine fixed and fluid columns as part of a table rather than as part of a full-window layout
  • I needed to have columns fixed to both the left and right
  • I was not worried about the column backgrounds using the full-height of the containing row

As a result, I resorted to float to for the left and right columns, and could then use Bootstrap's row to do the fluid columns in between.

<div>
    <div class="pull-left" style="width:240px">Fixed 240px</div>
    <div class="pull-right" style="width:120px">Fixed 120px</div>
    <div style="margin-left:240px;margin-right:120px">
        <div class="row" style="margin:0px">
            Standard grid system content here
        </div>
    </div>
</div>

7 . Twitter Bootstrap modal: How to remove Slide down effect?
 

Answer :

I believe that most of these answers are for bootstrap 2. I ran into the same issue for bootstrap 3 and wanted to share my fix. Like my previous answer for bootstrap 2, this will still do an opacity fade, but will NOT do the slide transition.

You can either change the modals.less or the theme.css files, depending on your workflow. If you haven't spent any quality time with less, I'd highly recommend it.

for less, find the following code in MODALS.less

&.fade .modal-dialog {
  .translate(0, -25%);
  .transition-transform(~"0.3s ease-out");
}
&.in .modal-dialog { .translate(0, 0)}

then change the -25% to 0%

Alternatively, if you're using just the css, find the following in theme.css:

.modal.fade .modal-dialog {
  -webkit-transform: translate(0, -25%);
  -ms-transform: translate(0, -25%);
  transform: translate(0, -25%);
  -webkit-transition: -webkit-transform 0.3s ease-out;
  -moz-transition: -moz-transform 0.3s ease-out;
  -o-transition: -o-transform 0.3s ease-out;
  transition: transform 0.3s ease-out;
}

and then change the -25% to 0%.


8 . How to hide element using twitter bootstrap 3 and show it using jQuery?
 

Answer :

First, don't use .hideUse .hidden. As others have said, .hide is deprecated,

.hide is available, but it does not always affect screen readers and is deprecated as of v3.0.1

Second, use jQuery's .toggleClass(), .addClass() and .removeClass()

<div id="myId" class="hidden">Foobar</div>
  • To show it: $("#myId").removeClass('hidden');
  • To hide it: $("#myId").addClass('hidden');
  • To toggle it: $("#myId").toggleClass('hidden');

Don't use the css class .show, it has a very small use case. The definitions of showhidden and invisible are in the docs.

// Classes
.show {
  display: block !important;
}
.hidden {
  display: none !important;
  visibility: hidden !important;
}
.invisible {
  visibility: hidden;
}

9 . Bootstrap 3 Glyphicons CDN?
 

Answer :

An alternative would be to use Font-Awesome for icons:

Including Font-Awesome

Open Font-Awesome on CDNJS and copy the CSS url of the latest version:

<link rel="stylesheet" href="<url>">

Or in CSS

@import url("<url>");

For example (note, the version will change):

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">

Usage:

<i class="fa fa-bed"></i>

It contains a lot of icons!


10 . Bootstrap 3.0 Button in Navbar?

Answer :

With bootstrap 3, it is still possible to have a <a>link rendered as a button, but you have to include them into a <form>. Also, the <a> should include the navbar-btn class.

<li>
  <form>
    <a href="#" class="btn btn-primary btn-sm navbar-btn">
      register
    </a>
  </form>
</li>


11 . How to make a whole row in a table clickable as a link?
 

Answer :

You could include an anchor inside every <td>, like so:

<tr>
  <td><a href="#">Blah Blah</a></td>
  <td><a href="#">1234567</a></td>
  <td><a href="#">more text</a></td>
</tr>

You could then use display:block; on the anchors to make the full row clickable.

tr:hover { 
   background: red; 
}
td a { 
   display: block; 
   border: 1px solid black;
   padding: 16px; 
}

Example jsFiddle here.

This is probably about as optimum as you're going to get it unless you resort to JavaScript.


12 . How to overwrite styling in Twitter Bootstrap?
 

Answer :

The answer to this is CSS Specificity. You need to be more "specific" in your CSS so that it can override bootstrap css properties.

For example you have a sample code for a bootstrap menu here:

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div id="home-menu-container" class="collapse navbar-collapse">
        <ul id="home-menu" class="nav navbar-nav">
            <li><a class="navbar-brand" href="#"><img src="images/xd_logo.png" /></a></li>
            <li><a href="#intro">Home</a></li>
            <li><a href="#about">About Us</a></li>
            <li><a href="#services">What We Do</a></li>
            <li><a href="#process">Our Process</a><br /></li>
            <li><a href="#portfolio">Portfolio</a></li>
            <li><a href="#contact">Contact Us</a></li>
        </ul>
    </div><!-- /.navbar-collapse -->
</nav>

Here, you need to remember the hierarchy of the specificity. It goes like this:

  • Give an element with an id mentioned 100 points
  • Give an element with a class mentioned 10 points
  • Give a simple element a single 1 point

So, for the above if your css has something like this:

.navbar ul li a { color: red; } /* 10(.navbar) + 1(ul) + 1(li) + 1(a) = 13 points */
.navbar a { color: green; } /* 10(.navbar) + 1(a) = 11 points */

So, even if you have defined the .navbar a after .navbar ul li a it is still going to override with a red colour, instead of a green since the specificity is more (13 points).

So, basically all you need to do is calculate the points for the element you are wanting to change the css for, via inspect element on your browser. Here, bootstrap has specified its css for the element as

.navbar-inverse .navbar-nav>li>a { /* Total = 22 points */
    color: #999;
}

So, even if your css is loading is being loaded after bootstrap.css which has the following line:

.navbar-nav li a {
    color: red;
}

it's still going to be rendered as #999. In order to solve this, bootstrap has 22 points (calculate it yourself). So all we need is something more than that. Thus, I have added custom IDs to the elements i.e. home-menu-container and home-menu. Now the following css will work:

#home-menu-container #home-menu li a { color: red; } /* 100 + 100 + 1 + 1 = 202 points :) */

13 . Decreasing height of bootstrap 3.0 navbar?
 

Answer :

Bootstrap 3.0 by default has a 15px padding on top and bottom, so we just need to override it!

For example:

.navbar-nav > li > a {padding-top:10px !important; padding-bottom:10px !important;}
.navbar {min-height:40px !important}

14 . Bootstrap 3.0 Popovers and tooltips?
 

Answer :

For some reason the only way I was able to get my code to work is by switching couple of things. If nothing worked for you so far, please give a whirl to this:

$('body').popover({ 
    selector: '[data-toggle="popover"]', 
    trigger: 'hover',
    placement: 'right'
});

15 . Can you disable tabs in Bootstrap?
 

Answer :

I added the following Javascript to prevent clicks on disabled links:

$(".nav-tabs a[data-toggle=tab]").on("click", function(e) {
  if ($(this).hasClass("disabled")) {
    e.preventDefault();
    return false;
  }
});