Bootstrap

Articles
Resources
Alternatives

Cheat sheet

https://www.toptal.com/front-end/what-is-bootstrap-a-short-tutorial-on-the-what-why-and-how
https://fontawesome.bootstrapcheatsheets.com/
https://cheatsheet.kursbootstrap.pl/

http://getbootstrap.com/
http://getbootstrap.com/getting-started/ - done reading
http://getbootstrap.com/css/ - done reading
http://getbootstrap.com/components/ - done reading
http://getbootstrap.com/javascript/ - done reading

https://www.sitepoint.com/use-bootstrap-components-without-jquery
https://www.sitepoint.com/introducing-bootcards-bootstrap-cards-made-easy
http://glyphicons.bootstrapcheatsheets.com/
http://www.cheatography.com/masonjo/cheat-sheets/bootstrap/
https://dresssed.s3.amazonaws.com/bootstrap_cheatsheet.pdf
http://www.taesup.com/bootstrap/
http://creativealive.com/wp-content/uploads/2014/01/bootstrap3-cheatsheet.pdf
http://codingarena.in/sublime-cheatsheets/Bootstrap_cheatsheet_part_1.html
http://www.wndx.com/blog/developers-cheat-sheet-for-twitter-bootstrap-fonts

Script
Advance

Glyph icons
Dropdown menus

Tabs / Pills
Navigation bars
Breadcrumb
Pagination
Badges
Page header
Thumbnails
Media
List groups
Panels
Embeds
Wells
Jumbotrons
Alerts
Modal
Progress bars
Scrollspy
Tooltips
Popovers
Collapse
Carousel
Affix

Tables
Form
Validation
Images
Responsive

JavaScript
CSS
Accessibility

The Bootstrap Grid system

Unanswered questions
The old page

What is Bootstrap?

Bootstrap is a popular HTML, CSS, and JS framework for developing responsive, mobile first web project.

Why should we use Bootstrap?

  1. Bootstrap easily and efficiently scales your websites and applications with a single code base, from phones to tablets to desktops with CSS media queries.
  2. Bootstrap is open source
  3. Bootstrap is friendly to back-end developers who are UI-challenged. Using Bootstrap allow back-end developer to produce product that have clean interface. If your company have a good UI designer, then it is his job to create a great Bootstrap theme, and you do not have to use Bootstrap on every page.
  4. I love jQuery, but unfortunately, it is hard to find a good jQuery "UI" library. There are several jQuery "UI" libraries available but they don't look very nice so far to me. Bootstrap is a UI framework, but it also include JavaScript components. That make it a JavaScript / jQuery "UI" library, so I am going to use Bootstrap as a jQuery "UI" library.
  5. There are other UI frameworks out there such as Foundation, but I haven't got time to study yet.
  6. Saving time. With Bootstrap, a developer do not have to spend time laboriously working out and writing code to make a design work, but simply find the right design (layout template example) and fit it into the structure that he is working on. Bootstrap has already designed easy to use and powerful interactions so all you have to think about is which component will best suit your need. Bootstrap comes complete with many re-usable CSS and JavaScript components that can help to achieve the functionality needed in almost any kind of website. You just have to use some HTML to plug them into your template, with no need to spend huge amount of time writing complex CSS and JavaScript. All these components are responsive too.
  7. Bootstrap is responsive. If you shift from a laptop to an iPad, you won't have to fret over your work. Bootstrap automatically work.
  8. Consistency. A framework is a guideline, which help bring about consistency and predictability.
  9. It provides stylish typography, forms, buttons, tables, grids, navigation and everything else you need in a super tiny (only 6k with gzip) resource.
  10. Elegant and durable front-end design patterns
  11. A fluid grid layout. Bootstrap has one of the best responsive, mobile first grid system. It is easy to use and flexible. It helps in scaling a single web site design from the smallest mobile device to high definition displays, logically dividing the screen into 12 columns so that you can decide just how much screen real estate each element of your design should take up.
  12. If you need to push out a new site or app in a matter of weeks and have a shoestring design budget, Bootstrap is perfect. You can grab one of the templates available, make a few style changes, put in some images, implement a bit of interactivity and you are on your way… Cross-browser and device compatibility have been taken into account, which will cut down your debugging time significantly.
  13. It is responsive from the get-go. By using the fluid grid layout, designing a responsive website is a walk in the park. Everything just works! Enjoy the true power of the grid, watch your columns respond fluidly at every important view-port width. Bootstrap makes mobile-first development easier as you do not need to alter your mark-up with every new screen width that you are designing for.
  14. Use Bootstrap as a style guide. Since Bootstrap is a framework, it guide developers to conform to a style. Changing the style for a web site or application may somewhat become easier just be designing a new Bootstrap theme, and replacing the old theme with the new theme. This is true regardless whether it is Bootstrap or another CSS framework.
  15. Bootstrap is declarative. With Bootstrap, it is possible to use data attributes to create components without having to use JavaScript. You may still have to use JavaScript in some cases, but the amount of JavaScript you have to write will certainly be reduced. Your HTML may be fatter, and your JavaScript will be skinnier. Depending on your taste, declarative programming may be more attractive.

