I know there are already a lot of questions asked about how to do this, but I am not understanding where exactly should I place the class in my code. I am using Bootstrap 5.1.3.
Also, could someone identify if I am doing/including any "extra stuff" that is redundant or I can remove.
My Code:
<nav class="navbar navbar-light bg-light fixed-top navbar-expand-md mr-auto">
<div class="container-fluid">
<div class="navbar-brand">
Shubham Salunke
</div>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item"> <a class="nav-link" href="#home"> Home </a> </li>
<li class="nav-item"> <a class="nav-link" href="#about"> About </a> </li>
<li class="nav-item"> <a class="nav-link" href="#projects"> Works </a> </li>
<li class="nav-item"> <a class="nav-link" href="#social"> Social Media </a> </li>
</ul>
</div>
</div>
</nav>
Related
This is for a course project.
I want the brand to stay left-aligned, but the other items to align to the right.
I can do it when there's no toggler, using justify-content-end
But with a toggler, nothing works.
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">tindog</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01"
aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Download</a>
</li>
</ul>
</div>
</div>
</nav>
Thanks
You can replace class=me-auto in the ul tag with class=ms-auto
I tried to make an responsive bootstrap navigation bar but something isn't working. I even copy/paste the bootstrap navbar example and still the button doesn't show the menu when I click on it.
Can you help me solve it ?
<div class="header">
<nav class="navbar navbar-expand-lg cust">
<div class="container">
<a class="navbar-brand pSize" href="#">
<img src="log.png" class="d-inline-block imgBrandSize">
Logo
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
<i class="fa-solid fa-bars fa-lg"></i>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Text</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Text</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Text</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
<div class="header">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand pSize" href="#">
<img src="log.png" class="d-inline-block imgBrandSize">
Logo
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-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="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Text</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Text</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Text</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
this is working properly. This is Bootstrap-5. Please use data-bs-toggle and data-bs-target insted of data-toggle and data-target
Please Check This Code
I hed Two changes in your code.
This Is Bootstrap v4.0.0
<div class="header">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand pSize" href="#">
<img src="log.png" class="d-inline-block imgBrandSize">
Logo
</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="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Text</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Text</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Text</a>
</li>
</ul>
</div>
</div>
</nav>
enter image description here
its been so nice with stack overflow.I am currently in a bootcamp of Angela Yu.using bootstrap is fun but in the navbar section i am facing some issues.I cant move my nav item to the right.in the ul ,I am using a class ml-auto but its not running.For your better experience I m putting full code-
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="">tinDog</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01" >
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#"> contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> download</a>
</li>
</ul>
</div>
</div>
i have put all other elements nicely!
can you guys give me a way or modify this code for my purpose?
The code above aligned it to the right for me when I tried it but I had to close out <nav>. In your code, you forgot to close it out with </nav>. Also, make sure you linked the bootstrap CDN properly by adding <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> in the head of your html.I fixed the toggle button which wasn't working in smaller screens. Here is my code with the bootstrap style sheet included. Copy it and run it to see if it works for you.
<nav class="navbar navbar-expand-sm fixed-top navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand text-white" href="#" >tinDog</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav ml-auto ">
<li class="nav-item">
<a class="nav-link text-light" href="#">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link text-light" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link text-light" href="#">Download</a>
</li>
</ul>
</div>
</div>
</nav>
I'm trying to get the image "travel.png" to be at the left side of my navbar, like it's hugging the left side of the screen.
(https://imgur.com/a/I0xFOWc)
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
<div class="container">
<a class="navbar-brand" href="travelindex.html">
<img src="travel.png" width="30" height="30" class="d-inline-block align-top" alt="">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="travelindex.html">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="reservations.html">Reservations</a>
</li>
<li class="nav-item">
<a class="nav-link" href="aboutus.html">About Us</a>
</li>
</ul>
</div>
</div>
I'm not really clear and what the issue is; testing your code it looks like the image is where its supposed to be, however, if you are referring to the image being somewhat centered on the screen, its because of the .container element you have inside the navbar, removing this would cause the navbar to use the full available width of the screen.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
<div class="container">
<a class="navbar-brand" href="travelindex.html">
<img src="https://via.placeholder.com/30" class="" alt="">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="travelindex.html">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="reservations.html">Reservations</a>
</li>
<li class="nav-item">
<a class="nav-link" href="aboutus.html">About Us</a>
</li>
</ul>
</div>
</div>
</nav>
Without container
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<!-- Without container -->
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
<a class="navbar-brand" href="travelindex.html">
<img src="https://via.placeholder.com/30" class="" alt="">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="travelindex.html">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="reservations.html">Reservations</a>
</li>
<li class="nav-item">
<a class="nav-link" href="aboutus.html">About Us</a>
</li>
</ul>
</div>
</nav>
I am using this code :
<nav class="navbar navbar-expand-md navbar-light bg-faded">
<a class="navbar-brand nav-space" href="#top">
<img src="img/favicon.png" width="30" height="30" class="d-inline-block align-top" alt="random image">
title
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#top">random <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">random</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">random</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">random</a>
</li>
</ul>
</div>
</nav>
for my project. However, the color of the navbar is all white, while the examples on https://getbootstrap.com has a greyish navbar. I have already included all bootstrap files.What am I doing wrong? and also, would it be possible to acquire the previous bootstrap 3 navbar styling?
https://imgur.com/a/kXrn4
Use bg-light as a class in the nav tag.