1 Correct answer
LEGEND
,
Aug 10, 2022
@Roopavathy wrote:
I want to align the horizontal menu in the centre of the header. Please help.
Just add 'w-100' to the ul tag:
<ul class="navbar-nav mr-auto d-flex justify-content-center w-100">
7
Replies
7
7
Replies
Community Expert
,
Navbar and Header are two separate elements. Two block-level elements can't occupy the same space at the same time. Decide which element you want on top.
Meanwhile, I put this together with Navbar/Search on top.
Mobile
Desktop
Code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap 4.5 Starter Page</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Bootstrap 4.5 on CDN-->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<style>
.bg-primary {background-color:#38578c !important;}
header h1 {
font-family:fantasy, copperplate, papyrus;
font-size:1.5rem;
}
</style>
</head>
<body class="bg-primary" style="padding-top:66px">
<nav class="navbar fixed-top navbar-expand-lg navbar-dark">
<a class="navbar-brand" href="#"><img src="images/bhc-logo.png" alt="logo" width="75" height="10"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent1" aria-controls="navbarSupportedContent1" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent1">
<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 dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown1">
<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>
</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-info my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<!--end navbar-->
<header class="container-fluid text-light">
<div class="row">
<div class="col-md-9">
<h1 class="p-1">BISHOP HEBER COLLEGE (Autonomous)</h1>
</div>
<div class="col-md-3">
<p class="p-1">Tiruchirappalli - 620017.</p>
</div>
</div>
</header>
<main class="container bg-light my-3 p-5">
<div class="row">
<div class="col-md-4">
<img class="img-fluid" src="https://dummyimage.com/600x300.jpg" alt="Placeholder">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam omnis voluptatem perferendis, unde consequuntur in natus error iste libero ea ipsam facilis nostrum mollitia modi quis ad labore aliquid esse! An ordinary
</p>
<p class="text-center">
<a href="https://example.com" class="btn-secondary btn-lg">Secondary</a>
</p>
</div>
<div class="col-md-4">
<img class="img-fluid" src="https://dummyimage.com/600x300.jpg" alt="Placeholder">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam omnis voluptatem perferendis, unde consequuntur in natus error iste libero ea ipsam facilis nostrum mollitia modi quis ad labore aliquid esse! An ordinary</p>
<p class="text-center">
<a href="https://example.com" class="btn-secondary btn-lg">Secondary</a>
</p>
</div>
<div class="col-md-4">
<img class="img-fluid" src="https://dummyimage.com/600x300.jpg" alt="Placeholder">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam omnis voluptatem perferendis, unde consequuntur in natus error iste libero ea ipsam facilis nostrum mollitia modi quis ad labore aliquid esse! An ordinary</p>
<p class="text-center">
<a href="https://example.com" class="btn-secondary btn-lg">Secondary</a>
</p>
</div>
</div>
</main>
<hr>
<footer class="container-fluid text-center text-light p-4">
<p>Some footer text here...</p>
</footer>
<!--Supporting scripts: first jQuery, then popper, then Bootstrap JS, etc...-->
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</body>
</html>
Hope that helps.
Community Expert
,
Two block-level elements can't occupy the same space at the same time.
By @Nancy OShea
As in
DIV container
DIV row
DIV column
H1
P
Are you implying that this is not possible?
AdChoices
