Update 2018… card has replaced the well. Bootstrap 4 <div class=”card card-body bg-light”> Well </div> or, as two DIVs… <div class=”card bg-light”> <div class=”card-body”> … </div> </div> (Note: in Bootstrap 4 Alpha, these were known as card-block instead of card-body and bg-faded instead of bg-light) http://codeply.com/go/rW2d0qxx08
Bootstrap has this built in already: See Menu Alignment. Just add the dropdown-menu-right class to the dropdown-menu div. <div class=”dropdown-menu dropdown-menu-right”> Working Example: (open Full Page) <link href=”https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css” rel=”stylesheet” /> <nav class=”navbar navbar-expand-xl navbar-dark bg-primary”> <button class=”navbar-toggler” type=”button” data-toggle=”collapse” data-target=”#navbarSupportedContent” aria-controls=”navbarSupportedContent” aria-expanded=”false” aria-label=”Toggle navigation”> <span class=”navbar-toggler-icon”></span> </button> <a class=”navbar-brand” href=”#”>Company</a> <div class=”collapse navbar-collapse” id=”navbarSupportedContent”> <form … Read more
HTML already has a built-in horizontal divider called <hr/> (short for “horizontal rule”). Bootstrap styles it like this: hr { margin-top: 1rem; margin-bottom: 1rem; border: 0; border-top: 1px solid rgba(0, 0, 0, 0.1); } <link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css” /> <p> Some text <hr/> More text </p>
The navbar-toggler-icon (hamburger) in Bootstrap 4 uses an SVG background-image. There are 2 “versions” of the toggler icon image. One for a light navbar, and one for a dark navbar… Use navbar-dark for a light/white toggler on darker backgrounds Use navbar-light for a dark/gray toggler on lighter backgrounds // this is a black icon with … Read more
For Bootstrap 4 stable: Since beta Bootstrap 4 doesn’t depend on Tether but Popper.js. All scripts (must be in this order): <script src=”https://code.jquery.com/jquery-3.3.1.slim.min.js”></script> <script src=”https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js”></script> <script src=”https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js”></script> See the current documentation for the newest script versions. Only Bootstrap 4 alpha: Bootstrap 4 alpha needs Tether, so you need to include tether.min.js before you include bootstrap.min.js, … Read more
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
Bootstrap has a wide range of responsive margin and padding utility classes. They work for all breakpoints: xs (<=576px), sm (>=576px), md (>=768px), lg (>=992px) or xl (>=1200px)) The classes are used in the format: {property}{sides}-{size} for xs & {property}{sides}-{breakpoint}-{size} for sm, md, lg, and xl. m – sets margin p – sets padding t … Read more
Bootstrap 5 (Updated 2021) Bootstrap 5 is still flexbox based so vertical centering works the same way as it did in Bootstrap 4. For example, align-items-center (flex-direction: row) and justify-content-center (flex-direction: column) can used on the flexbox parent (row or d-flex). Centering examples in Bootstrap 5 Vertical center (don’t forget the parent must have a … Read more
TL;DR: Create another <ul class=”navbar-nav ml-auto”> for the navbar items you want on the right. ml-auto will pull your navbar-nav to the right where mr-auto will pull it to the left. Tested against Bootstrap v4.5.2 <!DOCTYPE html> <html lang=”en”> <head> <link rel=”stylesheet” href=”https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css”/> <style> /* Stackoverflow preview fix, please ignore */ .navbar-nav { flex-direction: row; … Read more
Migrating from Glyphicons to Font Awesome is quite easy. Include a reference to Font Awesome (either locally, or use the CDN). <link href=”https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css” rel=”stylesheet”> Then run a search and replace where you search for glyphicon glyphicon- and replace it with fa fa-, and also change the enclosing element from <span to <i. Most of the … Read more