Why should we not use Bootstrap?

Some of the complaints:

  1. It doesn't follow best practices. You end up with a lot of DOM elements and extra classes. The HTML is no longer semantic and the presentation is no longer separate from the content. Front-end purist may find it annoying, and it may make scalability, reusability, and maintenance more challenging. I do not know how important these factors are to you compared to getting working software out the door as quickly as possible and not treading too much on these things and not being able to ship it. If timeline and momentum is critical, go for Bootstrap. I am not saying that those things are not important. We don't know it until we try. Speed is also a relative thing.
  2. Bootstrap is heavy. It includes 126KB of CSS, and 29 KB of JavaScript. I am not sure how accurate this is. This may be old information. Bootstrap allows you to load just the components that you use, and get rid of the ones that you do not need.
  3. Some had suggested that when visiting a site with the default Bootstrap style, they have questioned the legitimacy of the site because it looks generic just like other sites where people didn't put a lot of effort into building it. Well, if you have a designer, let the designer guide you to create great website. Perhaps you can use Bootstrap on pages that does not need flares, and not use Bootstrap on pages that need excellent design. Maybe you can use Bootstrap on "inside" pages where you need to display data to users after they have look enough at your non-Bootstrap excellently designed anonymous pages.

How can we download and install Bootstrap?

We do not really install Bootstrap, but we use Bootstrap in our application, so the word "install" is being used very loosely here. There are several way to download and install Bootstrap:

  1. Download directly from the web site. Go to http://getbootstrap.com/getting-started/ and click on appropriate download button.
  2. Install using bower: bower install bootstrap
  3. Install using npm: npm install bootstrap
  4. Install using composer: composer require twbs/bootstrap

Note for npm:

