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
96
votes
7 answers

btn-xs no longer a valid option in bootstrap 4?

I just migrated to bootstrap 4 and my xs buttons no longer seem to be extra small! Looking at the docs for buttons in bootstrap 4 I don't see the option for extra small buttons? Can anyone confirm this for me? Thanks!
Dragan
  • 3,713
  • 12
  • 42
  • 59
94
votes
6 answers

Order columns through Bootstrap4

I have 3 columns which I want to order in different ways on desktop and mobile. Currently, my grid looks like this:
1
2
Cray
  • 5,307
  • 11
  • 70
  • 166
91
votes
7 answers

How can I change cursor for disabled

How can I use cursor: not-allowed on button or a? I tried the following: .not-allowed { pointer-events: auto! important; cursor: not-allowed! important; } My button looks like this:
PaT
  • 911
  • 1
  • 6
  • 3
88
votes
8 answers

Bootstrap 4: Multilevel Dropdown Inside Navigation

What's the easiest way to make a multilevel dropdown in Bootstrap 4? All the examples I managed to find on SO were either too messy or not included in nav. I've tried just placing a dropdown inside a dropdown, but that doesn't seem like it's…
Retros
  • 3,511
  • 10
  • 40
  • 60
87
votes
9 answers

How to center cards in bootstrap 4?

I am using bootstrap 4 alpha 3. I want to center the card horizontally in the middle across the page. Preview / link: http://codepen.io/vaibhavsingh97/full/VjRAXW I have tried all the different options listed on the bootstrap 4 example page for…
Vaibhav Singh
  • 1,554
  • 3
  • 13
  • 27
85
votes
1 answer

Bootstrap 4 multiselect dropdown

I read on many forums that the problem of select and multiselect has been resolved after the beta version of bootstrap 4. Unfortunately I am unable to display the multiselect as in (bootstrap 3) in (bootstrap 4). Bootstrap 3…
Kees de Jager
  • 582
  • 1
  • 7
  • 25
85
votes
4 answers

How can I center an image in Bootstrap?

I am struggling to center an image using only Bootstrap's CSS-classes. I already tried several things. One was adding Bootstrap CSS-class mx-auto to the img element, but it does nothing. Help is appreciated.
Daniel
  • 3,092
  • 3
  • 32
  • 49
81
votes
4 answers

Bootstrap 4 img-circle class doesn't seem to exist

I'm writing a website in HTML5 and Bootstrap 4 and I'm trying to turn a square image into a circle. In Bootstrap 3 this was easily do-able with .img-circle, but now I can't seem to get it to work and I can't find any answers online. Has Bootstrap…
Cal Courtney
  • 1,279
  • 2
  • 10
  • 22
76
votes
14 answers

Modal width (increase)

I want a modal to be 80% or so of a screen width. modal-lg isn't large enough. This: .modal .modal-dialog { width: 80%; } Doesn't work with Bootstrap 4.
Oleg Antonyan
  • 2,943
  • 3
  • 28
  • 44
75
votes
11 answers

How can I align text center on small screens with Bootstrap?

I have html as:-
74
votes
11 answers

Bootstrap 4 card-deck with number of columns based on viewport

I'm trying to implement the card-deck feature in bootstrap 4 to make all of my cards the same height. The examples that bootstrap provides show 4 nice cards, but it's 4 cards on the row, no matter the viewport. See the codeply here. This doesn't…
ganders
  • 7,285
  • 17
  • 66
  • 114
72
votes
4 answers

Bootstrap vs Material UI for React?

I have been using both in my projects and sometimes I find the need to use a Material UI component within a bootstrap component and the UI displays as I would expect. I have been advised though not to use this approach. Is there any reason why since…
KT-mongo
  • 2,044
  • 4
  • 18
  • 28
72
votes
5 answers

How to use Bootstrap 4 with SASS in Angular

I'd like to use Bootstrap 4 with SASS in an Angular(4+) project created with Angular CLI. In particular I need to: use SASS instead of CSS both as global style and Component-style compile Bootstrap SASS source together with my custom *.scss…
Francesco Borzi
  • 56,083
  • 47
  • 179
  • 252
72
votes
5 answers

Removing padding gutter from grid columns in Bootstrap 4 / Bootstrap 5

How do you create a gutterless grid in bootstrap 4? Is there an official API for removing the gutter or is it manual?
Blair Anderson
  • 19,463
  • 8
  • 77
  • 114
70
votes
4 answers

WARNING in Exceeded maximum budget for SCSS FILE IN ANGULAR

IMPORTING BOOTSTRAP VARIABLE in SCSS file getting error WARNING in Exceeded maximum budget for B:/Angular-8/crats-shop/src/app/shared/components/sort/sort.component.scss. Budget 6 kB was not met by 136 kB with a total of 142 kB
aishvarya
  • 721
  • 1
  • 5
  • 7
1 2 3
…
99 100