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
2 answers

bxSlider & Bootstrap 3 - Percentage slideWidth

I am using Bootstrap 3 on a website and I want to display two columns at a time with a bxSlider ticker, however the slideWidth parameter requries an absolute width and this is not possible as I am using percentages within BS's predefined CSS. I have…
Nathan Fitzgerald - Fitzgenius
  • 543
  • 1
  • 8
  • 36
6
votes
3 answers

Bootstrap 3 Tooltips with Angular

I'm attempting to use Boostrap 3 tooltips with Angular JS so that the tooltip displays the value of an object in the Angular scope. This works fine when the page loads, but when the value of the object in the scope is updated the tooltip still…
Ian A
  • 5,622
  • 2
  • 22
  • 31
6
votes
2 answers

How to change Bootstrap 3 button onclick css style

when I click on a Bootstrap button, a csss is applied while the mouse button is clicked. This is also visible when the mouse button is hold pressed over a bootstrap button. I need to change that style, but I can't find it using inspect element. How…
Terix
  • 1,367
  • 5
  • 25
  • 39
6
votes
5 answers

bootstrap form required field

I have a bootstrap form like this:
…
lunr
  • 5,159
  • 4
  • 31
  • 47
6
votes
1 answer

ul list not scrolling on key press but it does with mouse wheel

I'm working with Bootstrap 3 and i have an autossugest input. The problem is that i want the
    to scroll with the keyboard keys but it doesn't work. I think scrolling with arrows keys is a default behavior but the
      doesn´t do it. Here is what…
Fernando Prieto
  • 520
  • 1
  • 6
  • 19
6
votes
1 answer

django-crispy-forms input size

According with django-crispy-form documentation, I will be able to change input width with class input-small. But my form always looks with width at 100%: Also, If I add css_class to Field the size remains at width:100% ( .form-control ) I have set…
dani herrera
  • 48,760
  • 8
  • 117
  • 177
6
votes
1 answer

Jasny Bootstrap can't clear the file after submission

I have some html like this:
r3plica
  • 13,017
  • 23
  • 128
  • 290
6
votes
1 answer

Unable to get input with icon effect in Bootstrap 3

I can't get the same effect of the input with the feedback icon as listed on the Bootstrap documentation http://getbootstrap.com/css/#forms-control-validation under the "with optional icons" section. Here's my code:
idelara
  • 1,786
  • 4
  • 24
  • 48
6
votes
1 answer

Resource interpreted as Font but transferred with MIME type text/html: "http://localhost:3000/fonts/glyphicons-halflings-regular.woff"

iam using Meteor Framwork (PREVIEW 0.7.1.2), i have installed bootstrap-3 using mrt, everything is working fine ,however from the console in chrome iam recieving this warning : Resource interpreted as Font but transferred with MIME type text/html:…
Messeiry
  • 61
  • 1
  • 4
6
votes
4 answers

Bootstrap label class not wrapping

I'm performing an ng-repeat of labels {{a.tagName}} If the output is many labels, it goes off the screen, instead of wrapping responsively according to…
user2827377
  • 1,381
  • 2
  • 16
  • 26
6
votes
1 answer

Using CSS and Bootstrap 3 in order to highlight the currently hovered-on row and column of a html table

I would like to be able to use Bootstrap 3 or/and plain css in order to highlight the currently hovered-on row and column of a html table. Is this possible without using custom javascript and keeping the responsiveness of Bootstrap tables? Can…
balteo
  • 23,602
  • 63
  • 219
  • 412
6
votes
3 answers

Bootstrap affix dynamically on resize

I have a 100% height div with a nav underneath it and more content under that. When the user scrolls passed the nav it sticks to the top of the page and when the user goes back to the 100% height div the nav is left behind. As the div is 100%…
user3332109
  • 71
  • 1
  • 3
6
votes
3 answers

Automatically scroll down after submit action

How to make my website automatically scroll down after sending e-mail from "Contact Form" which is located on the bottom of my webpage? Information about successful sending or error ouccurs below the form and after clicking that 'submit' button…
Tony
  • 77
  • 1
  • 1
  • 9
6
votes
1 answer

Bootstrap grid system responisve utility in resizable divs

i tried googleing found nothing so here i'am Lets say u have this
HELLo
this work as expected and in > md…
Zalaboza
  • 8,899
  • 16
  • 77
  • 142
6
votes
1 answer

BooleanField checkbox not render correctly with crispy_forms using bootstrap

I am using crispy_forms and FormHelper. I have a model field declared as: active = models.BooleanField(default=True) And in my ModelForm, I have tried both the following in my Layout: self.helper.layout = Layout( ... …
Joe Lones
  • 479
  • 2
  • 6
  • 17
1 2 3
…
99 100