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

Twitter Bootstrap support for IE7

I have my application built upon latest Bootstrap Version 3.0.3. Everything was running fine on Chrome and Mozilla. Now suddenly, people want it to support IE7 and IE8. I have tried implementing Bootstrap 3 for IE7 , but it didn't help. Everything…
Shubh
  • 6,693
  • 9
  • 48
  • 83
6
votes
1 answer

Bootstrap 3: how to control input width inside input-group?

See http://jsfiddle.net/7T9r9/ as an example.
  • …
    Nikolay Derkach
    • 1,734
    • 2
    • 22
    • 34
    • 6
    votes
    3 answers

    Select "arrow" hidden in bootstrap 3 input group in IE9

    I have the following html styled by bootstrap 3 that defines a group of inputs:
    Øyvind Bråthen
    • 59,338
    • 27
    • 124
    • 151
    6
    votes
    1 answer

    Text truncated in Bootstrap dl-horizontal element

    I have a website that uses Bootstrap v3.0. In one of the views I need to show 6 pair of key-value items and I was using dl-horizontal element. My problem with this list is that my keys have different lenghts so when I have a long key, the text is…
    David Moreno García
    • 4,423
    • 8
    • 49
    • 82
    6
    votes
    1 answer

    Bootstrap 3 Horizontal scrollable row Website Design

    I am trying to make a horizontal scroll web page using bootstrap 3. This is what I have tried so far. @media (min-width:768px) { .container { width:100%; } #main-content{ min-height: 100%; height: auto; } #main-content > .row { …
    Ravimallya
    • 6,550
    • 2
    • 41
    • 75
    6
    votes
    2 answers

    add text input to inline radio buttons

    What's the Bootstrappy way of adding a short text INPUT to a row of inline radio buttons? I've tried wrapping in a
    to the right of the list of radio buttons, but that puts it into its own grid space, of course. Here's my…
    Graham Charles
    • 9,394
    • 3
    • 26
    • 41
    6
    votes
    2 answers

    Fire event on carousel slide (not slid) event, Bootstrap 3

    Bootstrap 2 seems to work fine handling the slide event (see this question) with the following code: $('#myCarousel').bind('slide', function (e) { console.log('slide event!'); }); I cannot, however, get the same things to work in Bootstrap 3…
    ringstaff
    • 2,331
    • 1
    • 16
    • 25
    6
    votes
    1 answer

    Issue in Chrome with Bootstrap 3 columns when using Jquery Isotope (but fine in Safari!)

    I have spent days trying to solve this and I'm at my wits' end. If anyone has any insight, I would be very, very grateful. I am working on a site and using both Bootstrap 3 and Jquery Isotope. I am using Bootstrap 3's grid to arrange divs in four…
    ornmnt
    • 355
    • 2
    • 6
    • 17
    6
    votes
    1 answer

    dropdown in navigation bar does not expand (bootstrap, angular, directives, routes)

    For some strange reason the bootstrap menu dropdown is not expanded on click when it is constructed through router template. Being used directly in the template it works fine. Here is the plunker to play with:…
    Alex Netkachov
    • 13,172
    • 6
    • 53
    • 85
    6
    votes
    3 answers

    Bootstrap3: fixed nav on the left

    I am setting up a site with bootstrap 3 and the idea is to have a column on the left reserved for the navigation and on the right the content of the site: http://jsbin.com/iQIKUli/3 The position of the nav should be fixed and without margin on the…
    FrancescoMussi
    • 20,760
    • 39
    • 126
    • 178
    6
    votes
    2 answers

    Bootstrap - row can I have columns add up to more then 12?

    I was wondering if my nested row can add up to more then 12? Is it wrong to work this way? I tried it and it seems to work fine for me, but I want to make sure that I am doing this right. For an example can I have this?
    …
    Chris Drew
    • 61
    • 1
    • 3
    6
    votes
    1 answer

    x-editable + bootstrap 3 + Twitter typeahead.js not working

    I tried to integrate Bootstrap3 with the awesome x-editable and typeahead.js, but I couldn't make it work: I tried the following mark the element with data-type='typeaheadjs' add type='typeaheadjs' to $().editable() move all parameters to data-*…
    silentman.it
    • 361
    • 5
    • 18
    6
    votes
    3 answers

    Twitter Bootstrap 3 - max height, custom layout

    I have something like this: +-------------------------------------------+ | -- navigation -- | +------+------------------------------------+ | | | | left | …
    mrzepinski
    • 419
    • 2
    • 8
    • 21
    6
    votes
    1 answer

    Add tooltip to select element in Bootstrap 3

    Anyone know how to add a Bootstrap 3 tooltip to a select element? Having no problems with inputs or textareas.