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
57
votes
1 answer

What is bd-highlight in Bootstrap 4.1?

On the bootstrap 4.1 documentation page for flexbox, there are several examples where the class bd-highlight is used. For example:
I'm a flexbox container!
What is the use of bd-highlight? There doesn't…
John
  • 1,645
  • 2
  • 17
  • 29
57
votes
5 answers

How to create a fixed sidebar layout with Bootstrap 4?

I'm trying to create a layout like the screenshot using Bootstrap 4 but I'm having some problems with making the sidebar fixed and achieving this layout at the same time. Going with a basic example:
…
cinnaroll45
  • 2,661
  • 7
  • 24
  • 41
56
votes
2 answers

How to align content bottom on Bootstrap 4 col

I have the following code for a footer:
© BusinessName 2017.

Blog
…
AAndrei
  • 699
  • 1
  • 5
  • 7
56
votes
7 answers

Bootstrap change navbar color

In Bootstrap 4, how do I go about changing the background color of a navbar? The code from twbscolor doesn't work. I want to make the background color a different color and the font color white.
55
votes
7 answers

How can I make Bootstrap 4 columns have a height of 100%?

how can I make a column take up 100% height of the browser w bootstrap 4? See the following: https://codepen.io/johnpickly/pen/dRqxjV Note the yellow div, I need this div/column to take up a height of 100%... Is there way to make this happen without…
AnnaSm
  • 2,190
  • 6
  • 22
  • 32
54
votes
3 answers

Bootstrap 4 row fill remaining height

I'm struggling to make the a row stretch to fill the rest of the available height. I tried adding h-100 to the row class but that causes a white space at the bottom of the screen. There must be a way to do it but I'm totally stumped.. Here is my…
Egor
  • 764
  • 2
  • 6
  • 11
54
votes
7 answers

How to use Bootstrap 4 flexbox to fill available content?

I have an angular app that uses bootstrap 4. I have a nav bar that sticks to the top, and I want to add content that fills the remaining space in the browser. Aside from the navbar at the top, I have another div that itself contains header and…
Chris Farmer
  • 24,974
  • 34
  • 121
  • 164
53
votes
4 answers

How to increase font-size in Bootstrap 4?

In Bootstrap 4, font-size defaults to using em or rem for fonts. How can I increase the font-size for all viewport sizes? Because every element looks tiny.
Mukul Kant
  • 7,074
  • 5
  • 38
  • 53
53
votes
8 answers

Increase bootstrap dropdown menu width

wondering if anyone has any tips on how to increase the dropdown width? I have a row containing two columns with a a bit of javascript that slides the dropdown up and down when selected. The problem I am having is that I can't seem to figure how to…
ChoclateLove
  • 672
  • 1
  • 6
  • 11
51
votes
14 answers

How to remove outline in bootstrap 4

I want to remove textbox outline in bootstrap 4 but its not working. How can I remove this line? CSS #content #main-content input[type=text]{ border: 0; border: 1px solid #ccc; height: 40px; padding-left: 10px; outline: 0; …
Sandeep
  • 973
  • 2
  • 13
  • 22
51
votes
14 answers

Bootstrap 4 Dropdown Menu not working?

I copied the official Bootstrap 4 example for dropdown menus but it is not working, that is nothing is dropped down.
  • komodoedit
    • 699
    • 2
    • 6
    • 10
    • 50
    votes
    12 answers

    How to import popper.js?

    It seems to be a lame question, but I cannot figure it out. How to import popper.js which comes together with Bootstrap 4 beta? I use Bower, and I've installed Bootstrap 4 beta. Now in the bower_components folder, there is the popper.js directory,…
    Qrzysio
    • 1,147
    • 3
    • 12
    • 25
    48
    votes
    3 answers

    Customize Bootstrap 4's grid-system Breakpoints

    I have an application where the design needs a 1280 breakpoint from desktop to tablet, or, xl to lg respectively. However, Bootstrap itself has the xl breakpoint at 1200. I need to change that xl breakpoint globally for bootstrap. Do I have to…
    smb
    • 539
    • 2
    • 13
    • 33
    47
    votes
    3 answers

    Align the form to the center in Bootstrap 4

    I am trying to align the form to the center and keep it responsive. I have tried several ways but no success. I am trying to center all the text and the form. I am using Bootstrap v4. I am not sure if that helps. HTML:
    …
    eyedfox
    • 714
    • 1
    • 7
    • 14
    46
    votes
    1 answer

    Comparison between Bootstrap-Vue and Bootstrap 4

    I have used Vuejs for developing my frontend and now I have to style it. I came across Bootstrap-vue . Which will be better to use Bootstrap 4 or Bootstrap-vue. Are they same or is there is an advantage to use Bootstap-vue.
    handsomer223
    • 885
    • 4
    • 12
    • 16
    1 2 3
    …
    99 100