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. :)
Related
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!
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 am trying to put a connect button on the top right corner of the screen on mobile and desktop before the hamburger menu. However all solutions I tried break the menu.
putting the connect button and hamburger button after menu break the toggle on mobile
putting the connect button after the collapsible menu work on desktop but break the layout on mobile
Is there a clean way to do this without resorting to using two button?
<nav class="navbar navbar-expand-md navbar-light bg-light px-3">
Name on Chain
<button type="button" class="btn btn-primary ms-auto me-2" id="connectWallet">Connect Wallet</button>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
Home
</li>
<li class="nav-item">
Guide
</li>
<li class="nav-item">
About
</li>
<li class="nav-item">
Contact
</li>
</ul>
</div>
</nav>
Try this code this will help you.
Wrap you toggle button and Connect button in a inline-form just like done in code give below or use flexbox.
<!doctype html>
<html lang="en">
<head>
<!-- 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://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-light bg-light px-3">
Name on Chain
<form class="form-inline">
<button class="btn btn-primary my-2 my-sm-0" type="submit">Connect Wallet </button>
<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>
</form>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<ul class="navbar-nav">
<li class="nav-item active">
Home
</li>
<li class="nav-item">
Guide
</li>
<li class="nav-item">
About
</li>
<li class="nav-item">
Contact
</li>
</ul>
</div>
</nav>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
</body>
</html>
Let me know this will help you.
Hello Curio I think you can use JavaScript HTML DOM to change the style of an html element within defined condition.
<!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">
<script src="jquery-3.5.1.js"></script>
<link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.min.css">
<script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
<title>Document</title>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-light bg-light px-3">
<div id="custom">
Name on Chain
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
style="float:right;">
<span class="navbar-toggler-icon"></span>
</button>
<button type="button" class="btn btn-primary ms-auto me-0" id="connectWallet" style="float:right;">Connect
Wallet</button>
</div>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
Home
</li>
<li class="nav-item">
Guide
</li>
<li class="nav-item">
About
</li>
<li class="nav-item">
Contact
</li>
</ul>
</div>
</nav>
</body>
<style>
.topright {
position: fixed;
width: 135px;
top: 10px;
}
.custom {
width: 100%
}
</style>
<script>
if (window.innerWidth > 850) {
$('#connectWallet').addClass('topright');
document.getElementById('connectWallet').style.left = "85%";
} else if (window.innerWidth > 766) {
$('#connectWallet').addClass('topright');
document.getElementById('connectWallet').style.left = "80%";
} else {
$('#connectWallet').removeClass('topright');
$('#custom').addClass('custom');
document.getElementById('connectWallet').style.left = "0";
}
</script>
</html>
I hope this will help solve your problem.
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>
I am working on teaching myself web development, and I thought what a better way than to start my own personal web page.
I have run into an issue working with Bootstrap 4 and the navbar.
I can get the list, and the icon to show up when the window shrinks, but I can't get it to expand, or toggle collapse. I've even copied and pasted some code from the bootstrap documentation to see what I'm doing wrong and even then it doesn't work.
I've tried on both firefox and chrome, and on both, I am still unable to toggle the collapse with the icon button.
Here's the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="Heath's Personal Website">
<meta name="keywords" content="heath, blandford, heath blandford">
<meta name="author" content="heath blandford">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--import bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- import google fonts lobster and open sans -->
<link href="https://fonts.googleapis.com/css?family=Lobster|Open+Sans" rel="stylesheet">
</head>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">navbar</a>
<!-- Navbar brand yo -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTop" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTop">
<ul class="navbar-nav mr-auto">
<li class="nav-item"><a class="nav-link" href="#about">About</a> </li>
<li class="nav-item"><a class="nav-link" href="#portfolio">Services</a> </li>
<li class="nav-item"><a class="nav-link" href="#contact">Contact</a> </li>
<li class="nav-item"><a class="nav-link" href="#social">Social Media</a> </li>
</ul>
</div>
</nav>
<body>
</body>
</html>
Although you've imported the Bootstrap CSS, you've neglected to import the required JavaScript.
Importing Bootstrap's JavaScript and the required dependencies (jQuery and Popper.JS) will cause your navigation to toggle correctly.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
This can be seen in the following:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="Heath's Personal Website">
<meta name="keywords" content="heath, blandford, heath blandford">
<meta name="author" content="heath blandford">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--import bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<!-- import google fonts lobster and open sans -->
<link href="https://fonts.googleapis.com/css?family=Lobster|Open+Sans" rel="stylesheet">
</head>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">navbar</a>
<!-- Navbar brand yo -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTop" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTop">
<ul class="navbar-nav mr-auto">
<li class="nav-item"><a class="nav-link" href="#about">About</a> </li>
<li class="nav-item"><a class="nav-link" href="#portfolio">Services</a> </li>
<li class="nav-item"><a class="nav-link" href="#contact">Contact</a> </li>
<li class="nav-item"><a class="nav-link" href="#social">Social Media</a> </li>
</ul>
</div>
</nav>
<body>
</body>
</html>