Bootstrap Center Navbar Items
You will need to modify some CSS rules for Navbar component. So add a class center to nav.navbar and the following rules:
.navbar.center .navbar-inner {
text-align: center;
}
.navbar.center .navbar-inner .nav {
display:inline-block;
float: none;
}
Working demo (Bootstrap 3.3.7)
How to center nav-items in Bootstrap?
Use the flexbox and margin utils responsively...
Bootstrap 4 alpha 6
http://codeply.com/go/YvzHvQQRAs (center brand & links)
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" 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="d-md-flex d-block flex-row mx-md-auto mx-0">
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse mr-auto" id="navbarNavAltMarkup">
<div class="navbar-nav">
<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>
</div>
</div>
</nav>
Bootstrap 4.1
https://www.codeply.com/go/sTJUthyswN (center brand, align left on mobile)
EDIT..
The answer is still basically the same. Use mx-auto to center.
http://codeply.com/go/mycC5z8lpJ (center links, brand left)
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" 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>
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav mx-auto">
<a class="nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-link" href="#">Features</a>
<a class="nav-link" href="#">Pricing</a>
<a class="nav-link disabled" href="#">Disabled</a>
</div>
</div>
</nav>
If you want the links exactly centered in the viewport, see the 2nd example here: http://www.codeply.com/go/RCBftzZCD8
Other Bootstrap 4 Navbar alignment examples
Also see...
Center an element in Bootstrap 4 Navbar
Center Navbar links without brand pushing it to the right in Bootstrap 4?
How to center navbar in Bootstrap 4 using Flexbox
How to position navbar contents in Bootstrap 4
Bootstrap 4 Navbar align logo center and toggle icon on the left
Bootstrap: center some navbar items
You just needed a couple of styles to get the behaviour that I think you wanted. It looks like you were going the display:inline-block route to center the elements, so I'll just continue along that approach. To your existing styles, add/modify definitions so that these styles are included:
.nav.nav-center {
margin:0;
float:none;
}
.navbar-inner{
text-align:center;
}
With that, the two options should move to the exact center of your navigation bar. Here's a JSFiddle example to show you what this would look like. I hope this is what you were looking for! If not, let me know and I'll be happy to help further.
Bootstrap navbar items not getting in center
Please view the snippet in full page mode.
I have only tried to help in what you have asked, there are still some issues which I have not tried to solve as you are trying to learn.
Below are the changes:
1 Added justify-content-md-center in below tag
<div class="collapse navbar-collapse justify-content-md-center" id="navbarTogglerDemo01">
2 Adjusted above tag's children to have two ul only
3 added ml-auto css class in above two ul tags
/* #navbarNav {
padding-bottom: 36px;
padding-top: 54px;
} */
.nav-img {
width: auto;
max-width: 100%;
max-height: 69px;
}
.navbar-custom {
background-color: #000000;
}
.title-div {
position: absolute;
z-index: 1;
top: 461px;
}
.home-heading {
background-color: rgba(255, 255, 255, 0.5);
color: black;
}
.main-image {
/* background-image: url(../img/ill.jpg); */
width: 100%;
height: 82%;
position: relative;
z-index: -1;
}
.navbar {
padding: 100px;
background-color: black;
}
.navbar-brand {
margin: 0px 0px 0px 30px;
}
.navbar-toggler {
filter: invert(100%);
}
.navbar-nav li {
float: left;
}
.nav-item a {
display: block;
text-align: center;
}
.instagram {
filter: invert(100%);
padding: 6px;
}
.facebook {
filter: invert(100%);
padding: 6px;
}
.email {
filter: invert(100%);
padding: 6px;
}
.phone-call {
filter: invert(100%);
}
/* .mid{
margin: 0px 0px 0px 200px;
padding: 0px 0px 0px 235px;
} */
ul {
list-style-type: none;
padding: 0px;
margin: 0px;
background-color: #000;
}
li {
float: left;
/* border-right: 1px solid #bbb; */
}
li:last-child {
border-right: none;
}
li a {
display: block;
color: white;
text-align: right;
padding: 14px 16px;
text-decoration: none;
}
.logo {
/* width: 133px;
height: 69px; */
width: auto;
max-width: 100%;
max-height: 69px;
margin-top: 9px;
margin-bottom: 17px;
margin-left: 16px;
}
.bdy-img {
width: 45% !important;
height: auto !important;
padding-top: 96px;
padding-left: 75px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display&family=Roboto:wght@300&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital@1&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<title>Document</title>
</head>
<body>
<!-- <nav class="navbar navbar-expand-lg navbar-custom " >
<img class="navbar-brand nav-img" src="img/logo-nav.jpg" alt="Sample Image">
<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 justify-content-center" >
<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="#">Disabled</a>
</li>
</ul>
</div>
</nav> -->
<nav class="navbar navbar-expand-lg">
<a class="navbar-brand" href="#">
<img src="img/logo-nav.jpg" class="logo" alt="Logo Img" loading="lazy" />
</a>
<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 justify-content-md-center" id="navbarTogglerDemo01">
<ul class=" navbar-nav ml-auto">
<li>
<a class="nav-link" href="">Shop</a>
</li>
<li>
<a class="nav-link" href=""> I Love Lables</a>
</li>
<li>
<a class="nav-link" href=""> About</a>
</li>
<li>
<a class="nav-link" href=""> How It Works</a>
</li>
<li>
<a class="nav-link" href=""> Charities</a>
</li>
<li>
<a class="nav-link" href=""> Sell With Us</a>
</li>
<li>
<a class="nav-link" href=""> News</a>
</li>
<li>
<a class="nav-link" href=""> Designers</a>
</li>
<li>
<a class="nav-link" href=""> Contact</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="">
<img src="nav-icons/instagram.png" class="instagram" width="50" height="50" alt="Sample Image" loading="lazy" />
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">
<img src="nav-icons/email.png" class="email" width="50" height="50" alt="Sample Image" loading="lazy" />
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">
<img src="nav-icons/facebook.png" class="facebook" width="50" height="50" alt="Sample Image" loading="lazy" />
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">
<img src="nav-icons/phone-call.png" class="phone-call" width="50" height="50" alt="Sample Image" loading="lazy" />
</a>
</li>
</ul>
</div>
</nav>
<!-- <div class="main-bdy-div align-items-center" >
<div class="container-fluid title-div home-heading">
<h1 class="" style="font-size: calc(3.6vw + 1rem); font-family: 'Playfair Display', serif;" >I love labels</h1>
</div>
<div class="container-fluid title-div " style="width: 49%; background-color: rgba(255, 255, 255, 0.5); ">
<h1 class="" style="text-align: justify; font-size: calc(1.44vw + 1rem); font-family: 'Cormorant Garamond', serif;">New Zealand's
Premier Boutique for Quality Preloved Designer Fashion</h1>
</div>
<img class="main-image" src="img/ill.jpg" alt="Sample Image">
</div> -->
<div class="main-img">
<img class="main-image" src="img/ill.jpg" alt="Sample Image">
</div>
<div class="container-fluid justify-content-start">
<div class="container-fluid title-div " style=" text-align: center; width: 28%; background-color: rgba(255, 255, 255, 0.5); ">
<h1 class="" style="font-size: calc(3.6vw + 1rem); font-family: 'Playfair Display', serif;">I love labels
</h1>
</div>
<div class="container-fluid title-div justify-content-between " style="width: 49%; background-color: rgba(255, 255, 255, 0.5); top: 576px; ">
<h1 class="" style="text-align: justify; font-size: calc(1.44vw + 1rem); font-family: 'Cormorant Garamond', serif;">
New Zealand's Premier Boutique for Quality Preloved Designer Fashion</h1>
</div>
</div>
<!-- main body section -->
<div class="container-fluid">
<div>
<img class="bdy-img" src="img/IMG_0018.jpg" style=" width: 100%;
height: auto;" alt="Sample Image">
<div class="d-flex align-items-start justify-content-end">
<h1 style="text-align: center;">Our Unique Approach.</h1>
</div>
</div>
</div>
<!-- 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://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</body>
</html>Center an element in Bootstrap Navbar
In Bootstrap 4, there is a new utility known as .mx-auto. You just need to specify the width of the centered element.
Ref: http://v4-alpha.getbootstrap.com/utilities/spacing/#horizontal-centering
Diffferent from Bass Jobsen's answer, which is a relative center to the elements on both ends, the following example is absolute centered.
Here's the HTML:
<nav class="navbar bg-faded">
<div class="container">
<ul class="nav navbar-nav pull-sm-left">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 4</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-logo mx-auto">
<li class="nav-item">
<a class="nav-link" href="#">Brand</a>
</li>
</ul>
<ul class="nav navbar-nav pull-sm-right">
<li class="nav-item">
<a class="nav-link" href="#">Link 5</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 6</a>
</li>
</ul>
</div>
</nav>
And CSS:
.navbar-logo {
width: 90px;
}
In Bootstrap 4, is it possible to center the navbar brand and align some text to the left of brand?
In Bootstrap 4 navbar is using flexbox. It helps in centering the barnd name or any name that you need to get centered. so the it can be centered using mx-auto. Then left right menus will not need floats.
<nav class="navbar navbar-expand-md navbar-fixed-top navbar-dark bg-dark main-nav">
<div class="container">
<ul class="nav navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">products</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Hair products</a>
</li>
</ul>
<ul class="nav navbar-nav mx-auto">
<li class="nav-item"><a class="nav-link" href="#">VIRTUAL BEAUTY</a></li>
</ul>
<ul class="nav navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact Us</a>
</li>
</ul>
</div> </nav>
This will give you a nav bar like the image below.
Reference image from: Center an element in Bootstrap 4 Navbar
Here you can see the actual viewport center is different from the center that brand name is located at. Thats because it takes center in respective to the left and right ends of navigation bar.
The following code can be used to overcome this issue. BY using position absolute.
.abs-center-x {
position: absolute;
left: 50%;
transform: translateX(-50%); }
Hope this helps.
Follow this link It much clearly illustrates the way to do your work.
mx-auto to center navbar- https://www.codeply.com/go/J9rL11Tf7h
Navbar center and absolute position- https://www.codeply.com/go/BC2gFdZ9fb
Related Topics
Make Text in Select Element Wrap When Too Long
CSS Positioning Elements Next to Each Other
Understanding Display:Table-Cell; Functioning
How Add Class to Parent in Angular Application
Keep Width When Using Letter-Spacing on Hover
Hotlinking My Cascading Style Sheets
Is There a CSS Selector for the First Child, Taking Text Nodes into Account
Css-Selector for Multiple Elements
Differencebetween * and *|* in CSS
How to Compile a Directory Full of Less CSS Files to CSS
How to Make a Link Inside a Div Fill the Entire Space Inside the Div
Bootstrap Cards with 100% Height and Margin Bottom
Nth-Child with Mod (Or Modulo) Operator
How to Create Custom Tooltips with CSS Pseudoelements
Why Do Inline Elements Behave Like Block Level Elements When Floated
Bootstrap 4.1 - to Get Grid System Only
Flex-Grow Not Working as Expected (Flex Items Don't Have the Widths I Expect)