Stack Overflow
Stack Overflow

Questions tagged [twitter-bootstrap-3]

Bootstrap 3 is the third generation of the front-end framework allowing for speedier web development with an attractive look and feel. Use with the [twitter-bootstrap] tag

Presentation

Bootstrap 3
Sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.

Current version: Bootstrap v3.4.0

Backwards compatibility

Bootstrap 3 is not backwards compatible with v2.x. To learn about major changes, novelties and removals, please have a look on the Bootstrap migrating guide from 2.x to 3.

What's new?

  • new flat design and an optional theme
  • new Customizer
  • better box model by default
  • reviewed grid system (mobile-first, classes for phones, tablets, desktops, and large desktops)
  • JavaScript plugins rewritten
  • new Glyphicons icon font
  • better navbar (now responsive and with subcomponents)
  • better modals (for responsive websites)
  • new components (panel, list-groups)
  • a few components removed (accordion, submenus, typeahead)
  • more consistent base and sizing classes
  • better documentation
  • dropped Internet Explorer 7 and Firefox 3.6 support

See all details in the Bootstrap 3 release notes.

Bootstrap for Sass

You can find a Sass-powered (official) version of Bootstrap, ready to drop right into your Sass powered applications.

See the Bootstrap for Sass Github page.

Links

  1. Website and style guide
  2. The Official Twitter Bootstrap Blog
  3. BootstrapDocs

Tools to test bootstrap code:

  1. Bootply: A Playground for Bootstrap, CSS, JavaScript and jQuery
  2. Bootlint: Official HTML linter for Bootstrap projects
  3. Bootlint Online: Online version of HTML linter for Bootstrap projects
  4. Yeoman generator

Reducing Payload

The default bootstrap.min.js and bootstrap.min.css files can be reduced in size by including only the components you use.

Another option is to use tools to remove unused CSS selectors. To learn more about task runners and build automation check out Grunt.js and the Grunt unCSS plugin.

CDN Links

21372 questions
1192
votes
34 answers

Center a column using Twitter Bootstrap 3

How do I center a div of one column size within the container (12 columns) in Twitter Bootstrap 3? .centered { background-color: red; }
bsr
  • 52,180
  • 78
  • 198
  • 296
935
votes
25 answers

vertical-align with Bootstrap 3

I'm using Twitter Bootstrap 3, and I have problems when I want to align vertically two div, for example — JSFiddle link:
corinem
  • 9,505
  • 4
  • 11
  • 7
772
votes
6 answers

What is sr-only in Bootstrap 3?

What is the class sr-only used for? Is it important or can I remove it? Works fine without. Here's my example:
736
votes
12 answers

Change navbar color in Twitter Bootstrap

How would I go about modifying the CSS to change the color of the navbar in Twitter Bootstrap?
Jamal Khan
  • 9,111
  • 6
  • 18
  • 22
566
votes
11 answers

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

What is the difference among col-lg-* , col-md-* and col-sm-* in Twitter Bootstrap?
StreetCoder
  • 9,103
  • 7
  • 36
  • 55
535
votes
8 answers

What is the difference between Bootstrap .container and .container-fluid classes?

Just downloaded 3.1 and found in the docs... Turn any fixed-width grid layout into a full-width layout by changing your outermost .container to .container-fluid. Looking in bootstrap.css, it appears that .container-fluid is identical to…
FatFingers
  • 6,519
  • 5
  • 20
  • 18
475
votes
20 answers

How can I get my Twitter Bootstrap buttons to right align?

I have a simple demo here:
  • One
  • Two
I have an unordered list and for each list item I wish to have text on the left and…
deltanovember
  • 38,665
  • 55
  • 151
  • 236
474
votes
8 answers

what are the .map files used for in Bootstrap 3.x?

There are two files included in the CSS folder with .map file extensions. They are: bootstrap-theme.css.map bootstrap.css.map They appear to be minified files but I don't know what they are for.
wetjosh
  • 5,880
  • 3
  • 21
  • 32
464
votes
5 answers

Meaning of numbers in "col-md-4"," col-xs-1", "col-lg-2" in Bootstrap

I am confused with the grid system in the new Bootstrap, particularly these classes: col-lg-* col-md-* col-xs-* (where * represents some number). Can anyone please explain the following: How that number is aligning the grids? How to use these…
Bravo
  • 7,137
  • 9
  • 34
  • 63
389
votes
42 answers

Five equal columns in twitter bootstrap

I want to have 5 equal columns on a page I am building and I can't seem to understand how the 5 column grid is being used here: http://web.archive.org/web/20120416024539/http://domain7.com/mobile/tools/bootstrap/responsive Is the five column grid…
Gandalf
  • 11,766
  • 26
  • 82
  • 146
388
votes
21 answers

React Js conditionally applying class attributes

I want to conditionally show and hide this button group depending on what is passed in from the parent component which looks like this: .... __hasMultipleSelected: function() { return…
apexdodge
  • 5,699
  • 3
  • 22
  • 32
387
votes
29 answers

Bootstrap 3 Navbar with Logo

I want to use the Bootstrap 3 default navbar with an image logo instead of text branding. What's the proper way of doing this without causing any issues with different screen sizes? I assume this a common requirement, but I haven't yet seen a good…
stepanian
  • 11,047
  • 8
  • 38
  • 62
374
votes
10 answers

How to vertically center a container in Bootstrap?

I'm looking for a way to vertically center the container div inside the jumbotron and to set it in the middle of the page. The .jumbotron has to be adapted to the full height and width of the screen. The .container div has a width of 1025px and…
user1012181
  • 7,800
  • 8
  • 54
  • 96
369
votes
48 answers

Bootstrap 3 Glyphicons are not working

I downloaded bootstrap 3.0 and can't get the glyphicons to work. I get some kind of "E003" error. Any ideas why this is happening? I tried both locally and online and I still get the same problem.
scooterlord
  • 14,208
  • 11
  • 43
  • 65
342
votes
38 answers

Avoid dropdown menu close on click inside

I have a Twitter Bootstrap dropdown menu. As all Twitter Bootstrap users know, the dropdown menu closes on click (even clicking inside it). To avoid this, I can easily attach a click event handler on the dropdown menu and simply add the famous…
php-dev
  • 6,340
  • 4
  • 18
  • 37
1
2 3
…
99 100