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
126
votes
6 answers

Bootstrap 3 - Why is row class is wider than its container?

I just started using Bootstrap 3. I am having a difficult time understanding how the row class works. Is there a way to avoid the padding-left and padding-right?
Petran
  • 7,677
  • 22
  • 65
  • 104
126
votes
15 answers

Label on the left side instead above an input field

I would like to have the labels not above the input field, but on the left side.
Stefan Vogt
  • 1,513
  • 2
  • 10
  • 16
125
votes
4 answers

Available text color classes in Bootstrap

I'm developing a sign up page, by putting some text as the title at the navigation bar. I want to give those texts different colors. For this purpose I'm using a separate CSS file, but I want to do this using bootstrap's CSS file. Can anybody list…
fidel castro
  • 1,597
  • 2
  • 11
  • 19
124
votes
24 answers

Bootstrap: Open Another Modal in Modal

So, I'm using this code to open another modal window in a current opened modal window: Click What happens is, that for like 500ms the scrollbar will duplicate. I guess…
AlexioVay
  • 4,338
  • 2
  • 31
  • 49
123
votes
10 answers

Right to Left support for Twitter Bootstrap 3

There have been questions about this before: Twitter Bootstrap CSS that support from RTL languages But all the answers are good for Bootstrap 2.x I'm working on a project that is in Arabic (rtl), and I need Bootstrap 3.x right to left. Does anybody…
Rounds
  • 1,879
  • 4
  • 19
  • 30
121
votes
15 answers

Bootstrap 3, 4 and 5 .container-fluid with grid adding unwanted padding

I'd like my content to be fluid, but when using .container-fluid with Bootstrap's grid, I'm still seeing padding. How can I get rid of the padding? I see that I don't get the padding with .row, but I want to add columns, and as soon as I do, the…
Tim
  • 1,263
  • 2
  • 10
  • 7
120
votes
3 answers

Bootstrap 3 Slide in Menu / Navbar on Mobile

I am building a browser-based mobile app and I've decided to use Bootstrap 3 as the css framework for the design. Bootstrap 3 comes with a great "responsive" feature in the navigation bar where it collapses automatically if it detects a specific…
Armin
  • 1,736
  • 4
  • 19
  • 35
120
votes
10 answers

Bootstrap 3 panel header with buttons wrong position

I am using Bootstrap 3 and I would like to add some buttons in panel header, on top-right corner. When trying to add them, they are show below title baseline. Code : http://bootply.com/82631 What are the missing CSS I should add either to the title,…
Dede
  • 1,640
  • 2
  • 14
  • 24
119
votes
5 answers

bootstrap 4 responsive utilities visible / hidden xs sm lg not working

Having an issue with the new responsive utilities hidden / visible classes, when migrating to Bootstrap 4. I am aware that .hidden- classes have been removed from v3 and replaced with .hidden-*-up .hidden-*-down. Using the new…
Yatko
  • 8,715
  • 9
  • 40
  • 46
119
votes
30 answers

Bootstrap modal: background jumps to top on toggle

I have a problem, with a modal. I have a button on a page, that toggles the modal. When the modal shows up, the page jumps to top. I have done everything I could to find a solution/etc, but I am really lost. EDIT: I have also tried with:…
FooBar
  • 5,752
  • 10
  • 44
  • 93
113
votes
2 answers

What is the `data-target` attribute in Bootstrap 3?

Can you tell me what is the system or behavior behind the data-target attribute used by Bootstrap 3? I know that data-toggle used to aim API JavaScript of Bootstrap of graphical functionality.
miltone
  • 4,416
  • 11
  • 42
  • 76
112
votes
10 answers

Installing Bootstrap 3 on Rails App

I'm trying to install Bootstrap 3.0 on my Rails app. I recently finished Michael Hartl's tutorial and am now trying to build my own system using this new version of Bootstrap, but I have a few questions that I'm not sure about. My system specs: OS…
megashigger
  • 8,695
  • 17
  • 47
  • 79
108
votes
3 answers

How to set the size of a column in a Bootstrap responsive table

How do you set the size of a column in a Bootstrap responsive table? I don't want the table to loose its reponsive features. I need it to work in IE8 as well. I have included HTML5SHIV and Respond. I'm using Bootstrap 3 (3.2.0)
Brendan Vogt
  • 25,678
  • 37
  • 146
  • 234
108
votes
9 answers

Decreasing height of bootstrap 3.0 navbar

I am trying to decrease bootstrap 3.0 navbar height which is used with fixed top behavior. Here i am using code. HTML
107
votes
5 answers

Collapsing Sidebar with Bootstrap

I just visited this page http://www.elmastudio.de/ and wondered if it is possible to build the left sidebar collapse with Bootstrap 3. Code to collapse the sidebar from the top (phone only):
1 2 3
…
99 100