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
25
votes
5 answers

Would you use Twitter Bootstrap for an intranet/business app?

We are about to embark on the development of several complex business/intranet applications (lots of data, many functions, admin panels, doesn't need to be simplified for public use). With the advent of people doing real work on their phone browsers…
JohnZastrow
  • 449
  • 1
  • 5
  • 12
24
votes
3 answers

Is it possible to use CSS variables in Twitter-bootstrap 4 $theme-colors array?

In bootstrap 4 you can define and/or override default colors using the following array: (as documented here) $theme-colors: ( "primary": #001122, /*override*/ "color-1": red, /*new color*/ "color-2": black, /*new color*/ "color-3":…
Dirk Jan
  • 2,355
  • 3
  • 20
  • 38
24
votes
5 answers

NPM WARN: bootstrap@4.0.0 requires a peer of popper.js

I have follow dependency part in package.json: "dependencies": { "bootstrap": "*", "bootstrap-datepicker": "^1.7.1", "bower": "^1.8.2", "chosen-js": "^1.8.2", "datatables.net-dt": "^1.10.16", "jQuery-QueryBuilder":…
Olga Pshenichnikova
  • 1,509
  • 4
  • 22
  • 47
24
votes
2 answers

Create a responsive navbar sidebar "drawer" in Bootstrap?

Trying to achieve something like this : https://www.muicss.com/examples/v1/example-layouts/responsive-side-menu/index.html I've seen some examples online using other versions of bootstrap, but they all change the css too much, which makes it harder…
Mojimi
  • 2,561
  • 9
  • 52
  • 116
24
votes
6 answers

How can I remove default button class of a dataTables button?

I am using Data table with Button. I want to show Success button rather default. I tried this Code buttons: [ { extend: "excel", className: "btn-sm btn-success", titleAttr: 'Export in Excel', text: 'Excel' }] This code is working but this is adding…
ansh
  • 573
  • 3
  • 9
  • 26
24
votes
8 answers

Make flex child equal height of parent inside of grid column

I'm trying to build a pricing table where each column contains a card. I want all cards to stretch to the height of their parent (.col) elements. Note: I'm using Bootstrap 4, and trying to achieve this with the existing grid system (for the sake of…
JCraine
  • 1,159
  • 2
  • 20
  • 38
24
votes
6 answers

How to change the border color of bootstrap table using inline css

Although inline css is not recommended but I just want to test it in one special case and hence want to override the default border color of a bootstrap table to white. But the following does not work. It still displays the default border color of a…
nam
  • 21,967
  • 37
  • 158
  • 332
24
votes
5 answers

how to setup bootstrap 4 scss with react webpack

i'm starting a new project using reactjs ES6 and webpack using react-static-boilerplate starter question is how can i import bootstrap4 into the build proccess ? i dont want to use the bootstrap.css generated file, instead i want webpack to build it…
Zalaboza
  • 8,899
  • 16
  • 77
  • 142
24
votes
5 answers

Twitter bootstrap select readonly still able to change options

I have a bootstrap select with readonly="true" but I can still change the selected option. I need the disabled="true" behavior, but when I use this the select is not submitted. I need a combination of the 2, the selected option can not be changed…
Ruben
  • 8,956
  • 14
  • 63
  • 102
24
votes
3 answers

How to change the date range picker's date format?

I am using this bootstrap date range picker. I want to change date format date to dd/MMM/yyyy: