I want to center navbar brand on large screen.
I don't understand what i'm doing wrong and what should i do ? . please help!
i want something like this: https://www.codeply.com/go/6P65Rawdw4/bootstrap-4-navbar-center-links-examples .
<nav class="navbar fixed-top navbar-expand-sm navbar-light " id="MyNavControl">
<a class="navbar-brand mx-auto" href="#home">BRAND BRAND</a>
<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>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link active" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#AboutSection">About</a>
</li>
</ul>
<form class="ml-auto">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
</form>
</div>
</nav>
Updated after comment
Try this
<nav class="navbar fixed-top navbar-expand-sm navbar-light " id="MyNavControl">
<a class="navbar-brand mx-auto" href="#home">BRAND BRAND</a>
<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>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mx-auto">
<li class="nav-item">
<a class="nav-link active" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#AboutSection">About</a>
</li>
</ul>
</div>
<form class="ml-auto">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
</form>
</nav>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
<nav class="navbar fixed-top navbar-expand-sm navbar-light " id="MyNavControl">
<a class="navbar-brand mx-auto" href="#home">BRAND BRAND</a>
<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>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mx-auto">
<li class="nav-item">
<a class="nav-link active" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#AboutSection">About</a>
</li>
</ul>
</div>
<form class="ml-auto">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
</form>
</nav>
Related
I am practicing how to create a navbar using Bootstrap 5 and can't get the links centered and below the navbar-brand.
I've attach an image of my current navbar.
Screenshot
My script:
<nav class="navbar navbar-expand-lg flex-column align-items-stretch" style="background-color: #FAF8F1; border:3px solid;">
<div class="d-flex">
<a class="navbar-brand mx-sm-auto mr-auto" href=""> Honeybee Babies </a>
<button class="navbar-toggler" 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>
</div>
<div class="collapse navbar-collapse w-100" id="navbarSupportedContent">
<unli class="navbar-nav">
<li class="nav-item rounded-pill" style="background-color:#C58940;">
<a class="nav-link" style="color:#FAF8F1" href="">Baby Essentials</a>
</li>
<li class="nav-item rounded-pill" style="background-color:#C58940;">
<a class="nav-link" style="color:#FAF8F1" href="">Price Range</a>
</li>
<li class="nav-item rounded-pill" style="background-color:#C58940;">
<a class="nav-link" style="color:#FAF8F1" href="">Brands</a>
</li>
</unli>
<form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn" style="color:#C58940" type="submit">Search</button>
</form>
</div>
</div>
</nav>
I've tried using justify-content-center in
I'm not sure what I'm doing wrong.
Any help/advice would be appreciated.
Thanks!
Add justify-content-center to the navbar-collapse.
See the snippet below.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
<nav class="navbar navbar-expand-lg flex-column align-items-stretch" style="background-color: #FAF8F1; border:3px solid;">
<div class="d-flex">
<a class="navbar-brand mx-sm-auto mr-auto" href=""> Honeybee Babies </a>
<button class="navbar-toggler" 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>
</div>
<div class="collapse navbar-collapse w-100 justify-content-center" id="navbarSupportedContent">
<unli class="navbar-nav">
<li class="nav-item rounded-pill" style="background-color:#C58940;">
<a class="nav-link" style="color:#FAF8F1" href="">Baby Essentials</a>
</li>
<li class="nav-item rounded-pill" style="background-color:#C58940;">
<a class="nav-link" style="color:#FAF8F1" href="">Price Range</a>
</li>
<li class="nav-item rounded-pill" style="background-color:#C58940;">
<a class="nav-link" style="color:#FAF8F1" href="">Brands</a>
</li>
</unli>
<form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn" style="color:#C58940" type="submit">Search</button>
</form>
</div>
</nav>
I'm new to front-end development and I am trying to design a page that also has a searchbox(here's the jsfiddle https://jsfiddle.net/he40tr9z/1/). I copied the navbar component from https://getbootstrap.com/docs/5.0/components/navbar/ and did some minimal modifications to make the searchbox appear before the nav items and to right align the nav items. Now I want the searchbox to stretch from the navbar-brand to the nav items but I can't seem to do that. I've searched the web and all the solutions I've found were for previous versions of Bootstrap which when applied to Bootstrap 5 don't work.
Here's my code snippet:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#"><img src="images/logo.png" alt="Brand image" width="180" height="52"></img></a>
<button class="navbar-toggler" 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>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<form class="d-flex ms-auto me-auto">
<input class="form-control" id="searchbox" type="search" placeholder="Search" aria-label="Search"></input>
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
<ul class="navbar-nav ms-auto mb-2 mb-lg-0 d-flex">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Login</a>
</li>
</ul>
</div>
</div>
</nav>
Here is the code from my css file:
#searchbox{
width: 100%;
}
I put width:100% cause I saw it in this solution Bootstrap: stretching navbar input box but it doesn't work for Bootstrap 5.
Just use w-100 on the containing form...
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#"><img src="//via.placeholder.com/180x52" alt="Brand image" width="180" height="52"></a>
<button class="navbar-toggler" 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>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<form class="d-flex ms-auto me-auto border w-100">
<input class="form-control" id="searchbox" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
<ul class="navbar-nav ms-auto mb-2 mb-lg-0 d-flex">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Login</a>
</li>
</ul>
</div>
</div>
</nav>
Codeply
Here is the code of the header and i want to align its search bar and button in center
<header>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">Aditya Shrivastava</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<nav class="navbar navbar-light bg-light">
<form class="form-inline">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</nav>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav ml-auto">
<a class="nav-item nav-link" href="#">Twitter</a>
<a class="nav-item nav-link" href="#">Resume</a>
<a class="nav-item nav-link" href="#">Blog</a>
</div>
</div>
</nav>
</header>
To align Bootstrap 4 Navbar content use the utility classes
flex-grow-1 on the brand and form so they fill width
mx-lg-auto to center the form on lg and up (navbar-expand-lg breakpoint)
ml-auto on the right navbar-collapse to keep it right aligned
m-* and p-* to adjust margins or padding as desired
<header>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand flex-grow-1" href="#">Aditya Shrivastava</a>
<div class="flex-grow-1 d-flex">
<form class="form-inline flex-nowrap bg-light mx-0 mx-lg-auto rounded p-1">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav ml-auto">
<a class="nav-item nav-link" href="#">Twitter</a>
<a class="nav-item nav-link" href="#">Resume</a>
<a class="nav-item nav-link" href="#">Blog</a>
</div>
</div>
</nav>
</header>
https://www.codeply.com/go/NXIwAj610b
Related: Bootstrap NavBar with left, center or right aligned items
You should be give text-align: center; into .form-inline class. Or also use bootstrap default class align="center"
Hope this help.
Let me know further clarification.
<header>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">Aditya Shrivastava</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<nav class="navbar navbar-light bg-light">
<form class="form-inline" style="text-align: center;">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</nav>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav ml-auto">
<a class="nav-item nav-link" href="#">Twitter</a>
<a class="nav-item nav-link" href="#">Resume</a>
<a class="nav-item nav-link" href="#">Blog</a>
</div>
</div>
</nav>
</header>
Bootstrap have inbuilt center align u just have to add align="center" beside your form class
<header>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">Aditya Shrivastava</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<nav class="navbar navbar-light bg-light">
<form class="form-inline" align="center">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</nav>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav ml-auto">
<a class="nav-item nav-link" href="#">Twitter</a>
<a class="nav-item nav-link" href="#">Resume</a>
<a class="nav-item nav-link" href="#">Blog</a>
</div>
</div>
</nav>
</header>
currently i am practicing bootstrap and html, i am trying to center my <h1> on the navbar , i've tried a lot of ways, even with the css way it didn't work, so here is my image
for your reference, i used this code within my HTML,
but, it didn't work,
<h1 class="nabar" id="nabar" href="#" style="color: #2c3e50; text-align:center;">e-ticket</h1>
my complete code
<nav class="navbar navbar-toggleable-md navbar-light bg-faded" style="background-color: #ecf0f1">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" style="background-color: #ecf0f1;">
<span class="navbar-toggler-icon"></span>
</button>
<a class="nabar center-block" id="nabar" href="#" style="color: #2c3e50; text-align:center;">e-ticket</a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#" style="color:#2c3e50;">Home <span class="sr-only">(current)</span></a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
Simply use mx-auto...
https://www.codeply.com/go/S2g7bPmHjN
<nav class="navbar navbar-toggleable-md navbar-light bg-faded" style="background-color: #ecf0f1">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" style="background-color: #ecf0f1;">
<span class="navbar-toggler-icon"></span>
</button>
<h1 class="mx-auto"><a class="nabar" id="nabar" href="#" style="color: #2c3e50; text-align:center;">e-ticket</a></h1>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#" style="color:#2c3e50;">Home <span class="sr-only">(current)</span></a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
Add flex: 1; to your anchor element with the e-ticket text and that should work. Check this link for flexbox.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-toggleable-md navbar-light bg-faded" style="background-color: #ecf0f1">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" style="background-color: #ecf0f1;">
<span class="navbar-toggler-icon"></span>
</button>
<a class="nabar center-block" id="nabar" href="#" style="color: #2c3e50; text-align:center; flex: 1;">e-ticket</a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#" style="color:#2c3e50;">Home <span class="sr-only">(current)</span></a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
Using center-block class should work-
<a class="nabar center-block" id="nabar" href="#" style="color: #2c3e50; text-align:center;">e-ticket</a>
Please find the working demo here-
https://jsbin.com/quqususuda/edit?html,output
I am trying to remove the padding between menu and navbar margin. I cant seem to find an answer.
header nav #logo {
padding: -10px; }
<header>
<nav class="navbar navbar-expand-lg navbar-light bg-light" style="background-color: red;">
<a class="navbar-brand" href="#">
<img id="logo" src="images/logo.png" width="60" height="60">
</a>
<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>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<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>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
</header>
Use the Bootstrap 4 spacing utilites for padding.
Decrease Padding Navbar Example
py-0 sets vertical (y-axis) padding to 0.
<nav class="navbar navbar-dark py-0 bg-primary navbar-expand-lg">
<a class="navbar-brand" href="#">Logo</a>
<div class="navbar-collapse collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item py-0">Link</li>
</ul>
</div>
</nav>
In my case it was not the nav that had the pading, it was the body. To the body I put py-0 in his class and ready