How to align elements in bootstrap navbar - html

I'm new in bootstrap how to put the logout link in the same line with picture and text
thanks
<nav class="navbar navbar-dark bg-dark justify-content-between">
<h4 class="navbar-brand">
Hello {{std_name}} Your rate is: {{std_rate}}
<img src="{% static 'images/star.png' %}" />
</h4>
logout
</nav>

You need to add align-items-center class in nav to center it vertically.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-dark bg-dark justify-content-between align-items-center">
<h4 class="navbar-brand">
Hello {{std_name}} Your rate is: {{std_rate}}
<img src="{% static 'images/star.png' %}" />
</h4>
logout
</nav>

Related

Drawing a line between a logo and text

I am using bootstrap 5 and I need to draw a thin line after the logo.png below. There should be no spaces between the line and logo
and still no spaces between the text and line.
<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- Body -->
<nav class="navbar navbar-expand-sm d-flex py-4">
<div class="d-flex align-items-center">
<div>
<a href="index" class="navbar-brand">
<img src="images/logo.png" />
</a>
<h2 class="my-auto font-size-medium">Zombie Testing</h2>
</div>
</div>
<nav>
How can i achieve this?
Use margin: 0 to get rid of the space between the elements
h2, hr {
margin: 0;
}
<nav class="navbar navbar-expand-sm d-flex py-4">
<div class="d-flex align-items-center">
<div>
<a href="index" class="navbar-brand">
<img src="https://picsum.photos/100" />
</a>
<hr>
<h2 class="my-auto font-size-medium">Zombie Testing</h2>
</div>
</div>
</nav>
simply add a border-top to the text by adding the border-top-class
<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- Body -->
<nav class="navbar navbar-expand-sm d-flex py-4">
<div class="d-flex align-items-center">
<div>
<a href="index" class="navbar-brand">
<img src="images/logo.png" />
</a>
<h2 class="my-auto font-size-medium border-top">Zombie Testing</h2>
</div>
</div>
</nav>
This will do :
<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- Body -->
<nav class="navbar navbar-expand-sm d-flex py-4">
<div class="d-flex align-items-center">
<div>
<a href="index" class="navbar-brand">
<img src="images/logo.png" style="padding-bottom:0px;padding-top:0px;marin-bottom:0px;margin-top:0px;" />
</a>
<hr style="padding-bottom:0px;padding-top:0px;margin:0px;">
<h2 style="padding-top:0px ;padding-bottom:0px ;margin-bottom:0px;margin-top:0px;">Zombie Testing</h2>
</div>
</div>
<nav>
check at this:https://jsfiddle.net/sugandhnikhil/t6p4dubo/12/

Logo is not appearing in navbar of bootstrap

I was trying bootstrap logo in navbar and the logo is not showing I have tried many things.
I am trying <nav> tag I am pasting my code also I am also not using any CSS:
<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>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<a class="navbar-brand" href="#">
<img class="lg" src="F:\html\musicbrand\logo1.jpg" alt="logo" style="width:40px;" />
</a>
</nav>
The issue maybe because of the image path
<img class="lg" src="F:\html\musicbrand\logo1.jpg" alt="logo" style="width:40px;" />
Make a folder name img within the folder where you have your html file
and change the src path to
<img class="lg" src="img/logo1.jpg" alt="logo" style="width:40px;" />
Thanks everyone who have answered.
I have been able to figure out the problem as giving full path was the problem.
Again thanks everyone.
Try this, but if you put your image under a folder at the same hierarchy then it will be good practise!
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img class="lg" width="130px" height="70px"src="{% static "F:\html\musicbrand\logo1.jpg"%}" style="position:relative;top:-10px">
</a>
</div>
</nav>

How to format a navbar logo and title using bootstrap

