bootstrap 4 navbar, cant remove padding - html

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

Related

Need help in centering links below navbar-brand using Bootstrap 5

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>

Fixed navbar in Bootstrap 4 (2 rows)

I try to make a website in Boostrap 4, but I faced into a problem. I try to explain what I need.
A fixed to top navbar with 2 rows, but here comes the trick. Upper bar contains 2 logos (one on the left side and one on the right side, in the same row.
The second row contains only links, but ordered to center. Hopefully, my description not so misunderstandible.
Thanks for your help!
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<a class="navbar-brand" href="#">Fixed navbar</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" id="navbarCollapse">
<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 mt-2 mt-md-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>
<nav class="navbar fixed-top navbar-light bg-light">
<div class="row d-flex w-100 justify-content-between" >
<img class="" style="width: 3rem" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Bootstrap_logo.svg/1024px-Bootstrap_logo.svg.png" />
<img class="" style="width: 3rem" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Bootstrap_logo.svg/1024px-Bootstrap_logo.svg.png" />
</div>
<div class="row w-100 ">
<ul class="d-flex list-unstyled mx-auto w-25 justify-content-between">
<li class="">My links </li>
<li class="">My links </li>
<li class="">My links </li>
</ul>
</div></nav>
Is it what you are looking for?

header fixed top doesnt work on section bootstrap 4

I have header with top-bar and nav using bootstrap 4.
HTML:
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<header class="fixed-top">
<div class="top-bar">
<div class="container">
top bar
</div>
</div>
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="#">Fixed navbar</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" id="navbarCollapse">
<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 mt-2 mt-md-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>
</div>
</nav>
</header>
<section id="intro">
<div class="container">
<div class="jumbotron">
<div class="container">
<h2>Test</h2>
<h1>Lorem Ipsum</h1>
<h4>Lorem Ipsum</h4>
</div>
</div>
</div>
</section>
</body>
I add fixed-top class on header, Now In action header is over of section and section not show after header. how do can i show section after header block?!
demo here

Align Navbar search form and button in the center with Bootstrap 4

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>

How do you position navbar items to the right in Bootstrap 4? [duplicate]

This question already has answers here:
Bootstrap align navbar items to the right
(24 answers)
Closed 5 years ago.
I'm a newbie and would like to ask how do you position navbar items to the right in Bootstrap 4? I tried the solutions here Bootstrap 4 - Right Align Navbar Items but did not work.
I trying to understand the sample code from Bootstrap 4 and don't what is making the search form align to the right?
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<a class="navbar-brand" href="#">Hidden brand</a>
<ul class="navbar-nav mr-auto mt-2 mt-lg-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="#">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="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
mr-auto does not align nav items to the right using the below,
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggler40" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarToggler40">
<a class="navbar-brand" href="#">Hidden brand</a>
<ul class="navbar-nav mt-2 mt-lg-0 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>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown link </a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
</nav>
It is the .mr-auto class set on the navbar menu (the <ul> tag) that pushes the form to the right.
The #navbarTogglerDemo01 tag has 3 immediate children: the <a>, <ul> and <form> tags. Normally they all would be left aligned, but the class mentioned above set the right margin of the <ul> tag to auto.
This is the actual css stlye:
.mr-auto {
margin-right: auto !important;
}
You can read more on this under the Spacing utilities section of the Bootstrap 4 docs.
Update in response of the comment:
Consider the example below. Apart from the color scheme, the only difference between the two navbars is the usage of the .mr-auto class. The upper one uses it, and has the form pushed to the right end, while the lower navbar does not use it, thus the form stands next to the menu items.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<a class="navbar-brand" href="#">Hidden brand</a>
<ul class="navbar-nav mr-auto mt-2 mt-lg-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="#">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="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<a class="navbar-brand" href="#">Hidden brand</a>
<ul class="navbar-nav mt-2 mt-lg-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="#">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="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
So in case you would like to align the entire menu to the right, than you have two easy options. The example below uses the .mr-auto class on the branded <a> tag. Your another option could be to change the .mr-auto class to .ml-auto on the <ul> element.
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<a class="navbar-brand mr-auto" href="#">Hidden brand</a>
<ul class="navbar-nav mt-2 mt-lg-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="#">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="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>