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
157
votes
7 answers

Bootstrap full-width text-input within inline-form

I am struggling to create a textbox that fits the entire width of my container area.
Killnine
  • 5,728
  • 8
  • 39
  • 66
157
votes
10 answers

Set font-weight using Bootstrap classes

Is there any Twitter Bootstrap class for font-weight: bold and other values of font-weight? I would not create a new one if this already exists in Bootstrap.
Ionică Bizău
  • 109,027
  • 88
  • 289
  • 474
156
votes
4 answers

Stacked Tabs in Bootstrap 3

I am trying to implement left-aligned stacked tabs using the Tab jquery plugin in Bootstrap 3 where tabs are rendered vertically to the left of tab content, rather than on top. When I try the following;
    …
osmbergs
  • 1,593
  • 2
  • 11
  • 6
154
votes
8 answers

Can I use complex HTML with Twitter Bootstrap's Tooltip?

If I check official documentation, I can see a property called HTML: Name | Type | default | Description ---------------------------------------------------------------------------- html | boolean | false | …
sergserg
  • 21,716
  • 41
  • 129
  • 182
147
votes
30 answers

How to detect responsive breakpoints of Twitter Bootstrap 3 using JavaScript?

Currently, Twitter Bootstrap 3 have the following responsive breakpoints: 768px, 992px and 1200px, representing small, medium and large devices respectively. How can I detect these breakpoints using JavaScript? I would like to listen with JavaScript…
Rubens Mariuzzo
  • 28,358
  • 27
  • 121
  • 148
144
votes
4 answers

Responsive website zoomed out to full width on mobile

I am testing out Bootstrap responsiveness navbar and I have a demo website. When I resize the browser on a desktop, it all works fine including the nav bar which become collapsible menu with a small icon on the top which I can click to see more menu…
Laurence
  • 7,633
  • 21
  • 78
  • 129
139
votes
19 answers

How can I keep selected Bootstrap tab on page refresh?

I am trying to keep selected tab active on refresh with Bootstrap 3. Tried and checked with some question already been asked here but none of work for me. Don't know where I am wrong. Here is my code HTML
138
votes
16 answers

Bootstrap carousel multiple frames at once

This is the effect I'm trying to achieve with Bootstrap 3 carousel Instead of just showing one frame at a time, it displays N frames slide by side. Then when you slide (or when it auto slides), it shifts the group of slides like it does. Can this…
rodrigo-silveira
  • 12,607
  • 11
  • 69
  • 123
137
votes
17 answers

How to change btn color in Bootstrap

Is there a way to change all .btn properties in Bootstrap? I have tried below ones, but still sometimes it shows the default blue color (say after clicking and removing the mouse etc). How can I change the entire theme altogether? .btn-primary,…
Sam
  • 4,302
  • 12
  • 40
  • 74
137
votes
6 answers

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

I am using the new Twitter Bootstrap 3, and am trying to place a search box like this (below) in the top navbar: In Bootstrap 2, it could've ben done like this:
its_me
  • 10,998
  • 25
  • 82
  • 130
134
votes
5 answers

100% width Twitter Bootstrap 3 template

I am a bootstrap newbie and I have a 100% wide template that I want to code with bootstrap. The first column begins at the left corner and I have a Google map the stretches to the rightmost. I thought I could do this with container-fluid class, but…
Samia Ruponti
  • 3,910
  • 12
  • 42
  • 62
133
votes
13 answers

Bootstrap 3: pull-right for col-lg only

New to bootstrap 3.... In my layout I have:
elements 1
elements 2
I would…
Thibs
  • 8,058
  • 13
  • 54
  • 85
129
votes
2 answers

What's the tabindex="-1" in bootstrap for

What's the tabindex attribute in Bootstrap 3 for? Its documentation doesn't say anything about them although they use them practically in all modals. I've only find this regarding its use, which doesn't really say much Accessible tooltips for…
Alvaro
  • 40,778
  • 30
  • 164
  • 336
128
votes
14 answers

Bootstrap 3 Collapse show state with Chevron icon

Using the core example taken from the Bootstrap 3 Javascript examples page for Collapse, I have been able to show the state of collapse using chevron icons. I have this working using: $('#accordion .accordion-toggle').click(function (e) { var…
404ryannotfound
  • 1,416
  • 2
  • 10
  • 9
127
votes
8 answers

Bootstrap 3.0 - Fluid Grid that includes Fixed Column Sizes

I am learning how to use Bootstrap. Currently, I'm wading my way through layouts. While Bootstrap is pretty cool, everything I see seems dated. For the life of me, I have what I think is a basic layout that I can't figure out. My layout looks like…
Node Newbie
  • 1,951
  • 5
  • 17
  • 14
1 2 3
…
99 100