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
411
votes
8 answers

Left align and right align within div in Bootstrap

What are some of the common ways to left align some text and right align some other text within a div container in bootstrap? e.g. Total cost $42 Above total cost should be left aligned text and $42 is right aligned text
user462455
  • 12,838
  • 18
  • 65
  • 96
410
votes
47 answers

Five equal columns in twitter bootstrap

I want to have 5 equal columns on a page I am building and I can't seem to understand how the 5 column grid is being used here: http://web.archive.org/web/20120416024539/http://domain7.com/mobile/tools/bootstrap/responsive Is the five column grid…
Gandalf
  • 1
  • 29
  • 94
  • 165
405
votes
5 answers

Fluid or fixed grid system, in responsive design, based on Twitter Bootstrap

I'm getting confused about the various options in the twitter bootstrap grid, and how they go together. To begin with, you can have an ordinary fixed container, or a container-fluid. Then either one can include either an ordinary row, or a fluid…
jrochkind
  • 22,799
  • 12
  • 59
  • 74
401
votes
10 answers

How to vertically center a container in Bootstrap?

I'm looking for a way to vertically center the container div inside the jumbotron and to set it in the middle of the page. The .jumbotron has to be adapted to the full height and width of the screen. The .container div has a width of 1025px and…
user1012181
  • 8,648
  • 10
  • 64
  • 106
392
votes
29 answers

Bootstrap 3 Navbar with Logo

I want to use the Bootstrap 3 default navbar with an image logo instead of text branding. What's the proper way of doing this without causing any issues with different screen sizes? I assume this a common requirement, but I haven't yet seen a good…
stepanian
  • 11,373
  • 8
  • 43
  • 63
390
votes
17 answers

Twitter Bootstrap 3: how to use media queries?

I'm using Bootstrap 3 to build a responsive layout where I want to adjust a few font sizes according to the screen size. How can I use media queries to make this kind of logic?
Rui
  • 5,900
  • 10
  • 38
  • 56
385
votes
26 answers

Twitter Bootstrap Tabs: Go to Specific Tab on Page Reload or Hyperlink

I'm developing a web page in which I'm using Twitter's Bootstrap Framework and their Bootstrap Tabs JS. It works great except for a few minor issues, one of which is I do not know how go directly to a specific tab from an external link. For…
mraliks
  • 4,047
  • 3
  • 15
  • 10
383
votes
26 answers

Remove padding from columns in Bootstrap 3

Problem: Remove padding/margin to the right and left of col-md-* in Bootstrap 3. HTML code:

OntoExplorer.

…
kexxcream
  • 5,873
  • 8
  • 43
  • 62
376
votes
19 answers

twitter bootstrap navbar fixed top overlapping site

I am using bootstrap on my site and am having issues with the navbar fixed top. When I am just using the regular navbar, everything is fine. However, when i try to switch it to navbar fixed top, all the other content on the site shifts up like the…
Matthew Berman
  • 8,481
  • 10
  • 49
  • 98
371
votes
16 answers

What is the easiest way to disable/enable buttons and links (jQuery + Bootstrap)

Sometimes I use anchors styled as buttons and sometimes I just use buttons. I want to disable specific clicky-things so that: They look disabled They stop being clicked How can I do this?
biofractal
  • 18,963
  • 12
  • 70
  • 116
368
votes
12 answers

to call onChange event after pressing Enter key

I am new to Bootstrap and stuck with this problem. I have an input field and as soon as I enter just one digit, the function from onChange is called, but I want it to be called when I push 'Enter when the whole number has been entered. The same…
Bill Lumbert
  • 4,633
  • 3
  • 20
  • 30
362
votes
16 answers

Add Bootstrap Glyphicon to Input Box

How can I add a glyphicon to a text type input box? For example I want to have 'icon-user' in a username input, something like this:
doovers
  • 8,545
  • 10
  • 42
  • 70
354
votes
13 answers

Missing visible-** and hidden-** in Bootstrap

In Bootstrap v3 I often use the hidden-** classes combined with clearfix to control multi column layouts at different screen widths. For example, I could combine multiple hidden-** in one DIV to make my multi columns appear correctly at different…
johna
  • 10,540
  • 14
  • 47
  • 72
352
votes
46 answers

How to remove focus around buttons on click

My buttons all have a highlight around them after I click them. This is in Chrome. I am using Bootstrap with a theme, but I'm pretty sure that's not…
Sean Clark Hess
  • 15,859
  • 12
  • 52
  • 100
349
votes
12 answers

How to include scripts located inside the node_modules folder?

I have a question concerning best practice for including node_modules into a HTML website. Imagine I have Bootstrap inside my node_modules folder. Now for the production version of the website, how would I include the Bootstrap script and CSS files…
Chris
  • 6,093
  • 11
  • 42
  • 55
1 2
3
…
99 100