Stack Overflow
Stack Overflow

Questions tagged [twitter-bootstrap]

Bootstrap is a frontend framework designed to kick-start development of Web apps and sites. For questions related to a version of Bootstrap also use the specific version's tag from "twitter-bootstrap-2", "twitter-bootstrap-3", "bootstrap-4" and "bootstrap-5" tags.

Bootstrap is a frontend framework designed to kick start the frontend development of web apps and sites. Among other things, it includes base CSS and HTML for typography, icons, forms, buttons, tables, layout grids, and navigation, along with custom-built and support for responsive layouts.

There are four major versions of the framework:

Current version: Bootstrap v5.2.2

It is tested and supported in the major modern browsers, such as the latest versions of Safari, Google Chrome, Firefox, Microsoft Edge.

Starting with version 2.0, the default download package contains cumulative JavaScript and CSS files. If you're looking for the uncompiled LESS source files, documentation and example templates, you can download them from the project's GitHub page. Less was replaced with Sass beginning from version 4.0.

Prior to v3.1.0, it was licensed under the Apache 2 License, but is now under the MIT License due to this issue.

See also

Links

Tools to test bootstrap code

Bootstrap Migration Resources and Tools

The Bootstrap Playground

Yeoman Generator

Meteor Package

meteor add twbs:bootstrap

NPM package

npm i bootstrap

NuGet Package

Install-Package Twitter.Bootstrap

v5.2.2 Stack Snippet Starter Pack

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>

v4.2.1 Stack Snippet Starter Pack

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
102997 questions
588
votes
24 answers

Disable click outside of bootstrap modal area to close modal

I am making a bootstrap website, with a couple of Bootstrap 'Modals'. I'm trying to customize some of the default features. Problem is this; You can close the modal by clicking on the background. Is there anyway to disable this feature? On specifc…
Egghead
  • 6,837
  • 5
  • 20
  • 38
586
votes
24 answers

How do you get centered content using Twitter Bootstrap?

I'm trying to follow a very basic example. Using the starter page and the grid system, I was hoping the following:

Bootstrap starter template

Example text.

…
Hoa
  • 19,858
  • 28
  • 78
  • 107
581
votes
16 answers

Prevent Bootstrap Modal from disappearing when clicking outside or pressing escape?

I'm using the Twitter Bootstrap modal as a wizard window, and would like to prevent the user from closing it when clicking outside of the modal or when pressing escape. Instead, I want it to be closed when the user presses the finish button. How…
Ehsan Zargar Ershadi
  • 24,115
  • 17
  • 65
  • 95
578
votes
28 answers

Disallow Twitter Bootstrap modal window from closing

I am creating a modal window using Twitter Bootstrap. The default behavior is if you click outside the modal area, the modal will automatically close. I would like to disable that -- i.e. not close the modal window when clicking outside the…
user1296175
  • 5,831
  • 3
  • 15
  • 10
553
votes
8 answers

What is the difference between Bootstrap .container and .container-fluid classes?

Just downloaded 3.1 and found in the docs... Turn any fixed-width grid layout into a full-width layout by changing your outermost .container to .container-fluid. Looking in bootstrap.css, it appears that .container-fluid is identical to…
FatFingers
  • 6,847
  • 5
  • 23
  • 20
542
votes
30 answers

Close Bootstrap Modal

I have a bootstrap modal dialog box that I want to show initially, then when the user clicks on the page, it disappears. I have the following: $(function () { $('#modal').modal(toggle) });
526
votes
12 answers

What is Bootstrap?

There are a lot of questions here related to Bootstrap. I see a lot of people using it. So I tried to research it, and I found the official Bootstrap site, but there was only a download section and a few words after that. Nothing that explains what…
Панайот Толев
  • 6,597
  • 5
  • 19
  • 28
512
votes
21 answers

Twitter Bootstrap - add top space between rows

How to add margin top to class="row" elements using twitter bootstrap framework?
itsme
  • 48,972
  • 96
  • 224
  • 345
504
votes
6 answers

Meaning of numbers in "col-md-4"," col-xs-1", "col-lg-2" in Bootstrap

I am confused with the grid system in the new Bootstrap, particularly these classes: col-lg-* col-md-* col-xs-* (where * represents some number). Can anyone please explain the following: How that number is aligning the grids? How to use these…
Bravo
  • 8,589
  • 14
  • 48
  • 85
499
votes
21 answers

How can I get my Twitter Bootstrap buttons to right align?

I have a simple demo here:
  • One
  • Two
I have an unordered list and for each list item I wish to have text on the left and…
deltanovember
  • 42,611
  • 64
  • 162
  • 244
483
votes
20 answers

Vertical Align Center in Bootstrap 4

I am trying to center my Container in the middle of the page using Bootstrap 4. I have been unsuccessful thus far. Any help would be appreciated. I have built it at Codepen.io so you guys can play with it and let me know what works as I am about out…
canaan seaton
  • 6,688
  • 4
  • 17
  • 25
476
votes
24 answers

Bootstrap align navbar items to the right

How do I align a navbar item to right? I want to have the login and register to the right. But everything I try does not seem to work. This is what I have tried so far:
around the
440
votes
30 answers

Table fixed header and scrollable body

I am trying to make a table with fixed header and a scrollable content using the bootstrap 3 table. Unfortunately the solutions I have found does not work with bootstrap or mess up the style. Here there is a simple bootstrap table, but for some…
giulio
  • 5,865
  • 3
  • 22
  • 20
440
votes
19 answers

Responsive image align center bootstrap 3

I do a catalog using Bootstrap 3. When displayed on tablets, the product images look ugly because of their small size (500x500) and a width of 767 pixels in the browser. I want to put the image in the center of the screen, but for some reason I can…
Konstantin Rusanov
  • 6,414
  • 11
  • 42
  • 55
416
votes
36 answers

Select2 doesn't work when embedded in a bootstrap modal

When I use a select2 (input) in bootstrap modal, I can't type anything into it. It's like disabled? Outside the modal select2 works fine. Working example: http://jsfiddle.net/byJy8/1/ code:
1
2
3
…
99 100