I want to make a fixed navbar on top with one row, not just two. the code I have is:
<div class="col-md-3">
<ul class="navbar-nav mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link text-white" href="login.html">Login</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="teaching.html">Teaching</a>
</li>
</ul>
</div>
Now I want to make one row. Is there any clean way to do this??
Add list-group-horizontal class to ul tag.
<div class="col-md-3">
<ul class="navbar-nav mb-2 mb-lg-0 list-group-horizontal">
<li class="nav-item">
<a class="nav-link text-white" href="login.html">Login</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="teaching.html">Teaching</a>
</li>
</ul>
</div>
You may see the list should have some spaces between them.
https://getbootstrap.com/docs/5.0/components/list-group/#horizontal
Related
I have a typical bootstrap navbar that collapses to a dropdown menu on smaller devices. As default menus do, it shows a vertical list of items, which takes up too much space, so I would like to group items in two columns. Here's a drawing of what I mean:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Item 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 4</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 5</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 6</a>
</li>
</ul>
</div>
</div>
</nav>
CodeSandbox code here
I tried grouping it using <div class="col-sm-4"> [three items] </div> but it failed, because I misunderstood how cols work. It grouped items only on the normal navbar, leaving hamburger menu untouched. Unfortunately, all solutions I could find refer to dropdown menus, but it doesn't translate to hamburgers, or at least I can't make it work.
I have no problems using JS if it isn't possible using pure B5/HTML/CSS. Also, I'd like not to change anything in how the standard navbar works on bigger devices, it shouldn't be grouped in any way - I want those columns to be present only on a hamburger menu.
The content of the navbar can be dynamic and there's a lot of ways to show two columns inside the navbar menu.
As a simple solution I used the a row container and columns just to illustrate the possibilities. You can add a divider that shows in mobile which is what is drawn.
Hope this helps and answers your question.
This is just one way to do this (codepen):
<div class="collapse navbar-collapse" id="navbarNav">
<div class="row">
<div class="col">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Item 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 4</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 5</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 6</a>
</li>
</ul>
</div>
<div class="col">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Item 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 4</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 5</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 6</a>
</li>
</ul>
</div>
</div>
</div>
Another possibility is just wrap the <ul> lists with a flex div which will also show the menu as two columns (codepen). I think this is a better solution I just wanted you to have more than one possibility.
Use the grid (row/cols) in the navbar-nav. Use the row-cols-* classes to set the number of columns. This way you won't have to split the columns in your markup.
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav flex-row row g-0 row-cols-2 row-cols-lg-6">
<li class="nav-item col">
<a class="nav-link active" aria-current="page" href="#">Item 1</a>
</li>
<li class="nav-item col">
<a class="nav-link" href="#">Item 2</a>
</li>
<li class="nav-item col">
<a class="nav-link" href="#">Item 3</a>
</li>
<li class="nav-item col">
<a class="nav-link" href="#">Item 4</a>
</li>
<li class="nav-item col">
<a class="nav-link" href="#">Item 5</a>
</li>
<li class="nav-item col">
<a class="nav-link" href="#">Item 6</a>
</li>
</ul>
</div>
Responsive demo
I've been trying to figure this out for a while now. I'm a bit of a noob when it comes to Bootstrap, so please allow me the probably simple question.
I'm trying to create a navbar with bootstrap 4, with the majority of menu items on the left, but with the login button on the right. I've figured some roundabout way of doing it (which could be wrong) but whenever I view the page in phone or tablet view, the 'login' item of the menu doesn't appear when one clicks the burger menu icon.
It appears up to a point (think it's about 760px) and then just disappears from view.
Here's the markup to this point, any help at all would be appreciated.
<a class="navbar-brand" href="#"><img src="imgs/branding/nerve logo_small.png" width="50" height="50" alt=""></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="index.php">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Placeholder 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Placeholder 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Placeholder 3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Placeholder 4</a>
</li>
</ul>
</div>
<ul class="navbar-nav flex-row ml-md-auto d-none d-md-flex">
<li class="nav-item text-right">
<a class="nav-link " href="#">Login</a>
</li>
</ul>
</nav>
I think, the problem is here
<ul class="navbar-nav flex-row ml-md-auto d-none d-md-flex">
<li class="nav-item text-right">
<a class="nav-link " href="#">Login</a>
</li>
</ul>
d-none d-md-flex - this part means, that this element will be hidden (d-none) until 768px (d-md-flex), and then will be displayed as flex. Try to remove d-none
UPDATED
The best way is to remove a standalone login ul and add Login as a part of a global ul list.
<ul class="navbar-nav w-100">
<li class="nav-item active">
<a class="nav-link" href="index.php">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Placeholder 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Placeholder 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Placeholder 3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Placeholder 4</a>
</li>
<li class="nav-item flex-sm-grow-1 text-sm-right">
<a class="nav-link " href="#">Login</a>
</li>
</ul>
Look closer to flex-sm-grow-1 text-sm-right in Login li. And don't forget to add w-100 to ul.
I'm trying to add nav-pills to tag but it's not working, why?
I really tried everything but nothing works!
<ul class="nav nav-pills flex-column">
<li class="nav-item">
<a class="nav-link" href="dashboard.php">Dashboard</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Add New Post</a>
</li>
</ul>
Pills require the active class.
<ul class="nav nav-pills flex-column">
<li class="nav-item">
<a class="nav-link active" href="">Dashboard</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Add New Post</a>
</li>
</ul>
https://www.codeply.com/go/xrln5uphko
I am using below code for BootStrap 4 tab.
<ul class="nav nav-tabs font-weight-bold">
<li class="nav-item">
<a class="nav-link active" href="#details" data-toggle="tab">Page Details</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#content" data-toggle="tab">Page Content</a>
</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="details">Page Details</div>
<div role="tabpanel" class="tab-pane fade" id="content">Page Content</div>
</div>
How can I make it responsive so that I can see this tabs even in 100px height and 100px width ?
use this
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
latest bootstrap 4.+ update of navs, works on every screensize
Will shrink to horizontal view if u go below 300px
link for latest bootstrap version
https://getbootstrap.com/
I'm having trouble with Bootstrap 4 in IE10; I made a navbar with a phone number/linked-in link on the right using justify-content-end which works perfectly until I checked it in IE10, the website is required to work on IE10 specifically so it is a problem. The code is as follows:
<nav class="navbar navbar-expand-md navbar justify-content-center bigText blueBG">
<!-- Dropdown toggler for small devices -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar">
<span class="fas fa-bars text-white"></span>
</button>
<!-- Links -->
<div class="navbar-collapse collapse w-100 justify-content-center ml-5" id="navbar">
<a class="nav-item nav-link text-white link" href="home">Home</a>
<a class="nav-item nav-link text-white link" href="#">#</a>
<a class="nav-item nav-link text-white link" href="tool">Tool</a>
<a class="nav-item nav-link text-white link" href="contact">Contact</a>
<a class="nav-item nav-link text-white link" id="finalLink" href="documentatie">Documentatie</a>
</div>
<div class="navbar-collapse collapse justify-content-end">
<a href="tel:+0123456789">
<i class="fas fa-phone text-white"></i>
</a>
<a href="https://www.linkedin.com/">
<i class="fab fa-linkedin text-white ml-2"></i>
</a>
</div>
The problem is that the navbar just cuts off near the right end of the page, after that it's just the white background and a blue square.
Fixed it! I omitted the w-100 class and changed the justify-content-center to justify-content-end:
<nav class="navbar navbar-expand-md navbar bigText blueBG">
<!-- Dropdown toggler for small devices -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar">
<span class="fas fa-bars text-white"></span>
</button>
<!-- Links -->
<div class="navbar-collapse collapse justify-content-end ml-5" id="navbar">
<a class="nav-item nav-link text-white link" href="home">Home</a>
<a class="nav-item nav-link text-white link" href="#">#</a>
<a class="nav-item nav-link text-white link" href="tool">Tool</a>
<a class="nav-item nav-link text-white link" href="contact">Contact</a>
<a class="nav-item nav-link text-white link" id="finalLink" href="documentatie">Documentatie</a>
</div>
<div class="navbar-collapse collapse justify-content-end">
<a href="tel:+0123456789">
<i class="fas fa-phone text-white"></i>
</a>
<a href="https://www.linkedin.com">
<i class="fab fa-linkedin text-white ml-2"></i>
</a>
</div>
Bootstrap 4 only partially supports IE 10/11. Your problem here could be the "justify-content" classes which, according to this Can I Use... isn't supported properly. Try removing them and see if that works for your overflow problem. If not, please inform us of what changed.
I hope this will helpful for you,
/*!
* IE10 viewport hack for Surface/desktop Windows 8 bug
* Copyright 2014-2017 The Bootstrap Authors
* Copyright 2014-2017 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*/
// See the Getting Started docs for more information:
// https://getbootstrap.com/getting-started/#support-ie10-width
(function () {
'use strict'
if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
var msViewportStyle = document.createElement('style')
msViewportStyle.appendChild(
document.createTextNode(
'#-ms-viewport{width:auto!important}'
)
)
document.head.appendChild(msViewportStyle)
}
}())
body {
padding-top: 2rem;
}
.container {
padding-bottom: 1.5rem;
}
.bd-example {
padding: 1.5rem;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
border-width: .2rem;
margin: 1rem -15px;
border: solid #f7f7f9;
}
<div class="container">
<div class="row">
<div class="col-12">
<h2 class="text-center">Horizontal: Base Nav</h2>
<div class="bd-example">
<ul class="nav">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-12">
<h2 class="text-center">Horizontal: Justify Content Center</h2>
<div class="bd-example">
<ul class="nav justify-content-center">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-12">
<h2 class="text-center">Horizontal: Justify Content End</h2>
<div class="bd-example">
<ul class="nav justify-content-end">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-12">
<h2 class="text-center">Vertical: Flex Column</h2>
<div class="bd-example">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-12">
<h2 class="text-center">Base Nav: Tabs</h2>
<div class="bd-example">
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-12">
<h2 class="text-center">Base Nav: Pills</h2>
<div class="bd-example">
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-12">
<h2 class="text-center">Base Nav: Fill and justify</h2>
<div class="bd-example">
<ul class="nav nav-pills nav-fill">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</div>
</div>
</div>
Just remove "mr-auto" or "m-auto" from the div just above .
<div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent" >
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</nav>