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

Glyphicons in Photoshop

I am trying to use Bootstrap's Glyphicons (FontAwesome) in Photoshop. I've installed the font, but how to I actually type the icon characters? I found this page where I can copy/paste the icons…
user1960364
  • 1,951
  • 6
  • 28
  • 47
6
votes
4 answers

Avoiding text/characters being chopped off vertically

I've constrained the height of an area of text within a thumbnail box in Bootstrap, but in cases where the title is two or more lines, it cuts the last line of the text vertically in half. See here: http://www.bootply.com/zBXG6in5R5 Since the text…
delugeon
  • 63
  • 1
  • 7
6
votes
0 answers

yeoman webapp - grunt fontawesome and bootstrap font files copy task

I have been working around with yeoman and I have generated a webapp with yeoman webapp generator and have added font-awesome and bootstrap-css with bower install. Also I have run grunt bowerInstall to update the index.html file. Now when I launch…
guru
  • 4,002
  • 1
  • 28
  • 33
6
votes
1 answer

Bootstrap balancing bullet columns

I have an unordered list that I want balanced across the page. So I applied the Bootstrap column balancing technique as shown in this sample. The real items have rather longer text, of course.
6
votes
2 answers

How can I vertically center text over a responsive image?

How can I get the caption text on these images to move around when then the browser window is resized? My implementation is jicky and I need a way to keep the text from sliding around when the window is resized. Codepen
drewwyatt
  • 5,989
  • 15
  • 60
  • 106
6
votes
5 answers

horizontal divider between button group in Twitter Bootstrap 3

I am trying to put some text between a radio button group....I have tried both
and
tag. But it doesn't work... The text always sticks to the button group..This is my code
…
user2978381
  • 145
  • 1
  • 2
  • 14
6
votes
3 answers

bootstrap 3 button hover/focus state

Bootstrap 3's buttons' hover state looks exactly the same with its focus state. Is there a way to change this? I know it's just a cosmetic issue, but I want the hover state to go away when the mouse hovers away, yet still have another distinct…
kerafill
  • 274
  • 1
  • 4
  • 14
6
votes
1 answer

Bootstrap - Styling jumbotron elements

I'm trying to create simple mobile web site for calendar events. Here's the very basic version of it: http://orhancanceylan.com/test/v2/event.html The problem in here is; purple backgrounded areas are only cover the texts. But I want them to fit…
CanCeylan
  • 2,890
  • 8
  • 41
  • 51
6
votes
1 answer

Angular-Strap Radio Button won't update model

I want to have a radio-button group as you can see in my code. I use AngularJs, Angular-Strap and Bootstrap. The problem is, that my variables in the controller won't update when I click another button. The default value is set. If i remove the…
Dominik
  • 360
  • 1
  • 5
  • 16
6
votes
1 answer

Bootstrap 3 - drag element horizontal with vertical scrollbar, overflow-y: scroll

After my lack of success with my previous post, I followed a suggestion and used Bootstrap's Dashboard example as a base, unfortunately with no success. The aim is a page with a sidebar (col-md-3) that contains panels with all unsorted students (in…
Tobi
  • 351
  • 1
  • 2
  • 20
6
votes
1 answer

Bootstrap optgroup selection

I am using bootstrap select plugin with bootstrap 3.0.2, which fulfils most of my requirements. The only additional functionality I want is to be able to select an optgroup by clicking it. For example I would like to select Picnic (picture below)…
Antonis
  • 361
  • 2
  • 4
  • 11
6
votes
1 answer

Twitter Bootstrap 3 increasing navbar-header div width

Here's my code:
6
votes
1 answer

Create bootstrap carousel with captions instead of dots

Standard bootstrap carousel can contains dots to change slides (example on bootstrap page). However, I recently read Why Users Aren't Clicking Your Home Page Carousel which proposed using captions instead of dots like below: Is this option possible…
Piotr Stapp
  • 19,392
  • 11
  • 68
  • 116
6
votes
1 answer

Extending a bootstrap container background to the edge of the page

I'm designing a page built on Bootstrap 3, and I would like to try and recreate the following design: I have paragraphs that I have put into a container, so that they stay centred on the page as it is resized. However, I would like to have certain…
Kasaku
  • 2,192
  • 16
  • 26
6
votes
1 answer

What is the structure of the Bootstrap 3's navbar?

While the Bootstrap documentation is very good, I am unable to understand the navbar structure from just one example in the documentation. I am trying to understand what are the sub-components of the navbar and how to use them. As far as I can tell,…
Naresh
  • 23,937
  • 33
  • 132
  • 204
1 2 3
…
99 100