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
45
votes
2 answers

How to build a 2 Column (Fixed - Fluid) Layout with Twitter Bootstrap?

Is it possible to create a 2 Column Layout (Fixed - Fluid) Layout ( http://www.dynamicdrive.com/style/layouts/item/css-liquid-layout-21-fixed-fluid/) with Twitter Bootstrap (http://twitter.github.com/bootstrap/)? Do you have any solutions?
mbecker
  • 1,663
  • 3
  • 19
  • 24
45
votes
9 answers

Webpack Installing Bootstrap - missing popper.js.map

I followed the instructions in https://getbootstrap.com/docs/4.0/getting-started/webpack/ and I also installed jquery and popper.js with npm. Still when I use the output bundle.js, the browser keeps on sending GET requests for popper.js.map and I…
yoni.str
  • 451
  • 1
  • 4
  • 3
45
votes
1 answer

How to make the row stretch remaining height

I'm trying to make the container-fluid and 2nd row to stretch to the remaining height but I couldn't find a way to do it. I have tried setting the align-items/align-self to stretch but didn't work either. Below is my code structure:
Reddy
  • 1,403
  • 3
  • 14
  • 27
45
votes
3 answers

How to use flex-grow?

In the doc and in the issues of Bootstrap v4 (here), I can't see any plan on supporting flex-grow, something with a syntax like this for example:
I use all the space left
…
Eric Burel
  • 3,790
  • 2
  • 35
  • 56
45
votes
3 answers

Bootstrap table no new line

Mijn biedingen

…
Stijn Hoste
  • 836
  • 1
  • 7
  • 17
43
votes
21 answers

Bootstrap not working properly in Angular 6

I started learning Angular and I'm following a tutorial. I tried putting the code as in the tutorial for the navigation-bar:
43
votes
12 answers

Bootstrap 4 float-right inside .row

I'm new to Bootstrap 4 and can't seem to get float-right on a col div working within a row. Here's my code:

Five grid…

Zazz Blammymatazz
  • 433
  • 1
  • 4
  • 5
43
votes
8 answers

Changing Dropdown Icon on Bootstrap

On Bootstrap 3 this was pretty easy, you just had to change span and add whatever icon you wanted instead. But that doesn't seem the case with Bootstrap 4. Or maybe I'm missing something? Anyway, here's the basic code for it:
…
Retros
  • 3,511
  • 10
  • 40
  • 60
43
votes
3 answers

Bootstrap 4 navbar with 2 rows

I have created a navbar with Bootstrap 4 alpha 6 that has a large brand/icon on the left, and 2 navbar-nav's with links to the right of the icon. One nav has links, and the other nav has icons. It's working exactly as I want except for one…
Tom Michew
  • 778
  • 1
  • 7
  • 10
42
votes
4 answers

Uncaught TypeError: Cannot convert object to primitive value(zone-evergreen.js:171)

In Angular 9 (using Bootstrap 4 and Jquery 3.5.1). when clicking on bootstrap collapse button, I am getting an error on my browser console instead of a dropdown menu. I really don't know where exactly the error came from. Can't convert object to…
Rohit Kumar
  • 549
  • 1
  • 4
  • 6
42
votes
5 answers

Bootstrap 4 Loading Spinner in button

I'm trying to implement the bootstrap 4 loading spinner in button as in Bootstrap Spinners. Below is what I'm doing in code my.html
user3206440
  • 4,749
  • 15
  • 75
  • 132
42
votes
4 answers

Bootstrap 4 remove caret from dropdown button

In Bootstrap 3 you could easily remove the "caret" (small arrow that points down) from a dropdown button, I can't see how to do it in Bootstrap 4 though because they no longer use .
random_user_0891
  • 1,863
  • 3
  • 15
  • 39
41
votes
1 answer

Bootstrap 4 - "Complete JavaScript" vs "Complete JavaScript Bundle"

What am I missing? The examples use min.js. The bundle.min.js has more code, but I can't find a description of that extra…
Michael Cole
  • 15,473
  • 7
  • 79
  • 96
41
votes
2 answers

How do I use for loops with react?

I am very new to react and all I really want is a simple for loop that creates menuitem elements for each user in my array with the title of it being their firstname. So this is how I would write it, but I have no clue of how to do this in react. I…
novafluff
  • 891
  • 1
  • 12
  • 30
41
votes
5 answers

How can I add space between Bootstrap card elements?

I'm trying to add space between the two card decks. I'm using bootstrap 4 alpha 6. I've no idea why using mt-20 on the second card deck wont do it. I've tried wrapping them in rows and doing it, but doesn't do it either:
InitLipton
  • 2,395
  • 5
  • 30
  • 47
1 2 3
…
99 100
nummerplaat Bod Status Datum bod