bootstrap-4

How to make Bootstrap cards the same height in card-columns?

by

You can either put the classes on the “row” or the “column”? Won’t be visible on the cards (border) if you use it on the row. https://getbootstrap.com/docs/4.6/utilities/flex/#align-items <div class=”container”> <div class=”row”> <div class=”col-lg-4 d-flex align-items-stretch”> <!–CARD HERE–> </div> <div class=”col-lg-4 d-flex align-items-stretch”> <!–CARD HERE–> </div> <div class=”col-lg-4 d-flex align-items-stretch”> <!–CARD HERE–> </div> </div> </div> UPDATE … Read more

Using media breakpoints in Bootstrap 4-alpha

by

Update: Bootstrap 5. v5 breakpoints reference Original answer – Bootstrap v4: Use breakpoint mixins like this: .something { padding: 5px; @include media-breakpoint-up(sm) { padding: 20px; } @include media-breakpoint-up(md) { padding: 40px; } } v4 breakpoints reference v4 alpha6 breakpoints reference Below full options and values. Breakpoint & up (toggle on value and above): @include media-breakpoint-up(xs) … Read more

Add spacing between vertically stacked columns in Bootstrap 4

by

Use the new Bootstrap 4 spacing utilities. For example mb-3 adds margin-bottom of 1rem. No extra CSS is needed. http://www.codeply.com/go/ECnbgvs9Ez <div class=”container”> <div class=”row”> <div class=”col-md-4 mb-3″> col 1 </div> <div class=”col-md-4 mb-3″> col 2 </div> <div class=”col-md-4 mb-3″> col 3 </div> <div class=”col-md-4 mb-3″> col 4 </div> <div class=”col-md-4 mb-3″> col 5 </div> <div … Read more

Bootstrap 4 Multiple fixed-top navbars

by

Yes, it’s possible but you have to position the 2nd one accordingly. The height of the Navbar is ~56px. .fixed-top-2 { margin-top: 56px; } body { padding-top: 105px; } <nav class=”navbar navbar-toggleable-sm bg-faded navbar-light fixed-top fixed-top-2″> <button class=”navbar-toggler navbar-toggler-right” type=”button” data-toggle=”collapse” data-target=”#navbar1″> <span class=”navbar-toggler-icon”></span> </button> <a href=”https://stackoverflow.com/” class=”navbar-brand”>One</a> <div class=”navbar-collapse collapse” id=”navbar1″> <ul class=”navbar-nav”> .. … Read more

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

by

If you want to change order on md and larger sizes you can use order-md-, this is provided by bootstrap. It looks like, if you want to change order only on md size you will have to define normal order on one larger size Fiddle <link href=”https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css” rel=”stylesheet” /> <div class=”row”> <div class=”col-md-12 order-md-2″>A</div> <div … Read more

Bootstrap 4 Navbar align logo center and toggle icon on the left

by

The Bootstrap 4 Navbar uses flexbox, so it’s possible to achieve this without extra CSS. You will need an empty spacer div to keep the logo centered. <nav class=”navbar navbar-expand-lg navbar-light bg-light”> <div class=”collapse navbar-collapse w-100 order-1 order-lg-0″ id=”navbarNav”> <ul class=”navbar-nav”> <li class=”nav-item active”> <a class=”nav-link” href=”#”>Home</a> </li> <li class=”nav-item”> <a class=”nav-link” href=”#”>Features</a> </li> <li … Read more

Why is the Bootstrap Navbar always collapsed? [duplicate]

by

Bootstrap 5 (update 2021) As stated in the docs, “Navbars require a wrapping .navbar with .navbar-expand{-sm|-md|-lg|-xl|-xxl} for responsive collapsing” Therefore, Bootstrap 5 Navbar is the same as the Bootstrap 4 Navbar and will be vertically “collapse” if you don’t include navbar-expand-* Bootstrap 4 (original answer) In Bootstrap 4, the navbar-expand* class is needed if you … Read more

Bootstrap 4 custom build generator / download [duplicate]

by

As discussed here on Stack Overflow, there will not be a customizer for Bootstrap 4. This means that you’ll have to build the Sass files manually. This can be achieved with the sass npm package, for example. I’ve also created a tool that handles compiling the Sass and vendor prefixing, which I’ve been using to … Read more