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
348
votes
27 answers

How to hide Bootstrap modal with javascript?

I've read the posts here, the Bootstrap site, and Googled like mad - but can't find what I'm sure is an easy answer... I have a Bootstrap modal that I open from a link_to helper like this: <%= link_to "New Contact", new_contact_path, {remote: true,…
jvillian
  • 19,953
  • 5
  • 31
  • 44
347
votes
9 answers

Hiding elements in responsive layout?

Looking through bootstrap it looks like they support collapsing the menubar items for smaller screens. Is there something similar for other items on the page? For example, I have a along with nav-pills floated right. On a small screen this causes…
Kaitlyn2004
  • 3,879
  • 4
  • 16
  • 16
346
votes
11 answers

Bootstrap dropdown sub menu missing

Bootstrap 3 is still at RC, but I was just trying to implement it. I couldn't figure out how to put a sub menu class. Even there is no class in css and even the new docs don't say anything about it It was there in 2.x with class name as…
DevC
  • 7,055
  • 9
  • 39
  • 58
341
votes
35 answers

Flushing footer to bottom of the page, twitter bootstrap

I am generally familiar with the technique of flushing a footer using css. But I am having some trouble getting this approach to work for Twitter bootstrap, most likely due to the fact that Twitter bootstrap is responsive in nature. Using Twitter…
Calvin Cheng
  • 35,640
  • 39
  • 116
  • 167
336
votes
14 answers

Making button go full-width?

I want a button to take up the full width of the column, but having difficulties...
How do I make the button as…
user1438003
  • 6,603
  • 8
  • 30
  • 36
335
votes
8 answers

How do I change Bootstrap 3 column order on mobile layout?

I'm making a responsive layout with a top fixed navbar. Underneath I have two columns, one for a sidebar (3), and one for content (9). Which on desktop looks like this navbar [3][9] When I resize to mobile the navbar is compressed and hidden,…
user3000310
  • 3,355
  • 2
  • 12
  • 5
330
votes
12 answers

Bootstrap: align input with button

Why don't buttons and inputs align well in Bootstrap? I tried something simple like: The button is about 5px lower than the input in chrome/firefox.
pguardiario
  • 53,827
  • 19
  • 119
  • 159
327
votes
20 answers

top nav bar blocking top content of the page

I have this Twitter Bootstrap code
GeekedOut
  • 16,905
  • 37
  • 107
  • 185
316
votes
15 answers

HTML inside Twitter Bootstrap popover

I am trying to display HTML inside a bootstrap popover, but somehow it's not working. I found some answers here but it won't work for me. Please let me know if I'm doing something wrong.