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
189
votes
1 answer

Choosing bootstrap vs material design

I'm going to start new project using AngularJS (full stack). My project needs to be responsive and I'll be creating templates from scratch. So I need an advice on whether to choose bootstrap 3 (with angular directives) or material design for…
Asik
  • 7,967
  • 4
  • 28
  • 34
189
votes
11 answers

Bootstrap right Column on top on mobile view

I have a Bootstrap Page like this:
A
B
Looks like: ----- |A|B| ----- So if I look at it on a mobile Device, the Column A is on top,…
schnawel007
  • 3,982
  • 3
  • 19
  • 27
186
votes
20 answers

Bootstrap 3 and Youtube in Modal

I'm trying to use the Modal feature from Bootstrap 3 to show my Youtube video. It works, but I can't click on any buttons in the Youtube video. Any help on this? Here's my code:
181
votes
5 answers

Should I use Bootstrap from CDN or make a copy on my server?

What's the best practice of using Twitter Bootstrap, refer to it from CDN or make a local copy on my server? Since Bootstrap keeps evolving, I am afraid if I refer to the CDN, the user would see different webpages over time, and some tags may even…
shapeare
  • 4,133
  • 7
  • 28
  • 39
181
votes
11 answers

Bootstrap 3 breakpoints and media queries

On the Bootstrap 3 media queries documentation it says: We use the following media queries in our Less files to create the key breakpoints in our grid system. Extra small devices (phones, less than 768px): No media query since this is the default…
Kris Hunt
  • 2,210
  • 3
  • 16
  • 19
178
votes
5 answers

How do I add a margin between bootstrap columns without wrapping

My layout currently looks like this In the center column, I want to add a small margin between each Server Div. But, if I add a margin to the CSS, it ends up line wrapping and looking like this
Andy
  • 49,085
  • 60
  • 166
  • 233
174
votes
20 answers

How to use Bootstrap in an Angular project?

I am starting my first Angular application and my basic setup is done. How can I add Bootstrap to my application? If you can provide an example then it would be a great help.
user3739018
  • 2,489
  • 3
  • 16
  • 25
174
votes
6 answers

How to use bootstrap-theme.css with bootstrap 3?

After downloading a complete pack of bootstrap 3 from http://getbootstrap.com, I noticed that there is a separate css file for theme. How to make use of it? Please explain? I included bootstrap-theme.css in my existing bootstrap project, but there…
Yuvaraj P
  • 2,067
  • 3
  • 15
  • 12
169
votes
7 answers

How to make a Bootstrap accordion collapse when clicking the header div?

In a Bootstrap accordion, instead of requiring a click on the a text, I want to make it collapse when clicking anywhere in the panel-heading div. I am using Bootstrap 3. So instead of accordion, it's just a collapsible panel. Any idea how to do the…
9blue
  • 4,693
  • 9
  • 29
  • 43
165
votes
16 answers

How to change the bootstrap primary color?

Is it possible to change the bootstrap primary color to match to the brand color? I am using bootswatch's paper theme in my case.
ajm
  • 12,863
  • 58
  • 163
  • 234
165
votes
17 answers

Input widths on Bootstrap 3

Update again: I am closing this question by selecting the top answer to keep people from adding answers without really understanding the question. In reality there is no way to do it with the build in functionality without using grid or adding extra…
cyberwombat
  • 38,105
  • 35
  • 175
  • 251
163
votes
5 answers

Column order manipulation using col-lg-push and col-lg-pull in Twitter Bootstrap 3

I'm now reading documentation on Twitter Bootstrap 3, and tried to follow column ordering as shown in this page but hit the wall. I don't understand why such a code works nor how to correctly specify the setting. What I want to show is one grid,…
Blaszard
  • 30,954
  • 51
  • 153
  • 233
162
votes
22 answers

How to increase Bootstrap Modal Width?

i've tried this but gone wrong here's the css body .modal-ku { width: 750px; } and here's the failed result
Damara Jati P
  • 1,687
  • 2
  • 11
  • 12
160
votes
8 answers

What is the '.well' equivalent class in Bootstrap 4

In bootstrap-3 there is .well class which adds a rounded border around an element with a gray background color and some padding.
Basic Well
But, I didn't find any .well class in bootstrap-4. Is there any tag equivalent to…
Jobin
  • 6,506
  • 5
  • 24
  • 26
158
votes
15 answers

Bootstrap with jQuery Validation Plugin

I am trying to add validation to my form with jQuery Validation Plugin, but I'm having a problem where the plugin puts the error messages when I'm using input groups. $('form').validate({ rules: { firstname: { minlength: 3, …
Miguel Borges
  • 7,549
  • 8
  • 39
  • 57
1 2
3
…
99 100