In Bootstrap the items can be easily assigned to the left and right as it provides classes for the right and left. By default, left was set, but when it comes to aligning items to the center you have to align it by yourself as there are no in-built classes for doing this.
There are basically two ways by which you can align items to the center which are as follows:
- Using CSS
- Using Bootstrap
Using CSS: In this method, we will use a user-defined class to align items to the center. Then, we will use CSS to align items to the center. We have defined the class navbar-centre.
- Example:
<!DOCTYPE html>
<html>
<head>
<title>Align nav bar item into center</title>
<link rel="stylesheet" href=
integrity=
"sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous" />
<link rel="stylesheet" type="text/css" href=
<link rel="stylesheet" href=
<style>
.navbar-nav.navbar-center {
position: absolute;
left: 50%;
transform: translatex(-50%);
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-sm navbar-light bg-light">
<div class="container">
<a class="navbar-brand text-success" href="#">
Geeksforgeeks
</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=" nav navbar-nav navbar-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="#">
About
</a>
</li>
<li class="nav-item">
<a class="nav-link"
href="#">
About
</a>
</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
|
- Output:
By using Bootstrap: This method is a quick tricky that can save you from writing extra CSS. In this, we simply add another div tag above the div tag having class collapse navbar-collapse. This new div tag will also have the same collapse navbar-collapse class.
- Example:
<!DOCTYPE html>
<html>
<head>
<title>Align nav bar item into center</title>
<link rel="stylesheet" href=
integrity=
"sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous" />
<link rel="stylesheet" type="text/css" href=
<link rel="stylesheet" href=
</head>
<body>
<nav class="navbar navbar-expand-sm navbar-light bg-light">
<div class="container">
<a class="navbar-brand text-success" href="#">
Geeksforgeeks
</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"></div>
<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="#">
About
</a>
</li>
<li class="nav-item">
<a class="nav-link"
href="#">
Contact
</a>
</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
|
- Output:
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!