I am attempting to make a simple navbar/menu for my website using bootstrap. I have a logo and a title, but I can not get them to align correctly. They either stack or the title is shifted all the way to the right of the navbar (as is in the provided code.) I have included the code I feel is applicable. This is my first experience with anything front end, any help would be appreciated.
HTML
<header>
<nav class="navbar navbar-default">
<div class="container">
<a href="index.html" class="navbar-left">
<img
src="img/logo-placeholder.png"
height="115"
width="115"
alt="company logo"
/>
</a>
<a href="index.html" class="navbar-brand">
<h1>Title</h1>
</a>
</div>
</nav>
</header>
You can give img the classes d-inline-block and align-top. Check out the snippet.
<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">
<header>
<nav class="navbar navbar-default">
<div class="container">
<a class="navbar-brand" href="#">
<img src="img/logo-placeholder.png" height=115 width =115 alt="company logo" class="d-inline-block align-top">
<h1 class="d-inline-flex">Title</h1>
</a>
</div>
</nav>
</header>

How can I have a sticky/fixed navbar that hides div above it when scrolling down the page?

When at the top of the page, I want to list the phone number and email above the navbar. However, when you start to scroll down, I want the phone number and email to go away and just show the navbar. I have tried using fixed-top, however, it always hides the phone/email.
How can I achieve this across all device sizes?
I'm using Bootstrap 4.
<body class="d-flex flex-column h-100">
<header>
<div class="container">
<div class="float-right mt-1">
<i class="fas fa-envelope"></i><span class="ml-1 text-dark d-none d-sm-inline">info#example.com</span>
<i class="fas fa-phone-alt"></i><span class="ml-1 d-none d-sm-inline">+1 (555) 555-5555</span>
</div>
<br>
<nav class="navbar navbar-expand-lg fixed-top navbar-light bg-white mt-1">
<a class="navbar-brand" href="#">Example</a>
</nav>
</div>
</header>
You should be able to add the .sticky-top class to just the nav element and when you scroll past it on the page it should be the only item at the top.
<nav class="sticky-top navbar navbar-expand-lg fixed-top navbar-light bg-white mt-1">
<a class="navbar-brand" href="#">Example</a>
</nav>

Bootstrap 4 Beta Container fill

My current page looks like this: https://i.imgur.com/Lnuf5sM.png
I want a div container between top navbar and the footer.
So that all the green content is a div.
Because I want a centered box in the middle of the green content (It will be a login form). The thing is, that I don't know how to do that.
If im creating a <div> under my <nav>, the div behind the navbar (its not visible).
This is my Code and css:
<!doctype html>
<html lang="de">
<head>
<title>Login</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
<a class="navbar-brand" href="#">Navbar</a>
</nav>
<div class="container">
<div class="row">
<div class="col-sm">
Test
</div>
</div>
</div>
<!-- Footer -->
<nav class="navbar fixed-bottom navbar-expand navbar-dark bg-dark">
<a class="navbar-brand mx-auto" href="#">Footer</a>
</nav>
<!-- Javascript always on bottom -->
...
</body>
And this is my CSS
body
{
background-color: #417239
}
I don't see the container. And in Developer mode of my Browser, the div is here:
https://i.imgur.com/m6kgVae.png
Why isn't it under the navbar? It should fill all the green content (resizable).
And How I can create a block which is in the middle of the green content? (That's why I need a "main" div).
Because .fixed-top and .fixed-bottom class, your content hide behind nav. You should set margin from top, to move your content to visible area:
#content {
margin: 100px auto;
text-align:center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Navigation -->
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
<a class="navbar-brand" href="#">Navbar</a>
</nav>
<div class="container" id="content">
<div class="row">
<div class="col-sm">
Login Form
</div>
</div>
</div>
<!-- Footer -->
<nav class="navbar fixed-bottom navbar-expand navbar-dark bg-dark">
<a class="navbar-brand mx-auto" href="#">Footer</a>
</nav>
https://jsfiddle.net/wuzbj1w6/1/
#Luranis This would help you.Center align the div using bootstrap 4 helper classes.
<div className="container-fluid bg-dark">
<div className="row h-100 justify-content-center align-items-center bgColor">
<div className=" col-sm-6 col-md-6 col-lg-4 text-center">
<form role="form">
//form fields
</form>
</div>
</div>
</div>
Check out https://v4-alpha.getbootstrap.com/examples/signin/ . This should get you going in the right direction.
The div is sitting beneath you navbar because you need to add some padding for the top of your page with css.