require('bootstrap') will load all of Bootstrap's jQuery plugins onto the jQuery object. The bootstrap module itself does not export anything. You can manually load Bootstrap's jQuery plugins individually by loading the /js/*.js files under the package's top-level directory. Bootstrap's package.json contains some additional metadata under the following keys:

  • less - path to Bootstrap's main Less source file
  • style - path to Bootstrap's non-minified CSS that's been precompiled using the default settings (no customization)

If you do not use less, sass, or any package manager, you can go to http://getbootstrap.com/getting-started/ and click on the first download button (from the left), unzip it and put it somewhere within your web server's document root folder and in your HTML files you can load appropriate minified CSS and JavaScript files:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="/bootstrap/3.3.5/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="/bootstrap/3.3.5/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="/bootstrap/3.3.5/js/bootstrap.min.js"></script>

What is Autoprefixer?

Bootstrap uses Autoprefixer to deal with CSS vendor prefixes. If you're compiling Bootstrap from its Less/Sass source and not using our Gruntfile, you'll need to integrate Autoprefixer into your build process yourself. If you're using precompiled Bootstrap or using our Gruntfile, you don't need to worry about this because Autoprefixer is already integrated into our Gruntfile.

How can we get started?

To get started, use the following boilerplate template:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class="container">
      <h1>Hello, world!</h1>
    </div>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Modify and customize the above code to suite your need.

On the Getting Started page, scroll down to the Example section. These images are links to example layout template. Right click on the images, open the link in a new tab. These example layout templates may not look pretty, but they show what is possible. It is up to you to visualize it and see whether it suite your particular need for a particular page. You can view the HTML source code using the browser's View Source functionality, copy the HTML, and modify it to suite your need.

There may be more examples in the repository. First we have to download the repository from https://github.com/twbs/bootstrap/archive/v3.3.5.zip, unzip it. Examples can be found in the docs/examples/ directory.

What are the things provided by Bootstrap?

  1. Glyph icons
  2. Dropdown menus
  3. Tabs / Pills
  4. Navigation bars
  5. Breadcrumb
  6. Pagination
  7. Badges
  8. Page header
  9. Thumbnails
  10. Media
  11. List groups
  12. Panels
  13. Embeds
  14. Wells
  15. Jumbotrons
  16. Alerts
  17. Modal
  18. Progress bars
  19. Scrollspy
  20. Tooltips
  21. Popovers
  22. Collapse
  23. Carousel
  24. Affix
  25. Links
  26. Tables
  27. Form

How can we start using Bootstrap grid?

Take a look at http://getbootstrap.com/examples/grid/

What is Bootlint?

Bootlint is the official Bootstrap HTML linter tool. It automatically checks for several common HTML mistakes in webpages that are using Bootstrap in a fairly "vanilla" way. Vanilla Bootstrap's components/widgets require their parts of the DOM to conform to certain structures. Bootlint checks that instances of Bootstrap components have correctly-structured HTML. Consider adding Bootlint to your Bootstrap web development toolchain so that none of the common mistakes slow down your project's development.

What is Respond.js?

Internet Explorer 8 requires the use of Respond.js to enable media query support. Beware of the following caveats when using Respond.js in your development and production environments for Internet Explorer 8.

  • Using Respond.js with CSS hosted on a different (sub)domain (for example, on a CDN) requires some additional setup. See the Respond.js docs for details.
  • Due to browser security rules, Respond.js doesn't work with pages viewed via the file:// protocol (like when opening a local HTML file). To test responsive features in IE8, view your pages over HTTP(S). See the Respond.js docs for details.
  • Respond.js doesn't work with CSS that's referenced via @import. In particular, some Drupal configurations are known to use @import. See the Respond.js docs for details.

What is the IE8 issue with @font-face?

IE8 has some issues with @font-face when combined with :before. Bootstrap uses that combination with its Glyphicons. If a page is cached, and loaded without the mouse over the window (i.e. hit the refresh button or load something in an iframe) then the page gets rendered before the font loads. Hovering over the page (body) will show some of the icons and hovering over the remaining icons will show those as well. See issue #13863 for details.

What is the IE8 issue with box-sizing?

IE8 does not fully support box-sizing: border-box; when combined with min-width, max-width, min-height, or max-height. For that reason, as of v3.0.1, we no longer use max-width on .containers.

What is the issue with Internet Explorer 10 in Windows 8 and Windows Phone 8?

Internet Explorer 10 doesn't differentiate device width from viewport width, and thus doesn't properly apply the media queries in Bootstrap's CSS. Normally you'd just add a quick snippet of CSS to fix this:

@-ms-viewport       { width: device-width; }

However, this doesn't work for devices running Windows Phone 8 versions older than Update 3 (a.k.a. GDR3), as it causes such devices to show a mostly desktop view instead of narrow "phone" view. To address this, you'll need to include the following CSS and JavaScript to work around the bug.

@-webkit-viewport   { width: device-width; }
@-moz-viewport      { width: device-width; }
@-ms-viewport       { width: device-width; }
@-o-viewport        { width: device-width; }
@viewport           { width: device-width; }

// Copyright 2014-2015 Twitter, Inc.
// Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
  var msViewportStyle = document.createElement('style')
  msViewportStyle.appendChild(
    document.createTextNode(
      '@-ms-viewport{width:auto!important}'
    )
  )
  document.querySelector('head').appendChild(msViewportStyle)
}

For more information and usage guidelines, read Windows Phone 8 and Device-Width. As a heads up, we include this in all of Bootstrap's documentation and examples as a demonstration.

What is the problem with Safari percent rounding?

The rendering engine of versions of Safari prior to v7.1 for OS X and Safari for iOS v8.0 had some trouble with the number of decimal places used in our .col-*-1 grid classes. So if you had 12 individual grid columns, you'd notice that they came up short compared to other rows of columns. Besides upgrading Safari/iOS, you have some options for workarounds:

  • Add .pull-right to your last grid column to get the hard-right alignment
  • Tweak your percentages manually to get the perfect rounding for Safari (more difficult than the first option)

How can we deal with bugs that we suspect having to do with Bootstrap?

Go to the Getting Started guide and scroll to the "Disabling responsiveness" section and read the rest of the page.

How can we make Bootstrap responsive?

We do not have to do anything. Bootstrap automatically handle it.

How can we ensure proper rendering and touch zooming?

To ensure proper rendering and touch zooming, add the viewport meta tag to your <head>:

<meta name="viewport" content="width=device-width, initial-scale=1">

This line is included in the boilerplate template above.

How can we disable zooming capabilities on mobile devices?

You can disable zooming capabilities on mobile devices by adding user-scalable=no to the viewport meta tag. This disables zooming, meaning users are only able to scroll, and results in your site feeling a bit more like a native application. Overall, we don't recommend this on every site, so use caution!

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

How can we style tables?

Add the class="table table-stripe" to the table element.

How can we style buttons?

Add class="btn btn-success" to the button element. We can also add this to the anchor tag, and the input tag as well. Other color classes are:

  1. btn
  2. btn-default
  3. btn-primary: Provides extra visual weight and identifies the primary action in a set of buttons
  4. btn-info: Contextual button for informational alert messages
  5. btn-warning: Indicates caution should be taken with this action
  6. btn-danger: Indicates a dangerous or potentially negative action
  7. btn-link: Deemphasize a button by making it look like a link while maintaining button behavior
  8. btn-lg: Make a large button
  9. btn-sm: Make a small button
  10. btn-block: Make the button span the full width of the parent element
  11. btn-success

We can apply button classes on the <a>, <button>, or <input> element tags. While button classes can be used on <a> and <button> elements, only <button> elements are supported within our nav and navbar components. If the <a> elements are used to act as buttons – triggering in-page functionality, rather than navigating to another document or section within the current page – they should also be given an appropriate role="button".

As a best practice, we highly recommend using the <button> element whenever possible to ensure matching cross-browser rendering. Among other things, there's a bug in Firefox <30 that prevents us from setting the line-height of <input>-based buttons, causing them to not exactly match the height of other buttons on Firefox.

Using color to add meaning to a button only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (the visible text of the button), or is included through alternative means, such as additional text hidden with the .sr-only class.

How can we control the size of the buttons in a button group or a dropdown menu?

Use the btn-sm, btn-lg classes.

How can we make a close icon?

<button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>

How can we disable a button?

Make buttons look unclickable by fading them back with opacity. Add the disabled attribute to <button> buttons.

<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>

If you add the disabled attribute to a <button>, Internet Explorer 9 and below will render text gray with a nasty text-shadow that we cannot fix.

Add the .disabled class to <a> buttons.

<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>

We use .disabled as a utility class here, similar to the common .active class, so no prefix is required.

This class uses pointer-events: none to try to disable the link functionality of <a>s, but that CSS property is not yet standardized and isn't fully supported in Opera 18 and below, or in Internet Explorer 11. In addition, even in browsers that do support pointer-events: none, keyboard navigation remains unaffected, meaning that sighted keyboard users and users of assistive technologies will still be able to activate these links. So to be safe, use custom JavaScript to disable such links.

How can we indicate active state for a button?

Buttons will appear pressed (with a darker background, darker border, and inset shadow) when active. For <button> elements, this is done via :active. For <a> elements, it's done with .active. However, you may use .active on <button>s (and include the aria-pressed="true" attribute) should you need to replicate the active state programmatically.

No need to add :active as it's a pseudo-class, but if you need to force the same appearance, go ahead and add .active.

<button type="button" class="btn btn-primary btn-lg active">Primary button</button>
<button type="button" class="btn btn-default btn-lg active">Button</button>

What elements can we apply button classes on?

We can apply button classes on the <a>, <button>, or <input> element tags. While button classes can be used on <a> and <button> elements, only <button> elements are supported within our nav and navbar components.

What is a button group?

Group a series of buttons together on a single line.

How can we create a button group?

Wrap a series of buttons with .btn in .btn-group.

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div>

How can I create a button toolbar?

Combine sets of <div class="btn-group"> into a <div class="btn-toolbar"> for more complex components.

<div class="btn-toolbar" role="toolbar" aria-label="...">
  <div class="btn-group" role="group" aria-label="...">...</div>
  <div class="btn-group" role="group" aria-label="...">...</div>
  <div class="btn-group" role="group" aria-label="...">...</div>
</div>

How can we apply sizing to a button group?

Instead of applying button sizing classes to every button in a group, just add .btn-group-lg or .btn-group-sm to each .btn-group, including when nesting multiple groups.

<div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-xs" role="group" aria-label="...">...</div>

Can we nest a button group within another button group?

Yes. Place a .btn-group within another .btn-group when you want dropdown menus mixed with a series of buttons.

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">1</button>
  <button type="button" class="btn btn-default">2</button>

  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">Dropdown link</a></li>
      <li><a href="#">Dropdown link</a></li>
    </ul>
  </div>
</div>

How can we make a vertical button group?

Use the btn-group-vertical class. Make a set of buttons appear vertically stacked rather than horizontally. Split button dropdowns are not supported here.

<div class="btn-group-vertical" role="group" aria-label="...">
  ...
</div>

How can we make a justified button group?

Make a group of buttons stretch at equal sizes to span the entire width of its parent. Also works with button dropdowns within the button group.

Handling borders: Due to the specific HTML and CSS used to justify buttons (namely display: table-cell), the borders between them are doubled. In regular button groups, margin-left: -1px is used to stack the borders instead of removing them. However, margin doesn't work with display: table-cell. As a result, depending on your customizations to Bootstrap, you may wish to remove or re-color the borders.

IE8 and borders: Internet Explorer 8 doesn't render borders on buttons in a justified button group, whether it's on <a> or <button> elements. To get around that, wrap each button in another .btn-group. See #12476 for more information.

With <a> elements, just wrap a series of .btns in .btn-group.btn-group-justified.

<div class="btn-group btn-group-justified" role="group" aria-label="...">
  ...
</div>

Links acting as buttons: If the <a> elements are used to act as buttons – triggering in-page functionality, rather than navigating to another document or section within the current page – they should also be given an appropriate role="button".

With <button> elements, to use justified button groups with <button> elements, you must wrap each button in a button group. Most browsers don't properly apply our CSS for justification to <button> elements, but since we support button dropdowns, we can work around that.

<div class="btn-group btn-group-justified" role="group" aria-label="...">
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Left</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Middle</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Right</button>
  </div>
</div>

How can we use a button to trigger a dropdown menu inside a button group?

We can use any button to trigger a dropdown menu by placing it within a .btn-group and providing the proper menu markup. Button dropdowns require the dropdown plugin to be included in your version of Bootstrap.

<!-- Single button -->
<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

How can we indicate active state for an anchor element?

Add the class="active" to the <a> element.

How can we create a simple navigation bar?

<nav role="navigation" class="navbar navbar-default">
    <div class="">
        <a href="http://www.in28minutes.com" class="navbar-brand">in28Minutes</a>
    </div>
    <div class="navbar-collapse">
        <ul class="nav navbar-nav">
            <li class="active"><a href="/login">Home</a></li>
            <li><a href="/list-todos">Todos</a></li>
        </ul>
    </div>
</nav>
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License