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

Bootstrap dropdown sub menu missing

Bootstrap 3 is still at RC, but I was just trying to implement it. I couldn't figure out how to put a sub menu class. Even there is no class in css and even the new docs don't say anything about it It was there in 2.x with class name as…
DevC
  • 6,005
  • 8
  • 34
  • 56
303
votes
6 answers

Bootstrap 3 jquery event for active tab change

I spent an unrealistic amount of time trying to fire a function when the tab changes of the bootstrap 3 tab/navbar and literally all suggestions google spat out were wrong/did not work. How to go about this? Meta-edit: see comment
Gerben Rampaart
  • 9,216
  • 3
  • 23
  • 32
285
votes
11 answers

Best way to represent a Grid or Table in AngularJS with Bootstrap 3?

I am creating an App with AngularJS and Bootstrap 3. I want to show a table/grid with thousands of rows. What is the best available control for AngularJS & Bootstrap with features like Sorting, Searching, Pagination etc.
Rahat Khanna
  • 4,330
  • 4
  • 18
  • 31
268
votes
5 answers

What are these attributes: `aria-labelledby` and `aria-hidden`

Using Bootstrap modal, I've seen these aria attributes a lot, but I never knew how to make use of them. Does anyone know what cases to use these attributes? I googled—just didn't find any straightforward answers.
Hao
  • 5,661
  • 9
  • 34
  • 74
230
votes
32 answers

How to add spacing between columns?

I have two columns:
How can I add a space between them? The output would simply be two columns right next to each other taking up the whole width of the page. Say the width was set to 1000px…
Muhammed Bhikha
  • 4,501
  • 8
  • 34
  • 46
228
votes
22 answers

IE8 issue with Twitter Bootstrap 3

I am creating a site using the new Twitter Bootstrap. The site looks fine and works in all required browsers except IE8. In IE8 it seems to be displaying elements of the mobile version but stretched across the full screen of my desktop. I believe…
wrayvon
  • 2,500
  • 2
  • 11
  • 8
219
votes
9 answers

Twitter Bootstrap 3.0 how do I "badge badge-important" now

In version two I could use badge badge-important I see that the .badge element no longer has contextual (-success,-primary,etc..) classes. How do i achieve the same thing in version 3? Eg. I want warning badges and important badges in my UI
Peter
  • 7,551
  • 8
  • 55
  • 92
212
votes
31 answers

Multiple modals overlay

I need that the overlay shows above the first modal, not in the back. $('#openBtn').click(function(){ $('#myModal').modal({show:true}) }); Launch modal
Willian Bonho Daiprai
  • 2,325
  • 3
  • 10
  • 11
212
votes
7 answers

Bigger Glyphicons

How do I make bigger Glyphicons in twitter bootstrap 3.0 (not 2.3.x). This code will make my glyphicons big: How can I get…
guiomie
  • 4,600
  • 5
  • 34
  • 65
209
votes
23 answers

Changing the width of Bootstrap popover

I am designing a page using Bootstrap 3. I am trying to use a popover with placement: right on an input element. The new Bootstrap ensures that if you use form-control you basically have a full-width input element. The HTML code looks something like…
mayankbatra
  • 2,458
  • 3
  • 14
  • 16
208
votes
26 answers

Twitter Bootstrap 3 Sticky Footer

I have been using the twitter bootstrap framework for quite a while now and they recently updated to version 3! I'm having trouble getting the sticky footer to stick to the bottom, I have used the starter template supplied by the twitter bootstrap…
Brad Fletcher
  • 3,403
  • 3
  • 20
  • 39
207
votes
12 answers

Bootstrap 3 Navbar Collapse

Is there any way to increase the point at which the bootstrap 3 navbar collapses (i.e. so that it collapses into a drop down on portrait tablets)? These two were applicable to bootstrap 2 but not now! How to change navbar collapse threshold using…
timhc22
  • 6,059
  • 5
  • 39
  • 56
187
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,847
  • 4
  • 24
  • 33
185
votes
21 answers

Background image jumps when address bar hides iOS/Android/Mobile Chrome

I'm currently developing a responsive site using Twitter Bootstrap. The site has a full screen background image across mobile/tablet/desktop. These images rotate and fade through each, using two divs. It's nearly perfect, except one issue. Using iOS…
Dave Clarke
  • 2,607
  • 4
  • 18
  • 35
183
votes
14 answers

Bootstrap throws Uncaught Error: Bootstrap's JavaScript requires jQuery

I am trying to use Bootstrap to make an interface for a program. I added jQuery 1.11.0 to the tag and thought that was that, but when I launch the web page in a browser jQuery reports an error: Uncaught Error: Bootstrap's JavaScript requires…
user3327457
1
2
3
…
99 100