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
Related
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/
I am trying to show below look but not working.I have added all css and js but not working.
How to align properly nav bar and logo for mobile view and desktop and tap.
Demo: https://stackblitz.com/edit/angular-7-bootstrap-navbar-ujihha?file=src/styles.css
header.component.html:
<div id="page">
<header class="header-container">
<div class="container">
<div class="top-row">
<div class="row">
<div class="col-md-2 col-sm-6 col-xs-6">
<div id="logo">
<!--<img src="images/logo.png" alt="logo">-->
<span>Resort</span>
</div>
</div>
<div class="col-sm-6 visible-sm">
<div class="text-right"><button type="button" class="book-now-btn">Book Now</button></div>
</div>
<div class="col-md-8 col-sm-12 col-xs-12 remove-padd">
<nav class="navbar navbar-default">
<div class="navbar-header page-scroll">
<button data-target=".navbar-ex1-collapse" data-toggle="collapse" class="navbar-toggle" type="button">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navigation navbar-collapse navbar-ex1-collapse remove-space">
<ul class="list-unstyled nav1 cl-effect-10">
<li><a data-hover="Home" class="active"><span>Home</span></a></li>
<li><a data-hover="About" href="about.html"><span>About</span></a></li>
<li><a data-hover="Rooms" href="rooms.html"><span>Rooms</span></a></li>
<li><a data-hover="Gallery" href="gallery.html"><span>Gallery</span></a></li>
<li><a data-hover="Contact Us" href="contact.html"><span>contact Us</span></a></li>
</ul>
</div>
</nav>
</div>
<div class="col-md-2 col-sm-4 col-xs-12 hidden-sm">
<div class="text-right"><button type="button" class="book-now-btn">Book Now</button></div>
</div>
</div>
</div>
</div>
</header>
<!--back to top--->
<a style="display: none;" href="javascript:void(0);" class="scrollTop back-to-top" id="back-to-top">
<span><i aria-hidden="true" class="fa fa-angle-up fa-lg"></i></span>
<span>Top</span>
</a>
</div>
Using Bootstrap 4.3 to make a responsive dashboard, I ran into a problem with medium screens. When I resize Google chrome to check the page in different sizes, sadly, the bootstrap toggle button appears when chrome is resized to medium. This is the case with other browsers as well. The following picture is my chrome showing the page. As in the picture, the screen is not that small for the content to disappear and for the toggle button to show up:
The followings are my codes. I would be really grateful if you help me solve the problem.
#media (max-width: 768px) {
.sidebar {
position: static;
height: auto;
}
.top-navbar {
position: static;
}
}
.top-nav-height {
height: 3em!important;
}
.sidebar {
box-sizing: border-box;
background-color: #34495e !important;
height: 100vh;
}
<body dir="rtl">
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-light p-0 m-0">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#goNavBar" aria-controls="goNavBar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="goNavBar">
<div class="container-fluid">
<div class="row">
<!-- Sidebar -->
<div class="col-md-2 col-xl-2 col-md-5 sidebar p-0 m-0">
ِDashboard
<div id="NavBarParent">
<ul class="navbar-nav flex-column">
<li class="nav-item rtl d-block">
<i class="fas fa-home ml-2"></i>Home
</li>
</ul>
</div>
</div>
<!-- Sidebar Done -->
<!-- Top Bar -->
<div class="col-md-10 col-xl-10 col-md-7 py-3 top-navbar">
<div class="row align-items-center">
<div class="col-md-4 col-sm-4 col-lg-5 col-xl-5">
<h4></h4>
</div>
<div class="col-md-5 col-sm-4 col-lg-5 col-xl-5">
</div>
<div class="col-md-3 col-sm-4 col-lg-2 col-xl-2" >
<ul class="navbar-nav">
<li><span class="fa-layers fa-fw fa-lg" >
<i class="fas fa-envelope py-1" style="color: #34495e"></i>
<span class="fa-layers-counter fa-lg bullet-sizing">45</span>
</span></li>
<li><span class="fa-layers fa-fw fa-lg mr-2" >
<i class="fas fa-bell py-1" style="color: #34495e"></i>
<span class="fa-layers-counter bullet-sizing fa-lg">2</span>
</span></li>
<li class="nav-item mr-auto"><i class="fas fa-sign-out-alt fa-lg" style="color: #34495e"></i></li>
</ul>
</div>
</div>
</div>
<!-- Top Bar Done -->
</div>
</div>
</div>
</nav>
<!-- Navigation Done -->
For the sake of convenience, I deleted some lines from sidebar menu items, as I think they don't have anything to do with the sizing and toggle button.
Wow, the problem was on the very first line. Changing the 'navbar-expand-lg' on the first line of code into 'navbar-expand-sm' solved my issue.
You need to change navbar-expand-(value)Ex lg/md/sm or custom.you can try this i have added with your code.
<body dir="rtl">
<!-- Navigation -->
<nav class="navbar navbar-expand-md navbar-light p-0 m-0">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#goNavBar" aria-controls="goNavBar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="goNavBar">
<div class="container-fluid">
<div class="row">
<!-- Sidebar -->
<div class="col-md-2 col-xl-2 col-md-5 sidebar p-0 m-0">
ِDashboard
<div id="NavBarParent">
<ul class="navbar-nav flex-column">
<li class="nav-item rtl d-block">
<i class="fas fa-home ml-2"></i>Home
</li>
</ul>
</div>
</div>
<!-- Sidebar Done -->
<!-- Top Bar -->
<div class="col-md-10 col-xl-10 col-md-7 py-3 top-navbar">
<div class="row align-items-center">
<div class="col-md-4 col-sm-4 col-lg-5 col-xl-5">
<h4></h4>
</div>
<div class="col-md-5 col-sm-4 col-lg-5 col-xl-5">
</div>
<div class="col-md-3 col-sm-4 col-lg-2 col-xl-2" >
<ul class="navbar-nav">
<li><span class="fa-layers fa-fw fa-lg" >
<i class="fas fa-envelope py-1" style="color: #34495e"></i>
<span class="fa-layers-counter fa-lg bullet-sizing">45</span>
</span></li>
<li><span class="fa-layers fa-fw fa-lg mr-2" >
<i class="fas fa-bell py-1" style="color: #34495e"></i>
<span class="fa-layers-counter bullet-sizing fa-lg">2</span>
</span></li>
<li class="nav-item mr-auto"><i class="fas fa-sign-out-alt fa-lg" style="color: #34495e"></i></li>
</ul>
</div>
</div>
</div>
<!-- Top Bar Done -->
</div>
</div>
</div>
</nav>
<!-- Navigation Done -->
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 have some following HTML codes with Twitter bootstrap...
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="col-sm-4">
<img src="img/logo.png" class="img-responsive"/>
</div>
<div class="col-sm-8 col-sm-12">
<div class="col-sm-3 pull-right">
<ul class="social pull-right ul-social-link">
<li style="background: none"> <i class=" fa fa-facebook"> </i> </li>
<li style="background: none"> <i class="fa fa-twitter"> </i> </li>
<li style="background: none"> <i class="fa fa-google-plus"> </i> </li>
</ul>
</div>
<div class="col-sm-8 pull-right">
<div class="col-md-5 pull-right text-right">
<p class="contact"><span class="glyphicon glyphicon-phone-alt" aria-hidden="true"></span> +912345678910</p>
</div>
<div class="col-sm-5 pull-right">
<p class="contact"><span class="glyphicon glyphicon-envelope" aria-hidden="true"></span> mail#indtechhc.com</p>
</div>
</div>
<div class="clearfix"></div>
<div class="col-sm-12">
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home<li>
<li>We are<li>
<li>Products<li>
<li>About us<li>
<li>Contact us<li>
</ul>
</div>
</div>
</div>
</div>
</nav>
But it is not working when I trigger the collapse button! please advise.
Make sure you include jquery.js and that it is before bootstrap.min.js