I'm trying to align my brand and the rest of the links on the opposite side(brand on left and other links on the right) to fit on the mobile view but the links on the right move to the next line. Any suggestions will help thanks.I'm using bootstrap 5. Here's my code:
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class="row">
<nav class="nav-navbar navbar-expand-lg navbar-light">
<div class="col border border-danger">
<div class="d-sm-flex p-2 bd-highlight">
<button
class="navbar-toggler align-items-sm-start"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">brand name</a>
<div class="d-flex flex-sm-row-reverse">
<div class="p-2 bd-highlight">Search</div>
<div class="p-2 bd-highlight">cart</div>
<div class="p-2 bd-highlight">Login</div>
<div class="p-2 bd-highlight">Sign up</div>
</div>
</div>
</div>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav flex-column">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#"
>NEW ITEMS</a
>
</li>
<li class="nav-item">
<a class="nav-link" href="#">BRANDS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CURATED PIECES</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">TOP ITEMS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">FEATURED</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
</body>
</html>
Those items are wrapping to next line at the extra small breakpoint (or < small) because you are using .d-sm-flex. The display is only set to flex at the small and larger breakpoints.
To enable the flex behavior for all screen sizes use .d-flex.
https://getbootstrap.com/docs/5.1/utilities/flex/#enable-flex-behaviors
You also have a couple of issues with your code that I have corrected in the snippet.
.cols should be direct descendants of .rows
https://getbootstrap.com/docs/5.1/layout/columns/#how-they-work
The scripts (popper.js & bootstrap.js) should be included just before the closing </body> tag after all content elements.
https://getbootstrap.com/docs/5.1/getting-started/introduction/#js
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<nav class="nav-navbar navbar-expand-lg navbar-light col">
<div class="border border-danger">
<div class="d-flex p-2 bd-highlight">
<button class="navbar-toggler align-items-sm-start" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">brand name</a>
<div class="d-flex flex-sm-row-reverse">
<div class="p-2 bd-highlight">Search</div>
<div class="p-2 bd-highlight">cart</div>
<div class="p-2 bd-highlight">Login</div>
<div class="p-2 bd-highlight">Sign up</div>
</div>
</div>
</div>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav flex-column">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">NEW ITEMS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">BRANDS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CURATED PIECES</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">TOP ITEMS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">FEATURED</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
</body>
</html>
If you are using Bootstrap 5, you can go to https://getbootstrap.com/ and use the top nav bar to navigate to https://getbootstrap.com/docs/5.1/examples/. In here, you'll find an example page called "Headers", located here: https://getbootstrap.com/docs/5.1/examples/headers/.
These example headers could be a great resource for you to model your code after.
One other helpful resource is the Bootstrap 5 nav bar component page found here: https://getbootstrap.com/docs/5.1/components/navbar/
There are several examples on this page that could give you some ideas.
If you are new to HTML, CSS and/or Bootstrap, I would suggest starting off with one of their examples/templates and modifying rather than building your own.
Side note: it may also help if your code is more readable. You could put your code through an HTML formatter like: https://webformatter.com/html or use software like https://prettier.io/docs/en/.
Best of luck!
Related
I'm starting my studies in fullstack and we were just shown bootstrap. I'm doing this site responsive, and I modified the menu bar to my please. The only thing I'd like to change is the menu to colapse into the toggle button only below 600px-ish wide (aka for phones). Any assistance will be appreciated
html
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#"></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarScroll" aria-controls="navbarScroll" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarScroll">
<ul class="navbar-nav me-auto my-2 my-lg-0 navbar-nav-scroll" style="--bs-scroll-height: 100px;">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Inicio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Academia</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Tienda</a>
<li class="nav-item">
<a class="nav-link" href="#">Nosotros</a>
<li class="nav-item">
<a class="nav-link" href="#">Contacto</a>
</ul>
</div>
</div>
</nav>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
As mentioned in the How it works section of Bootstrap navbar documentation, you can use navbar-expand-sm instead of navbar-expand-lg. This will collapse the navbar only on screens smaller than 576px(sm).
I am trying to float a logo to the left side of a nav bar, and have the text float to the right of the nav bar. I am trying to accomplish this through bootstrap. I have tried adding float and text align classes to outer divs and specific elements. I have shown my code below, keep in mind it is not meant to be run.
//not meant to be run
//bootstrap is not hooked up
<div class = "row col-12">
<div class = "float-left col-3">
<img>
</div>
<div class = "float-right col-9">
<nav class = "nav text-right">
<a class = "homen" href="home.html">Home</a>
<a class = "aboutn" href="about.html">About</a>
<a class = "teamn" href="team.html">Team</a>
<a class = "contactn" href="contact.html">Contact Us</a>
</nav>
</div>
</div>
You can use Flexbox utilitys. For example use justify-content-end on the collapse menu:
<html>
<head>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
</head>
<body>
<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="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-link active" aria-current="page" href="#">Home</a>
<a class="nav-link" href="#">About</a>
<a class="nav-link" href="#">Team</a>
<a class="nav-link" href="#">Contact Us</a>
</div>
</div>
</div>
</nav>
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
</body>
Also note, as of Bootstrap 5 ml-auto has been replaced with ms-auto
This is from official Bootstrap documentation. It uses display: flex design and if you want to align menu to left again, you can change mr-auto with me-auto. This is also responsive code with hidden button which can only come with mobile screens.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#"><img src="logo.svg" alt="logo" /></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarText">
<ul class="navbar-nav mr-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
</ul>
</div>
</div>
</nav>
I am using Bootstrap 4 and trying to make a nav-item have the same height as my navbar so that when I add background-color to it it looks like a stripe through the nav-bar.
Initially the item was centered and left space on top and below. I added negative margin to get it up against the top but the same didn't work when I tried to add "margin-bottom"
I then tried fixing the height of the navbar but when I did that and clicked on the toggle to bring down the navbar items they didn't show up because the fixed height prevented it from appearing.
<body>
<nav class="navbar navbar-dark bg-dark text-center">
<div class="container">
<div class="mr-auto order-0" class= "d-flex align-items-stretch">
<a class="navbar-brand ml-auto" style="background-color:red; line-height: 58px; margin-top:-9px; padding: 0 20px 0 20px;" class="nav-item active" href="#">Matthew Krebs</a>
</div>
<a class="navbar-brand text-center" href="#"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive"
aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto mx-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
</div>
</div>
</nav>
</body>
Here you go!
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<nav style="padding-top: 0px; padding-bottom: 0px;" class="navbar navbar-expand-lg navbar-light bg-light" id="navbar">
<a class="navbar-brand" href="#">Navbar</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="#">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="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
</nav>
<h1>Hello, world!</h1>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<!-- Option 2: jQuery, Popper.js, and Bootstrap JS
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
-->
<script>
document.querySelectorAll(".nav-item").forEach(item => {
item.style.height = document.getElementById("navbar").offsetHeight;
item.style.backgroundColor = 'aqua';
item.style.marginRight = '5px';
})
</script>
</body>
</html>
A few things:
I changed the inline CSS to a separate class just for the red background
added the nav-link class so that you can see the behavior of the nav-item on the top and those which are revealed upon clicking the burger menu
the navbar class had a padding which we had to overwrite to take care of the stripe look
make sure that your CSS is loaded after bootstrap, so that you can override it without using !important
working snippet below:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<nav class="navbar navbar-dark bg-dark text-center">
<div class="container">
<div class="mr-auto order-0" class="d-flex align-items-stretch">
<a class="nav-item nav-link my-custom-style" href="#">Matthew Krebs</a>
</div>
<a class="navbar-brand text-center" href="#"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto mx-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
</div>
</div>
</nav>
<style>
.navbar {
padding-top: 0;
padding-bottom: 0;
}
/* just to highlight our nav-item */
.my-custom-style {
background-color: red;
}
.nav-link {
border: 1px dotted yellow;
}
</style>
The desired effect can be achieved by simply removing the padding from the <nav> element. The easiest way to do this is to add the p-0 class to the <nav>. Bootstrap includes several margin and padding utility classes. Read about them here.
<nav class="navbar navbar-dark bg-dark text-center p-0">
<div class="container">
<div class="mr-auto order-0" class="d-flex align-items-stretch">
<a class="navbar-brand ml-auto"class="nav-item active" href="#">
Matthew Krebs
</a>
</div>
<button class="navbar-toggler" data-toggle="collapse" data-target="#navbarResponsive">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto mx-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
</div>
</div>
</nav>
Codepen example.
I am using 'Album' example from Bootstrap 4.1 and unable to get the extra nav-items to display horizontally.
I tried to add 'navbar-expand-lg', and it brings all to horizontal line. But, the toggler-button (and hence its header data) vanishes and becomes inaccessible.
Code as below;
<script src="http://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<header>
<!-- Navbar#1 Toggled - Detailed Header Info-->
<div class="collapse bg-dark" id="navbarHeader">
<div class="container">
<div class="row">
<div class="col-sm-8 col-md-7 py-4">
<h4 class="text-white">About</h4>
<p class="text-muted">Lines of Data Shortened.</p>
</div>
<div class="col-sm-4 offset-md-1 py-4">
<h4 class="text-white">Contact</h4>
<ul class="list-unstyled">
<li>Follow on Twitter</li>
<li>Like on Facebook</li>
<li>Email me</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Navbar#2 Permanent Strip of Navbar -->
<div class="navbar navbar-dark bg-dark shadow-sm">
<div class="container d-flex justify-content-between">
<a href="#" class="navbar-brand d-flex align-items-center">
<!-- SVG Album Icon -->
<strong>Album</strong>
</a>
<!-- Nav Items Manually added -->
<div class="navbar-nav mr-auto">
<a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">Features</a>
<a class="nav-item nav-link" href="#">Pricing</a>
<a class="nav-item nav-link disabled" href="#">Disabled</a>
</div>
<!-- Navbar#3 - Visible Toggle Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</div>
</header>
Add float: left;CSS to your li items.
Also you can try this
https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_navbar&stacked=h
I got the answer.
The navbar was a flexbox with 'd-flex'. So, I added a 'flex-row', which brings nav-items horizontally. 'mr-auto' brings margin properly.
<script src="http://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<header>
<!-- Navbar#1 Toggled - Detailed Header Info-->
<div class="collapse bg-dark" id="navbarHeader">
<div class="container">
<div class="row">
<div class="col-sm-8 col-md-7 py-4">
<h4 class="text-white">About</h4>
<p class="text-muted">Lines of Data Shortened.</p>
</div>
<div class="col-sm-4 offset-md-1 py-4">
<h4 class="text-white">Contact</h4>
<ul class="list-unstyled">
<li>Follow on Twitter</li>
<li>Like on Facebook</li>
<li>Email me</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Navbar#2 Permanent Strip of Navbar -->
<div class="navbar navbar-dark bg-dark shadow-sm">
<div class="container d-flex justify-content-between">
<a href="#" class="navbar-brand d-flex align-items-center">
<!-- SVG Album Icon -->
<strong>Album</strong>
</a>
<!-- Nav Items Manually added -->
<div class="navbar-nav flex-row mr-auto">
<a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">Features</a>
<a class="nav-item nav-link" href="#">Pricing</a>
<a class="nav-item nav-link disabled" href="#">Disabled</a>
</div>
<!-- Navbar#3 - Visible Toggle Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</div>
</header>
I am trying to create a website header that conforms to the schematic below using Bootstrap 4:
The code I am using to achieve this is as follows (extraneous code omitted):
<div class="navbar">
<div class="container yellow">
<div class="row">
<div class="col-sm-4 green">Logo</div>
<div class="col-sm-8 green">
<div class="row">
<div class="col text-right red">
(00) 1234 5678
</div>
</div>
<div class="row">
<div class="col text-right red">
<!-- nav links here -->
link
</div>
</div>
</div>
</div>
</div>
</div>
The only custom CSS is to change the background colours to match those of the schematic.
This results in the following rendered HTML page, where the row does not span the container:
However, in Bootstrap 3 this is not an issue. Only changing the framework to Bootstrap 3 gives the correct layout:
Also, the correct layout can be achieved within Bootstrap 4 if the container (and its nested content) is removed from its navbar parent:
What do I need to do within Bootstrap 4 to achieve this desired layout whilst still using the navbar class?
The Bootstrap 4 grid row>col-* aren't designed to be used inside the Navbar. Here is the supported content. Now that Bootstrap 4 uses flexbox, it's much easier to align Navbar content without using the grid row>col-*.
If you want a Navbar with logo and 2 rows, see this answer: https://stackoverflow.com/questions/42635126/bootstrap-4-navbar-with-2-rows
<nav class="navbar navbar-expand navbar-dark fixed-top bg-dark">
<div class="container">
<h1 class="mb-0">Logo</h1>
<div class="d-flex flex-column flex-wrap" id="navbarCollapse">
<span class="navbar-text ml-auto py-0 px-lg-2">(00) 1234 5678</span>
<ul class="navbar-nav mb-auto mt-0 ml-auto">
<li class="nav-item active">
<a class="nav-link py-0" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link py-0" href="#">Product</a>
</li>
<li class="nav-item">
<a class="nav-link py-0" href="#">Company</a>
</li>
<li class="nav-item">
<a class="nav-link py-0" href="#">Blog</a>
</li>
</ul>
</div>
</div>
</nav>
Examples:
Basic Navbar with 2 rows: https://codeply.com/go/ilJBKjJsEy
Responsive Navbar with 2 rows: https://codeply.com/go/DsfePuoZy0
The 2nd example collapses into a mobile stacked menu on small screens that can be toggled using the hamburger icon. Use the flexbox and spacing utility classes to position elements as desired. There are many ways to achieve what you want: https://www.codeply.com/go/pGE8fTf9dM
You can use 2 navbar-nav elements and then stack them up by using the flex-column class like so:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">
<img src="https://picsum.photos/140/70" width="140" height="70" alt="Logo">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse flex-column align-items-end" id="navbarCollapse">
<!-- navbar1 -->
<div class="navbar-nav mb-lg-0">
<a class="nav-item nav-link" href="#">(00) 1234567</a>
</div>
<!-- navbar2 -->
<ul class="navbar-nav mt-0">
<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="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Products</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Free Cookies</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>