Stack Overflow
Stack Overflow

Questions tagged [bootstrap-4]

Bootstrap 4 is the fourth major version of the popular front-end component library. The Bootstrap framework aids in the creation of responsive, mobile-first websites and web apps.

Bootstrap 4 is the fourth major version of the popular front-end component library and open-source toolkit for developing with HTML, CSS, and JS. The Bootstrap framework aids in the creation of responsive, mobile-first websites and web apps. Bootstrap 4 embraces flexbox and Sass technologies. Bootstrap is open-sourced on GitHub.

The latest release of bootstrap-4 is 4.6.1.

There are newer versions at getbootstrap.com

Stack Snippet Starter Pack

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>

Helpful Resources

28801 questions
70
votes
7 answers

How can I reverse the order of columns in Bootstrap 4?

I have this simple scenario:
A
B
basically if md A B I would like it, if md B A I have tried many variants found on…
Patrioticcow
  • 26,422
  • 75
  • 217
  • 337
70
votes
11 answers

Remove gutter space for a specific div only

The default Bootstrap grid system utilizes 12 columns with each span having 30px gutter as below. Gutters are the white space between columns. Gutter width seems to be between 20px - 30px. Let's assume it's 30px here. I want to remove the gutter…
Techie
  • 44,706
  • 42
  • 157
  • 243
69
votes
4 answers

Bootstrap4 adding scrollbar to div

I am using stacked pills inside a div. The problem is, sometimes the div contains a lot of pills. How can I add a scrollbar for it?
68
votes
6 answers

Bootstrap 4 - Responsive cards in card-columns

I'm playing with Bootstrap 4 and I can't find a solution to add responsiveness to cards while in a div with class="card-columns" (this class applies a Masonry-like effect to the cards inside the div having this class). In Bootstrap 3 it was easy to…
davideghz
  • 3,596
  • 5
  • 26
  • 50
63
votes
10 answers

Center an element in Bootstrap Navbar

No matter what I try, I can't center something in Bootstrap navbar, any solutions for it? I've tried adding a div, using margin:0 auto; or margin-right:auto; margin-left:auto;, used center-block class. Nothing works, why is so hard to achieve…
LuTz
  • 1,493
  • 1
  • 15
  • 25
62
votes
8 answers

How to use Popper.js with Bootstrap 4 beta

I'm old school, so I downloaded the source code to 1.12.0 and then did the following: But I'm getting: Uncaught SyntaxError:…
Phillip Senn
  • 46,771
  • 90
  • 257
  • 373
62
votes
6 answers

Angular 4 Bootstrap dropdown require Popper.js

I have a fresh created Angular 4 CLI app. After running this: npm install bootstrap@4.0.0-beta jquery popper.js --save and editing .angular-cli.json like this: "styles": [ "styles.css", …
mikebrsv
  • 1,890
  • 2
  • 24
  • 31
62
votes
2 answers

Bootstrap 3 & Boostrap 4 & Bootstrap 5 - input-xs (smaller than sm)

I wasted a lot of time searching a way to make my own xs size (smaller than the small) for input and input group, so here's the code! Peter Butkovic upload the bug/request to the bootstrap github: https://github.com/twbs/bootstrap/issues/15107 with…
Leandro Bardelli
  • 10,561
  • 15
  • 79
  • 116
61
votes
8 answers

Bootstrap 4: Uncaught ReferenceError: Popper is not defined

I've installed Bootstrap 4 using Node and Gulp and when running the application I get the following error Uncaught ReferenceError: Popper is not defined I've only been using the Bootstrap grid system so far and I haven't used anything that would…
Web Develop Wolf
  • 5,996
  • 12
  • 52
  • 101
61
votes
4 answers

Using media breakpoints in Bootstrap 4-alpha

In Bootstrap 3 I use this: .something { padding: 5px; @media screen and (min-width: $screen-sm-min) { padding: 20px; } @media screen and (min-width: $screen-md-min) { padding: 40px; } } How can I do the same…
Ivan Topić
  • 3,064
  • 6
  • 34
  • 47
61
votes
7 answers

Centering brand logo in Bootstrap Navbar

I am trying to implement a Bootstrap 3 navbar so that the brand logo to always remain in the middle. This is the code:
AstroSharp
  • 1,872
  • 2
  • 22
  • 31
60
votes
6 answers

Bootstrap 4 Sticky Footer Not Sticking

Not really sure why the sticky footer isn't working in Bootstrap 4. I have a TYPO3 website which I am a beginner at. The sticky footer is not sticking at the bottom of the page. Here is a copy of the page source as it has been rendered. I…
Daryn
  • 1,551
  • 1
  • 15
  • 21
60
votes
8 answers

Search input with an icon Bootstrap

No clue how I can do this, since BS 4 doesn't support glyphicons. Do I set it up as a background or do I apply different positioning to a font-awesome icon? This is my code so far:
Retros
  • 3,511
  • 10
  • 40
  • 60
59
votes
9 answers

Align button to the right

I know this must be really simple but I'm trying to set a button to the right of the window using only bootstrap 4 classes. It must be in the same row as the text.
jecabeda
  • 706
  • 1
  • 6
  • 11
58
votes
6 answers

How to properly introduce a light/dark mode in Bootstrap?

I use Bootstrap 4.5 and use bg-dark in my HTML template. I would like to implement a "light/dark" switch. So, Bootstrap has a bg-light css class, but I am not sure what the current approach how to use it. Let me clarify my confusion: Am I supposed…
Daniel Stephens
  • 2,371
  • 8
  • 34
  • 86
1 2 3
…
99 100