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

Bootstrap .form-horizontal not working

I am a first-try bootstrap guy. The thing i want to achieve is to have labels and inputs same line nice and clean. Anyone can explain me why in the below example labels are still above inputs? Am i doing something wrong?
Stefanos Vakirtzis
  • 448
  • 1
  • 7
  • 19
6
votes
1 answer

bootstraps 3 white space on right side mobile devices

I am getting a white space while scrolling to the right on a mobile device. Desktop browsing works as it should. I've tried the following things, non have worked. css: html, body { width: 100%; overflow-x: hidden; <- Don't like this one,…
krizajb
  • 1,715
  • 3
  • 30
  • 43
6
votes
3 answers

Bootstrap 3 has-feedback icon alignment with field sizing doesn't seem to work

I am trying to use the has-feedback form class to add an icon on a form field, however with input field sizing, the icon is shown out of bounds, below is jsfiddle of the problem: jsfiddle
…
Val
  • 1,023
  • 3
  • 10
  • 21
6
votes
1 answer

How to create responsive buttons in bootstrap3?

I trying to display btn-sm for 768px screens but it keeps showing me btn-xs. Here is my HTML code
Maximus
  • 2,906
  • 4
  • 35
  • 55
6
votes
1 answer

Bootstrap 3: Show spinner + fade background whilst waiting for modal content to load

So I know that you can use data-target + href now to load remote content, however, what I'm getting back from my ajax response is json (and I cannot change that server side), so I first need to do processing on it. I want to show a spinner, for…
user429620
6
votes
3 answers

Select2 with Twitter Bootstrap 3 / Dropdown wrong width

I want to use select2.js in combination with twitter bootstrap 3. Everything works fine so far, except the fact, that the Drop-Down container has not the same width as the select container itself. By resizing the window this phenomen appears and…
user1895259
  • 147
  • 2
  • 2
  • 10
6
votes
4 answers

jQuery Datepicker in Twitter Bootstrap 3 Modal

I have been trying quite a few solutions to this problem now but i can't get it to work. I trying to get a datepicker into my form. The form is placed inside a bootstrap modal and thw whole thing is loaded via ajax. Everything works fine except the…
Twistar
  • 782
  • 5
  • 21
  • 35
6
votes
3 answers

Word-wrap not working in bootstrap 3

I am trying to create a button having some text over it. But the text is not wrapping on the button. Here is what i have done.
…
Shahzeb Khan
  • 3,582
  • 8
  • 45
  • 79
6
votes
1 answer

Twitter Boostrap - Get popover textarea and input value

I'm trying to get the input value inside a Bootstrap popover on submit, but i got a empty value.
Popover link
Lorem Ipsum
…
Gino
  • 1,834
  • 2
  • 19
  • 20
6
votes
2 answers

Bootstrap bs-example

I copied CSS code for bs-example from the Bootstrap 3.0.3 docs site. I'm kind of a beginner with CSS, so if anyone could explain me this I would be thankful. The following code: /* Echo out a label for the example */ .bs-example:after { content:…
dynamitem
  • 1,647
  • 6
  • 25
  • 45
6
votes
2 answers

How to confirm a form submission with Bootstrap 3 popovers and jQuery

I have rows of items in a list that each have their own delete button. Before deleting the item, I'd like to use Bootstrap's popovers to display a confirmation before the form is actually submitted: I used to use the Fast Confirm jQuery plugin for…
bhall
  • 1,391
  • 3
  • 14
  • 19
6
votes
4 answers

Bootstrap modal form does not close after submit

What I need to do is to show a popup to add a new record to my database, im using bootstrap 3 and I love it because im not using a single line of jquery, and I have really nice form (obvioulsy they are based in jquery). I am validating my form via…
bto.rdz
  • 6,636
  • 4
  • 35
  • 52
6
votes
2 answers

Bind modal data to knockout model

I'm trying to have a twitter bootstrap modal open to a window that has a text area in it which is editable, then on save, it saves the appropriate data. My current code: HTML:
Samsquanch
  • 8,866
  • 12
  • 50
  • 89
6
votes
4 answers

Hide html element when specific resolution

I am using twitter bootstrap 3.0. When resolution of the screen gets changed to smaller the menu changed to mobile view. I have a div contained slider with images, so I want to hide that div when my menu changed to mobile view (when screen…
Sergino
  • 10,128
  • 30
  • 98
  • 159
6
votes
4 answers

Bootstrap - direct link to modal window

Is it possible to have an url like this: www.url.com/#imprint (or similar) to link directly to the page with the opened modal window? is this possible? Any hints? Thank you!
Marek123
  • 1,193
  • 7
  • 35
  • 75
1 2 3
…
99
100