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

21474 questions
104
votes
22 answers

bootstrap jquery show.bs.modal event won't fire

i'm using the modal example from the bootstrap 3 docs. the modal works. however i need to access the show.bs.modal event when it fires. for now i'm just trying: $('#myModal').on('show.bs.modal', function () { alert('hi') }) Nothing happens, the…
m4rlo
  • 1,153
  • 2
  • 7
  • 8
102
votes
10 answers

Disable a link in Bootstrap

The first example didn't work. I need to have always a list to disable links? Or what is wrong with my first demo? Disabled link
102
votes
9 answers

How do I clear a search box with an 'x' in bootstrap 3?

Having some trouble with bootstrap, so some help would be awesome. Thanks What I would like:(top part) My current code:
K2SO Ghost Spirit
  • 1,291
  • 3
  • 11
  • 11
102
votes
8 answers

Updating Bootstrap to version 3 - what do I have to do?

I'm new to Bootstrap and have the older version 2.3.2. Version 3 has been released. Do I just simply replace the CSS and Javascript files if I want to use the latest version?
Henry
  • 5,195
  • 7
  • 21
  • 34
101
votes
32 answers

Bootstrap navbar Active State not working

I have bootstrap v3. I use the class="active" on mynavbar and it does not switch when I press menu items. I know how to do this with jQuery and build a click function but I'm thinking this functionality should be included in bootstrap? So maybe it…
TheLettuceMaster
  • 15,594
  • 48
  • 153
  • 259
100
votes
3 answers

Bootstrap 3 Horizontal Divider (not in a dropdown)

I know Bootstrap 3 has a horizontal divider you can place inside of dropdown menus to separate links like this:
user4158347
100
votes
1 answer

Why did Bootstrap 3 switch to box-sizing: border-box?

I'm migrating my Bootstrap themes from v2.3.2 to v3.0.0 and one thing I noticed is that a lot of dimensions are calculated differently, due to the following styles in bootstrap.css. *, *:before, *:after { -webkit-box-sizing: border-box; …
Alexander Rechsteiner
  • 5,694
  • 5
  • 34
  • 47
99
votes
11 answers

Bootstrap collapse animation not smooth

shapeare
  • 4,133
  • 7
  • 28
  • 39
99
votes
10 answers

Bootstrap 3.0: How to have text and input on same line?

I'm currently switching my website over to Bootstrap 3.0. I'm having an issue with form input and text formatting. What worked in Bootstrap 2 does not work in Bootstrap 3. How can I get text on the same line before and after a form input? I…
fat fantasma
  • 7,483
  • 15
  • 48
  • 66
98
votes
10 answers

Make column fixed position in bootstrap

Using Bootstrap, I have a grid column class="col-lg-3" that I want to place it in position:fixed while the other .col-lg-9 is normal position (scroll-able through the page).
Fixed content …
user1556571
98
votes
10 answers

Bootstrap 3 offset on right not left

In regards to BS 3 if I wanted just a narrow column of content on the right I might use an offset class of 9 and a column of 3. However, what if I wanted the reverse and on the left side? Is there a proper way to do this in BS or should I just use…
Work-Together2013
  • 1,171
  • 1
  • 7
  • 11
97
votes
8 answers

Contain form within a bootstrap popover?

" data-placement="top"…
user1438003
  • 6,603
  • 8
  • 30
  • 36
95
votes
4 answers

Twitter bootstrap hide element on small devices

I have this code:
Crisan Raluca Teodora
  • 1,293
  • 1
  • 13
  • 21
94
votes
4 answers

How to display tables on mobile using Bootstrap?

My tables display fine on desktop, but once I try to view the mobile version my table ends up being too wide for the mobile device screen. I am using a responsive layout. How can I set table widths for mobile view? What other alternatives are there…
user810606
91
votes
6 answers

Bootstrap 3 - disable navbar collapse

This is my simple navbar:
1 2 3
…
99 100