Guys i am early stage in development of website. I made this image in photoshop and applied a logo in website with navbar for a test. I am not getting results right because when i zoom in image is blurry and it is being so big I want it to be same size even when i zoom in. Please Help
Here's my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css?family=Cabin" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Website</title>
</head>
<body>
<div class="text-center justify-content-center">
<img src="Untitled-1.png" class="img-fluid">
</div>
<nav class="navbar navbar-expand-sm bg-light justify-content-center">
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link font-weight-bold" href="#">BLOG</a>
</li>
<li class="nav-item">
<a class="nav-link font-weight-bold" href="#">PROJECTS</a>
</li>
<li class="nav-item">
<a class="nav-link font-weight-bold" href="#">CERTIFICATES</a>
</li>
<li class="nav-item">
<a class="nav-link font-weight-bold" href="#">ABOUT ME</a>
</li>
<li class="nav-item">
<a class="nav-link font-weight-bold" href="#">CONTACT</a>
</li>
</ul>
</nav>
</body>
<style>
.nav-link
{
color: black;
}
.navbar-nav > li
{
padding-left:30px;
padding-right:30px;
}
.nav-link:hover
{
color: wheat;
}
</style>
</html>
I want logo to be of the same size when I zoom in but the logo is getting bigger when I zoom in as you can see in above picture.
Related
I'm new to BootStrap and this is my first time creating a website. So if there is any way to improve the code even further please let me know!
Question: So when I go to collapse the navbar my navbar-brand logo shifts to the bottom. How do I have the logo remain on the top left when I reduce the size of the screen? Please refer to the linked images to see the problem.
I would like the logo to remain overlapping the navbar which I have done as shown on the "not collapsed" attached image.
collapsed
not collapsed
logo
.navbar {
max-height: 80px;
}
.navbar-brand {
padding-top: 90px;
}
.navbar-toggler {
position: absolute;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Paradise Hotel</title>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<!-- Bootstrap CSS -->
<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"
/>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"
></script>
<script
src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"
></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"
></script>
<link rel="stylesheet" type="text/css" href="main.css"/>
</head>
<body>
<nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark">
<div class="container-fluid">
<!-- Logo -->
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img class="img-fluid" src="https://i.stack.imgur.com/i60Be.jpg" alt="Brand" width="180" height="180" >
</a>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbar-menu"
>
<span class="navbar-toggler-icon"></span>
</button>
</div>
<!-- menu items -->
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right" >
<li class="nav-item">
Rooms
</li>
<li class="nav-item">
Spa
</li>
<li class="nav-item">
Casino
</li>
<li class="nav-item">
Dining
</li>
<li class="nav-item">
Entertainment
</li>
<li class="nav-item">
Luxury Packages
</li>
<li class="nav-item">
Weddings
</li>
<li class="nav-item">
Contact Us
</li>
<li class="nav-item">
FAQ
</li>
</ul>
</div>
</nav>
</div>
</body>
</html>
The issue is that you are trying to load image that is too big into your nav-bar and then you are setting height and padding which are not neccessary. Simply resize image to fit your navbar.
Change width="80" height="80" and it will work.
I am trying to build my first webpage with Bootstrap, but the Bootstrap code I have added appears to be half responsive (e.g. the navbar seems to know it's been provided some kind of Bootstrap class, but other classes such as navbar-dark do nothing). I have also had to remove the bullet points from my ul myself even though the tutorial I'm following hasn't.
I feel as though my issue is how Bootstrap is linked to my HTML file, but remain stumped.
Thank you in advance. Here is my code...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>White Rose Crew Company Website</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link href="./recources/css/index.css" type="text/css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#aboutUs">ABOUT US</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#ourWork">OUR WORK</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#theCrew">THE CREW</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contactUs">CONTACT US</a>
</li>
</ul>
</nav>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</main>
</body>
</html>
You're using an old version of Bootstrap.
change the version to 4.4 to make this work
For bootstrap 3.4.1 you need to use
https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css
For bootstrap 4 you need to use
https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css
You write on bootstrap 4 syntax but link to bootstrap 3
For bootstrap 5 (latest beta) you need to use
https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css
Check documentation page
To apply bootstrap whichever version you want to apply please pick correct css file from any online CDN libraries. e.g.
https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#aboutUs">ABOUT US</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#ourWork">OUR WORK</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#theCrew">THE CREW</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contactUs">CONTACT US</a>
</li>
</ul>
</nav>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</main>
</body>
</html>
In question the classes which you have used relates to latest version of bootstrap. You should use the latest version.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>White Rose Crew Company Website</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#aboutUs">ABOUT US</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#ourWork">OUR WORK</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#theCrew">THE CREW</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contactUs">CONTACT US</a>
</li>
</ul>
</nav>
</main>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> </body>
</html>
I was designing a bootstrap navbar with a YouTube logo. Instead of aligning to right it is awkwardly placed in center. It seems the width of anchor is more than the size of image as result the image is pushed to right. How can I move it to right.
.navbar-brand{
font-family: Lilita One;
}
.navbar-top{
padding: 0 0;
}
.navbar{
padding: 0 5% 0 2%;
}
.yt-img{
width: 6%;
position: relative;
}
.yt-img-a{
width: 100%;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Education Side</title>
<!-- Tab Icon -->
<link rel="icon" href="images\Icon.ico">
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Lilita+One&family=Montserrat:wght#500&display=swap" rel="stylesheet">
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<!-- CSS -->
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<section id="title">
<div class="container-fluid navbar-top">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">Education<br>Side</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link yt-img-a" href="https://www.youtube.com/"><img class="yt-img" src="images\youtube.png" alt=""></a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Counselling</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Recruitment</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Contact</a>
</li>
</ul>
</div>
</nav>
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
</body>
</html>
enter image description here
Instead of setting the image width to 6%, use a px value such as 30px.
.yt-img{
width: 30px;
position: relative;
}
Demo
The ms-auto class makes your ul to be placed on the right side.
<ul class="navbar-nav ms-auto"> // ms-auto removed
Codepen Link: https://codepen.io/emmeiWhite/pen/JjRMxQw
Have fixed that and also added flex-grow:1 where ever needed :)
Full Code:
.navbar-brand{
font-family: Lilita One;
}
.navbar-top{
padding: 0 0;
}
.navbar{
padding: 0 5% 0 2%;
}
.yt-img{
width: 6%;
position: relative;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Education Side</title>
<!-- Tab Icon -->
<link rel="icon" href="images\Icon.ico">
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Lilita+One&family=Montserrat:wght#500&display=swap" rel="stylesheet">
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<!-- CSS -->
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<section id="title">
<div class="container-fluid navbar-top">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">Education<br>Side</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav flex-grow-1">
<li class="nav-item flex-grow-1">
<a class="nav-link yt-img-a" href="https://www.youtube.com/"><img class="yt-img" src="images\youtube.png" alt="Image Here"></a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Counselling</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Recruitment</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Contact</a>
</li>
</ul>
</div>
</nav>
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
</body>
</html>
I am attempting to make a bootstrap navbar that spans horizontally across the screen. However, when I attempt to do so, the navbar links stack vertically as I will show.
Here is the HTML / CSS I have implemented:
body{
padding-top: 90px;
background-color: #dbdbdb;
}
#navMain{
background-color: #db8606;
padding-left: 20px;
padding-right: 20px;
}
#navbar-brand-image{
height: 70px;
}
.nav-link{
font-size: 165%;
font-family: 'Sriracha', cursive;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1,shrink-to-fit=no">
<!-- CSS only -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght#1,500&family=Parisienne&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Sriracha&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/main.css">
<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar navbar-default fixed-top" id="navMain">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" id="navbar-brand-title" href="index.html"><img src="content/logo.png" id="navbar-brand-image" alt=""></a>
</div>
<ul class="nav navbar-nav">
<li>
<a class="nav-link" href="#">Home</a>
</li>
<li>
<a class="nav-link" href="about.html">About</a>
</li>
<li>
<a class="nav-link" href="about.html">About</a>
</li>
<li>
<a class="nav-link" href="about.html">About</a>
</li>
</ul>
</div>
</nav>
</body>
</html>
The result that I achieve looks like this:
Instead, I want the links to span horizontally.
I tried using the W3schools tutorial at this link and it doesn't even recreate the same as what's on the site.
Thanks for your help in advance!
Navbars are really not that special, except they are fluid (100% wide) and hidden by default when printing. If you place the navbar inside a column grid it will align responsively to its parent; it also works with dropdowns:
<div class="row">
<div class="col-9">main content</div>
<div class="col-3">
<nav>
<div class="navbar-header">
<a class="navbar-brand" id="navbar-brand" href="#">#</a>
</div>
<ul class="nav navbar-nav">
<li><a class="nav-link" href="#">Home</a></li>
<li><a class="nav-link" href="about.html">About</a></li>
<li>
<a class="dropdown-toggle" aria-expanded="false" data-toggle="collapse" href="#dropdown">dropdown</a>
<ul class="collapse" id="dropdown">
<li>item 1</li>
<li>item 2</li>
</ul>
</li>
<li><a class="nav-link" href="about.html">About</a></li>
</ul>
</nav>
</div>
</div>
http://jsfiddle.net/e2ur4wd0/
I am trying to extend the lines full width of a navbar instead of just covering the links. I think the code/stylesheet on line 7(include) is interfering with the html style tags below Lines 12-21. However if I remove this line then the background which is dark disappears and the links are displayed as a list instead.
<!doctype html>
<html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<style>
.navbar-nav a {
border-top:3px solid #DB9842;
border-bottom: 3px solid #DB9842;
}
</style>
<body>
<div>
<nav class="navbar-nav navbar-expand-sm bg-dark">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 3</a>
</li>
</ul>
</nav>
</div>
</body>
</html>
Remove A From Your Style Address
You had a border on the a link rather than the .navbar-nav. The a link style will only cover the clickable part, not the whole navigation area.
To solve this, if you remove the a from the style, as per the below code, it will span the entire width of the navigation.
.navbar-nav {
border-top:3px solid #DB9842;
border-bottom: 3px solid #DB9842;
}
Because the .navbar-nav style is on also on the ul element it was creating double borders. To prevent this I added the below code so that the border is only applied to the navigation area and not the ul.
.navbar-nav ul {border:none;}
<!doctype html>
<html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<style>
.navbar-nav {
border-top:3px solid #DB9842;
border-bottom: 3px solid #DB9842;
}
.navbar-nav ul {border:none;}
</style>
<body>
<div>
<nav class="navbar-nav navbar-expand-sm bg-dark">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 3</a>
</li>
</ul>
</nav>
</div>
</body>
</html>
Hope this may help you.
<!doctype html>
<html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<style>
.border_color{
border-top:3px solid #DB9842;
border-bottom: 3px solid #DB9842;
}
</style>
<body>
<div class="border_color">
<nav class="navbar-nav navbar-expand-sm bg-dark">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 3</a>
</li>
</ul>
</nav>
</div>
</body>
</html>