MY body just wont alight with the nav. there are some margins on the container, when I try to set up mx-0 the space just goes to the left. it is just no taking the whole with of the body. I am not sure what I am missing. I tried putting the nav inside the main container but still doesnt work.
[![<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
LightQUIZ
<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 px-3 justify-content-between" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#"> HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CATEGORIES</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">TOP QUIZES</a>
</li>
</ul>
<div class="d-flex flex-column flex-md-row align-items-start">
<form class="form-inline mx-lg-2 d-flex flex-row">
<input class="form-control px-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>
<button class="btn btn-success mx-md-2 my-sm-2 my-md-0">LOGIN</button>
<button class="btn btn-danger">SIGNUP</button>
</div>
</div>
</nav>
<main class="container">
<section class="home-header row pt-4">
<div class=" col-md-8 jumbotron">
<h2 class="display-5">Hello, world!</h2>
<p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to
featured content or information.</p>
<hr class="my-4">
<p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
<p class="lead">
<a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</p>
</div>
<div class="col-md-4 d-flex flex-column">
<h4 class="text-center">LightQuiz LeaderBoard</h4>
<ul class="list-group leaderboard">
<li class="list-group-item d-flex justify-content-between align-items-center">
ABC
<span class="badge badge-pill badge-danger">55</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
ABC
<span class="badge badge-primary badge-pill">55</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
ABC
<span class="badge badge-primary badge-pill">55</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
ABC
<span class="badge badge-primary badge-pill">55</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
ABC
<span class="badge badge-primary badge-pill">55</span>
</li>
</ul>
</div>
</section>
</main>][1]][1]
The purpose of the container is so it will add space to either side in case the screen becomes too large in width. Try making your screen really small in width, then resize until it becomes large. It should have breakpoints where the spacing will change.
The nav element you have uses other classes that do not change the side spacing the same way as the container.
If you do not want space on either side of you main element, simply remove the container class.
If you want to make the navbar adopt the same side spacing as the main element, add the container class to the nav element.
Updated answer after reading your comment here:
Bootstrap also provides a "fluid" container class that makes it span "the entire width of the viewport". From the latest documentation for version 5:
<div class="container-fluid">
Simply, use class container-fluid instead of container on the main body.
Example:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
LightQUIZ
<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 px-3 justify-content-between" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#"> HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CATEGORIES</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">TOP QUIZES</a>
</li>
</ul>
<div class="d-flex flex-column flex-md-row align-items-start">
<form class="form-inline mx-lg-2 d-flex flex-row">
<input class="form-control px-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>
<button class="btn btn-success mx-md-2 my-sm-2 my-md-0">LOGIN</button>
<button class="btn btn-danger">SIGNUP</button>
</div>
</div>
</nav>
<main class="container-fluid">
<section class="home-header row pt-4">
<div class=" col-md-8 jumbotron">
<h2 class="display-5">Hello, world!</h2>
<p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to
featured content or information.</p>
<hr class="my-4">
<p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
<p class="lead">
<a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</p>
</div>
<div class="col-md-4 d-flex flex-column">
<h4 class="text-center">LightQuiz LeaderBoard</h4>
<ul class="list-group leaderboard">
<li class="list-group-item d-flex justify-content-between align-items-center">
ABC
<span class="badge badge-pill badge-danger">55</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
ABC
<span class="badge badge-primary badge-pill">55</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
ABC
<span class="badge badge-primary badge-pill">55</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
ABC
<span class="badge badge-primary badge-pill">55</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
ABC
<span class="badge badge-primary badge-pill">55</span>
</li>
</ul>
</div>
</section>
</main>
</body>
https://jsfiddle.net/mkpu9wcd/
For more info, read: https://getbootstrap.com/docs/5.0/layout/containers/
Related
I have an dropdown mega menu.It works fine as per our requirment.I would like to know how to open dropdown menu when I click on Menu instead of "hover".Please check the below code and advise how to do this.
<nav class="navbar navbar-expand-lg">
<div class="container"><img src="img/logo.png" alt="Obaju logo" class="d-none d-md-inline-block"><img src="img/logo-small.png" alt="Obaju logo" class="d-inline-block d-md-none"><span class="sr-only">Obaju - go to homepage</span>
<div class="navbar-buttons">
<button type="button" data-toggle="collapse" data-target="#navigation" class="btn btn-outline-secondary navbar-toggler"><span class="sr-only">Toggle navigation</span><i class="fa fa-align-justify"></i></button>
<button type="button" data-toggle="collapse" data-target="#search" class="btn btn-outline-secondary navbar-toggler"><span class="sr-only">Toggle search</span><i class="fa fa-search"></i></button><i class="fa fa-shopping-cart"></i>
</div>
<div id="navigation" class="collapse navbar-collapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item">Home</li>
<li class="nav-item dropdown menu-large">Men<b class="caret"></b>
<ul class="dropdown-menu megamenu">
<li>
<div class="row">
<div class="col-md-6 col-lg-3">
<h5>Clothing</h5>
<ul class="list-unstyled mb-3">
<li class="nav-item">T-shirts</li>
<li class="nav-item">Shirts</li>
<li class="nav-item">Pants</li>
<li class="nav-item">Accessories</li>
</ul>
</div>
<div class="col-md-6 col-lg-3">
<h5>Shoes</h5>
<ul class="list-unstyled mb-3">
<li class="nav-item">Trainers</li>
<li class="nav-item">Sandals</li>
<li class="nav-item">Hiking shoes</li>
<li class="nav-item">Casual</li>
</ul>
</div>
I am trying to create a responsive admin panel
<nav class="navbar navbar-expand-lg navbar-light bg-light static-top">
<a [routerLink]="['/']"><img src="../../../assets/img/monash-logo-mono#2x.png" class="logo" /></a>
<button class="navbar-toggler" type="button" (click)="toggle()" 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="navbar-light bg-light collapse navbar-collapse" [ngClass]="{'show': !isCollapsed}" id="navbarNav">
<div class="d-flex justify-content-between">
<div>
<form class="navbar-form navbar-right" role="search" method="get" id="searchform" action="">
<div class="form-group">
<input name="s" id="s" type="text" class="search-query form-control" autocomplete="off"
placeholder="Search...">
</div>
</form>
</div>
</div>
</div>
</nav>
<main class="content">
<div class="row" style="height: 100%;">
<div class="col-3" style="background: blue;">
<nav class="container">
<div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab"
aria-controls="v-pills-home" aria-selected="true">Home</a>
<a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab"
aria-controls="v-pills-profile" aria-selected="false">Profile</a>
<a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab"
aria-controls="v-pills-messages" aria-selected="false">Messages</a>
<a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab"
aria-controls="v-pills-settings" aria-selected="false">Settings</a>
</div>
</nav>
</div>
<div class="col-9">
<router-outlet></router-outlet>
</div>
</div>
</main>
<!-- TODO: footer -->
Trying to create a panel something like this
When switch to the small screen the drawer should be overlap with an icon button to click
This navigation bar uses Bootstrap 4. For medium screens (768px to 991px), I would like the search bar and button to be moved to the second line, as it is on large screens and above. Currently, on medium screens the search bar squishes up next to the other navigation links:
How it looks on large/extra large screens:
Updated code per first answer suggestion:
<nav class="navbar navbar-expand-md navbar-fixed-top navbar-dark bg-navbar">
<div class="container">
<a class="navbar-brand" href="/" style="align-children: middle">
<span class="" aria-hidden="true"></span>
Example
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#site-nav" aria-expanded="false" aria-label="Toggle navigation">
<span class="sr-only">Toggle navigation</span>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse ml-auto" id="site-nav">
<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="/agencies/">Agencies</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/meetings/">Meetings</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/agenda/">Agenda</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/documents/">Documents</a>
</li>
</ul>
<form class="form-inline mt-3 mb-3" role="search" action="/search/" method="post">
<div class="btn-group">
<input type="text" name="request" class="form-control" placeholder="Search Documents">
<button type="submit" class="btn search-button">Search</button>
</div>
</form>
</div>
</div>
</nav>
You can use the responsive flexbox direction utils. For example, flex-column flex-xl-row on the navbar-collapse.
<nav class="navbar navbar-expand-md fixed-top navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="/" style="align-children: middle">
<span class="" aria-hidden="true"></span>
Example
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#site-nav" aria-expanded="false" aria-label="Toggle navigation">
<span class="sr-only">Toggle navigation</span>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse ml-auto align-items-start align-items-xl-center flex-column flex-xl-row" id="site-nav">
<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="/agencies/">Agencies</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/meetings/">Meetings</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/agenda/">Agenda</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/documents/">Documents</a>
</li>
</ul>
<form class="form-inline ml-2" role="search" action="/search/" method="post">
<div class="form-group">
<input type="text" name="request" class="form-control" placeholder="Search Documents">
</div>
<button type="submit" class="btn search-button">Search</button>
</form>
</div>
</div>
</nav>
https://www.codeply.com/go/ZEyl77GzA8
Note: You're using navbar-expand-md so the Navbar will collapse into the toggler on sm. If you want to instead show the stacked menu/form on md you should reduce the navbar expand to sm.
Also see: Bootstrap 4 navbar with 2 rows
Put the contents of the search form in a btn-group, which should keep them together:
<form class="form-inline mt-3 mb-3" role="search" action="/search/" method="post">
<div class="btn-group" role="group" aria-label="Basic example">
<input type="text" name="request" class="form-control" placeholder="Search Documents">
<button type="submit" class="btn search-button">Search</button>
</div>
</form>
I'm struggling to figure out how to centre my logo in the middle of the page, whenever I try to do it with m-auto, it centres the logo between the other items... but not the page. I've tried the right:... method, but had no luck.
This is my code:
.navbar-nav {
flex-direction: row !important;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha256-eSi1q2PG6J7g7ib17yAaWMcrr5GrtohYChqibrV7PBE=" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.min.css" integrity="sha256-7O1DfUu4pybYI7uAATw34eDrgQaWGOfMV/8erfDQz/Q=" crossorigin="anonymous" />
<nav class="navbar navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" onclick="openSideNav()" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<ul class="navbar-nav m-auto">
<a class="navbar-brand" href="#">
<img src="http://pngimg.com/uploads/google/google_PNG19642.png" class="img-fluid" style="max-width:300px;" alt="">
</a>
</ul>
<div class="d-none d-md-block">
<ul class="navbar-nav ml-auto">
<li class="nav-item mr-2 pr-4 my-auto">
<i class="icon-phone mr-1"></i>0122323232323
</li>
<li class="nav-item">
<a class="nav-btn btn btn-lg btn-primary" href="#booking" onclick="openNav()">Book Today <i class="ml-2 icon-calendar"></i></a>
</li>
</ul>
</div>
</nav>
To center the logo, firstly to organise it slightly better you need to make it column not row. So the the phone number and the booking button stack vertically.
Then you need to separate the areas into columns and define their widths making the two sides equal and the center whatever is left over. i.e. left 25% middle 50% and right 25%.
Here is the snippet.
.navbar-nav {
flex-direction: column !important;
justify-content: center;
}
.side {
width: 25%;
}
.middle {
width: 50%;
display: flex;
justify-content: center;
}
.flexend {
display: flex;
justify-content: flex-end;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha256-eSi1q2PG6J7g7ib17yAaWMcrr5GrtohYChqibrV7PBE=" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.min.css" integrity="sha256-7O1DfUu4pybYI7uAATw34eDrgQaWGOfMV/8erfDQz/Q=" crossorigin="anonymous" />
<nav class="navbar navbar-light bg-light">
<div class="side">
<button class="navbar-toggler" type="button" data-toggle="collapse" onclick="openSideNav()" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="middle">
<div class="logo">
<a class="navbar-brand" href="#">
<img src="http://pngimg.com/uploads/google/google_PNG19642.png" class="img-fluid" style="max-width:300px;" alt="">
</a>
</div>
</div>
<div class="side flexend">
<div class="d-none d-md-block">
<ul class="navbar-nav ml-auto">
<li class="nav-item mr-2 pr-4 my-auto">
<i class="icon-phone mr-1"></i>0122323232323
</li>
<li class="nav-item">
<a class="nav-btn btn btn-lg btn-primary" href="#booking" onclick="openNav()">Book Today <i class="ml-2 icon-calendar"></i></a>
</li>
</ul>
</div>
</div>
</nav>
A similar question has already been asked: Center an element in Bootstrap 4 Navbar
I will answer it again because in this case there is a logo image.
<nav class="navbar navbar-light flex-row">
<div class="d-flex flex-fill">
<button class="navbar-toggler" type="button" data-toggle="collapse" onclick="openSideNav()" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="d-flex flex-fill justify-content-center">
<a class="navbar-brand" href="#">
<img src="http://pngimg.com/uploads/google/google_PNG19642.png" class="img-fluid" style="max-width:300px" alt="">
</a>
</div>
<div class="d-none d-md-flex flex-fill">
<ul class="navbar-nav ml-auto justify-content-end">
<li class="nav-item mr-2 pr-4 my-auto">
<i class="icon-phone mr-1"></i>0122323232323
</li>
<li class="nav-item">
<a class="nav-btn btn btn-lg btn-primary" href="#booking" onclick="openNav()">Book Today <i class="ml-2 icon-calendar"></i></a>
</li>
</ul>
</div>
</nav>
Also, check the docs for the correct Navbar structure because the way you're using the toggler, no expand class or navbar-collapse class isn't standard Navbar structure
https://www.codeply.com/go/8ik1wexpjI
I'm trying to code a navbar using bootstrap 4, that will show a collapsible button in xs screen sizes and below. I achieved this, however when the button is clicked, the nav links push the button and brand name down, and appear above them, within the navbar. I want them to appear below the navbar.
Can anybody help me with this?
<header>
<nav class="navbar navbar-default">
<div class="container-fluid bg-light ">
<div class="navbar-brand">
<a id="dominik" href="index.html"><h1>Food, LLC</h1></a>
</div>
<div class="pos-f-t">
<div class="collapse" id="navbarToggleExternalContent">
<div class="bg-light p-4">
</div>
<ul id="nav-list" class="nav navbar-nav navbar-collapse">
<li class="nav-item active">
<a class="nav-link" href="#">
<br>Chicken</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<br>Beef</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<br>Sushi</a>
</li>
</ul><!-- #nav-list -->
</div>
<nav class="navbar navbar-light bg-light d-sm-none">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</nav>
</div>
</div><!-- /.container-fluid -->
</nav>
</header>
you are not doing navbar as it is in Official Bootstrap Documentation, in addition, you are putting two nav inside each other which is not mentioned in their documentation.
You can easily copy the navbar code from the documentation as is and then change the names of URLs as you like.
Check this jsfiddle.
Update Code with this
<header>
<nav class="navbar navbar-default">
<div class="container-fluid bg-light ">
<div class="navbar-brand">
<a id="dominik" href="index.html"><h1>Food, LLC</h1></a>
</div>
<nav class="navbar navbar-light bg-light d-sm-none">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</nav>
<div class="pos-f-t">
<div class="collapse" id="navbarToggleExternalContent">
<div class="bg-light p-4">
</div>
<ul id="nav-list" class="nav navbar-nav navbar-collapse">
<li class="nav-item active">
<a class="nav-link" href="#">
<br>Chicken</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<br>Beef</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<br>Sushi</a>
</li>
</ul><!-- #nav-list -->
</div>
</div>
</div><!-- /.container-fluid -->
</nav>
</header>