Update for Bootstrap 5 (2020) Bootstrap 5 (currently alpha) has a new xxl breakpoint. Therefore display classes have a new tier to support this: Hidden only on xxl: d-xxl-none Visible only on xxl: d-none d-xxl-block Bootstrap 4 (2018) The hidden-* and visible-* classes no longer exist in Bootstrap 4. If you want to hide an … Read more
2021 Update… Bootstrap 5 (beta) For aligning within a flexbox div or row… ml-auto is now ms-auto mr-auto is now me-auto For text align or floats.. text-left is now text-start text-right is now text-end float-left is now float-start float-right is now float-end Bootstrap 4+ pull-right is now float-right text-right is the same as 3.x, and … Read more
For Bootstrap 4 Bootstrap 4 now uses flexbox by default, so you get access to its magical powers straight out of the box. Check out the auto layout columns that dynamically adjust width depending on how many columns are nested. Here’s an example: <div class=”row”> <div class=”col”> 1 of 5 </div> <div class=”col”> 2 of … Read more
Bootstrap 5 (update 2021) In Bootstrap 5 (see this question), ml-auto has been replaced with ms-auto to represent start instead of left. Since the Navbar is still based on flexbox, auto margins OR flexbox utility classes are still used to align Navbar content. For example, use me-auto… <nav class=”navbar navbar-expand-lg navbar-light bg-light”> <div class=”container-fluid”> <a … Read more
Important! Vertical center is relative to the height of the parent If the parent of the element you’re trying to center has no defined height, none of the vertical centering solutions will work! Now, onto vertical centering… Bootstrap 5 (Updated 2021) Bootstrap 5 is still flexbox based so vertical centering works the same way as … Read more
Insert pull-right into the class attribute and let bootstrap arrange the buttons. For Bootstrap 2.3, see: http://getbootstrap.com/2.3.2/components.html#misc > Helper classes > .pull-right. For Bootstrap 3, see: https://getbootstrap.com/docs/3.3/css/#helper-classes > Helper classes. For Bootstrap 4, see: https://getbootstrap.com/docs/4.0/utilities/float/#responsive The pull-right command was removed and replaced with float-right or in general to float-{sm,md,lg,xl}-{left,right,none} For Boostrap 5, see: https://getbootstrap.com/docs/5.0/utilities/float/ The … Read more
Author’s note I: Please look at other answers below, especially ones that do not use jquery. Author’s note II: Preserved for posterity but surely the wrong approach in 2020. (Was non idiomatic even back in 2017) Original Answer You are using Bootstrap which means you are using jQuery :^), so one way to do it … Read more
Updated 2020… Bootstrap 5 In Bootstrap 5 (alpha) there is a new -xxl- size: col-* – 0 (xs) col-sm-* – 576px col-md-* – 768px col-lg-* – 992px col-xl-* – 1200px col-xxl-* – 1400px Bootstrap 5 Grid Demo Bootstrap 4 In Bootstrap 4 there is a new -xl- size, see this demo. Also the -xs- infix … Read more
tl;dr – TWBSColor – Generate your own Bootstrap navbar Version notes: Online tool: Bootstrap 3.3.2+ / 4.0.0+ This answer: Bootstrap 3.0.x For Bootstrap 5.x, please check documentation Available navbars You’ve got two basic navbars: <!– A light one –> <nav class=”navbar navbar-default” role=”navigation”></nav> <!– A dark one –> <nav class=”navbar navbar-inverse” role=”navigation”></nav> Default color usage … Read more