Using media breakpoints in Bootstrap 4-alpha

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

Why is the Bootstrap Navbar always collapsed? [duplicate]

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

Using Bootstrap 5 with Vue 3

Bootstrap 5 no longer needs jQuery so it’s easier to use with Vue, and no longer requires a library like bootstrap-vue. Install bootstrap as you would any other JS module in the Vue project using npm install or by adding it to the package.json… npm install –save bootstrap npm install –save @popperjs/core Next, add the … Read more

How to change Bootstrap navbar collapse breakpoint

Bootstrap 5 (update 2023) As stated in the docs, For navbars that never collapse, add the .navbar-expand class on the navbar. For navbars that always collapse, don’t add any .navbar-expand class. Bootstrap 4 (update 2018) Changing the navbar breakpoint is easier in Bootstrap 4 using the navbar-expand-* classes: <nav class=”navbar fixed-top navbar-expand-sm”>..</nav> navbar-expand-sm = mobile … Read more

Bootstrap Navbar Dropdown Menu Items Right

Bootstrap 5 (update 2021) Use the dropdown-menu-end class on the dropdown-menu to align the items inside the menu right.. <div class=”dropdown-menu dropdown-menu-end”> <a class=”dropdown-item” href=”#”>Link</a> <a class=”dropdown-item” href=”#”>Link</a> <a class=”dropdown-item” href=”#”>Link</a> </div> https://codeply.com/p/kWLLKdjdpC Bootstrap 4 (original answer) Use the dropdown-menu-right class to align the items inside the menu right.. <div class=”dropdown-menu dropdown-menu-right text-right”> <a class=”dropdown-item” … Read more

Bootstrap: add margin/padding space between columns

Simply add a div within col-md-6 that has the extra padding that you need. The col-md-6 is the ‘backbone’ to keep the column integrity, but you can add additional padding within it. <div class=”row”> <div class=”text-center col-md-6″> <div class=”classWithPad”>Widget 1</div> </div> <div class=”text-center col-md-6″> <div class=”classWithPad”>Widget 2</div> </div> </div> CSS .classWithPad { margin:10px; padding:10px; }

Disable responsive (mobile) navbar in Bootstrap

Bootstrap 5 (update 2021) The navbar-expand* class are still used in Bootstrap 5. Therefore if you want to prevent the Navbar from collapsing (stacking vertically) use navbar-expand. Due to changes in padding, Bootstrap 5 Navbars do require an inner container. Bootstrap 4 (original answer) The simplest way is using the navbar-toggleable-xl navbar-expand class (now in … Read more

How to hide collapsible Bootstrap navbar on click

Update 2021 – Bootstrap 5 (beta) Use javascript to add a click event listener on the menu items to close the Collapse navbar.. const navLinks = document.querySelectorAll(‘.nav-item’) const menuToggle = document.getElementById(‘navbarSupportedContent’) const bsCollapse = new bootstrap.Collapse(menuToggle) navLinks.forEach((l) => { l.addEventListener(‘click’, () => { bsCollapse.toggle() }) }) BS5 demo javascript method Or, Use the data-bs-toggle and … Read more