this is my first time using bootstrap, it seems that I didn't get why my items keep going outside of the container.
here's my current code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="frontend/libraries/bootstrap/css/bootstrap.css" />
<link rel="stylesheet" href="frontend/styles/main.css">
</head>
<body>
<div class="container">
<nav class="row navbar navbar-expand-lg navbar-light bg-primary">
<a href="#" class="navbar-brand">
<img src="frontend/images/Logo1.png" alt="Logo Nomads"/>
</a>
<button
class="navbar-toggler navbar-toggler-right"
type="button"
data-toggle="collapse"
data-target="#navb"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navb">
<ul class="navbar-nav ml-auto mr-3">
<li class="nav-item mx-md-2">
Home
</li>
<li class="nav-item mx-md-2">
Travel Packages
</li>
<li class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" id="navbardrop"
data-toggle="dropdown">
Services
</a>
<div class="dropdown-menu">
bink
bink
bink
</div>
</li>
<li class="nav-item mx-md-2">
Testimonial
</li>
</ul>
</div>
</nav>
</div>
<script src="frontend/libraries/jquery/jquery-3.6.1.min.js"></script>
<script src="frontend/libraries/bootstrap/js/bootstrap.js"></script>
</body>
</html>
and here's my CSS
.navbar-brand img {
max-height: 40px;
}/*# sourceMappingURL=main.css.map */
here's the screenshot of my live preview
and this is what I supposed to achieve
I have no idea if its my live preview settings or I'm doing something wrong
add margin:0; to '.container' div, it will fix it!
Related
the navbar toggler doesn't expand, I'm not sure what's the problem.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootsrap Installation</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark navbar fixed-top">
<div class="container-fluid">
<a class="navbar-brand" href=""> Coolboy </a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 ms-auto">
<li class="nav-item">
<a class="nav-link" href="">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Docs</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Download</a>
</li>
</ul>
</div>
</div>
</nav>
<h1> Hello! <br> Welcome to my webpade running on Bootstrap!</h1>
<h1>hey</h1>
</body>
</html>
when I resize my screen size the toggler shows up but it doesn't react.
I'm not sure if the problem is in my browser or with my code.
when I run the code in a couple implementing bootstrap 5 the button works (although the navbar covers the text for some reason?).
I just want to write a simple code in order to have the navbar toggler icon appeared on a html page. The toggler icon doesn't appear on the page, the three links are displayed which should be contained by the toggler icon instead. Here is the code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Navbar</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.js"></script>
</head>
<body>
<nav class="navbar-expand-sm bg-dark navbar-dark py-3 justify-content-between justify-content-sm-start">
<div class="container-fluid">
<a class="navbar-brand" href="#">Logo</a>
<button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#idCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="idCollapse">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
Thanks for your help in advance: Bazsa
<!DOCTYPE html>
<html lang="en">
<head>
<title>Navbar</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-xxl bg-dark navbar-dark py-3 justify-content-between justify-content-xxl-start">
<div class="container-fluid">
<a class="navbar-brand" href="#">Logo</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#idCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="idCollapse">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</div>
</nav>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>
You are missing the navbar class in your <nav>.
Change
<nav class="navbar-expand-sm bg-dark navbar-dark py-3 justify-content-between justify-content-sm-start">
to
<nav class="navbar navbar-expand-sm bg-dark navbar-dark py-3 justify-content-between justify-content-sm-start">
and your navbar should give a hamburger at small screens.
EDIT: There was an issue regarding your CDN link as well. The above snippet should work for you. :)
I have looked through other similar questions on this site yet could not interpret an answer for myself as I am a beginner regarding web development. I want to have the contact link in my navbar be aligned to the right of the navbar. However, mr-auto and everything else I have tried has not worked. mr-auto just makes it look like a hyperlink without moving it to the right hand side at all. The following is my html code and the css stylesheet is currently empty so I have nothing to show for that.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Me</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<!-- Left Corner Title -->
<a class="navbar-brand" href="#"> Portfolio v1 </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>
<!-- Nav Bar List -->
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<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="#"> Projects </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> About Me </a>
</li>
<!-- Right Corner -->
<li class="nav-item">
<a class="nav-link float-right" href="#"> Contact </a>
</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-success my-2 my-sm-0" type="submit">Search</button>
</form>
-->
</div>
</nav>
</body>
</html>
mr-auto adds an auto margin on the right side, thus pushing everything to the left. If you want to push everything on the right, you need to have ml-auto. Just replace that, and all your links will be aligned to the right (valid till BootStrap 4).
For any BootStrap 5 users, mr becomes me & ml becomes ms.
In Bootstrap 4, the mr-auto class puts an auto margin on the right side so the elements will move towards the left as there will be a margin on their right.
You have to use the ml-auto class on the Contact link so that it has a margin on its left side and so it will move towards the right. Also, take the contact link out of the <ul> for the ml-auto class to take effect.
Here's the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Me</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<!-- Left Corner Title -->
<a class="navbar-brand" href="#"> Portfolio v1 </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>
<!-- Nav Bar List -->
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav">
<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="#"> Projects </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> About Me </a>
</li>
</ul>
<!-- Right Corner -->
<!-- <li class="nav-item"> -->
<a class="nav-link ml-auto" href="#"> Contact </a>
<!-- </li> -->
</div>
</nav>
</body>
</html>
You can specify its position from right using the position property in CSS. But keep in mind when elements will collapse in the menu in navbar then it might look ugly. In that case use #media query to correct the position. Set proper id of li element containing contact and also place the link of your stylesheet below that of Bootstrap .
#rt{
position:absolute;
right: 10px;
}
If you feel confused by all this then please read about position and #media .
<ul class="navbar-nav ml-auto">
ml-auto - Right align
mx-auto - Center align
mr-auto - Left align
use the above class as per your requirement. :)
I am using bootstrap 4. The navbar looks like this on a large screen:
However, after it collapses on a small screen, it doesn't show the menu option when I click the menu button:
On a small screen, it should list the menu options once the button is clicked. How can I fix this issue? Here is my HTML and CSS code:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Resize</title>
<meta charset="utf-8"></meta>
<meta name="viewport" content="width=device-width, initial-scale=1" ></meta>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<style type="text/css">
.navbar-custom {
height: 54px;
background-color: #484848;
}
</style>
<body>
<nav class="navbar navbar-custom navbar-expand-lg navbar-dark fixed-top" id="mainNav">
<div class="container">
<a style="font: 20px Arial,sans-serif" class="navbar-brand js-scroll-trigger" href="#">HOME</a>
<button class="navbar-toggler navbar-toggler-right" 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 style="font: 15px Roboto,sans-serif" class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#about">LOREM</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#expertise">LOREM</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#portfolio">LOREM</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#contact">LOREM</a>
</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
You have some flaws...
1 - Need to add plugin jQuery before bootstrap plugin:
...
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
...
2 - You have specified closing tags for metatags. Metatags have no end tags.
It is not right:
<meta name="viewport" content="width=device-width, initial-scale=1"></meta>
It is right. Without </meta>:
<meta name="viewport" content="width=device-width, initial-scale=1">
3 - Remove the height rule height: 54px.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Resize</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.5.2/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<style type="text/css">
.navbar-custom {
background-color: #484848;
}
</style>
<body>
<nav class="navbar navbar-custom navbar-expand-lg navbar-dark fixed-top" id="mainNav">
<div class="container">
<a style="font: 20px Arial,sans-serif" class="navbar-brand js-scroll-trigger" href="#">HOME</a>
<button class="navbar-toggler navbar-toggler-right" 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 style="font: 15px Roboto,sans-serif" class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#about">LOREM</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#expertise">LOREM</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#portfolio">LOREM</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#contact">LOREM</a>
</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
A homework assignment asks to create a nav/navbar area that includes a div, with an image and a heading, that comes before the collapsible button.
I want the image and heading to be aligned side by side, and not disappear when the port/screen size changes.
<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.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="container-fluid">
<nav class="navbar navbar-expand-md navbar-dark bg-secondary">
<div>
<img src="steve_headset_sm5.jpg" class="navbar-brand" alt="steve_with_headset">
<h4>My Website 3.0</h4>
</div>
<button class="navbar-toggler" data-toggle="collapse" data-target="#navbarmenu">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarmenu">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
Main Content
</li>
<li class="nav-item">
Python
</li>
<li class="nav-item">
SQL
</li>
<li class="nav-item">
JavaScript
</li>
<li class="nav-item">
PHP
</li>
<li class="nav-item">
About
</li>
</ul>
</div>
</nav>
The issue, as seen in the code below, is that the image and heading stack in top of each other. Could anyone point me as to what I am doing wrong/should do?
You could use inline-block, but I would recommend learning about flexbox. Is this what you're looking for?
.nav-inline {
display: flex;
align-items: center;
}
.nav-inline h4 {
margin: 0;
}
<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.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="container-fluid">
<nav class="navbar navbar-expand-md navbar-dark bg-secondary">
<div class="nav-inline">
<img src="steve_headset_sm5.jpg" class="navbar-brand" alt="steve_with_headset">
<h4>My Website 3.0</h4>
</div>
<button class="navbar-toggler" data-toggle="collapse" data-target="#navbarmenu">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarmenu">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
Main Content
</li>
<li class="nav-item">
Python
</li>
<li class="nav-item">
SQL
</li>
<li class="nav-item">
JavaScript
</li>
<li class="nav-item">
PHP
</li>
<li class="nav-item">
About
</li>
</ul>
</div>
</nav>