This question already has answers here:
Missing visible-** and hidden-** in Bootstrap
(13 answers)
Closed 2 months ago.
<body>
<header>
<nav class="navbar navbar-expand-md navbar-light" style="background-color:#f6b319">
<div class="container-fluid">
<div class="navbar-header">
<a href="index.html" class="float-start .d-none .d-lg-block .d-xl-none">
<div id="logo-img" alt="Logo image"></div>
</a>
<div class="navbar-brand">
<h1>Example 1</h1>
<p>
<img src="R.png" alt="Korsher certification">
<span>Kosher Certifield</span>
</p>
</div>
</div>
</nav>
</header>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
</body>
i wanted the website can be visible only lg or md devices otherwise the logo will be hidden.
You need to add both, Bootstrap CSS and Bootstrap JS.
To hide logo on mobile, add Bootstrap classes d-sm-block d-none.
See the snippet below.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<body>
<header>
<nav class="navbar navbar-expand-md navbar-light" style="background-color:#f6b319">
<div class="container-fluid">
<div class="navbar-header">
<a href="index.html" class="d-sm-block d-none">
<div id="logo-img" alt="Logo image">Logo</div>
</a>
<div class="navbar-brand">
<a href="index.html">
<h1>Example 1</h1>
</a>
<p>
<img src="R.png" alt="Korsher certification">
<span>Kosher Certifield</span>
</p>
</div>
</div>
</div>
</nav>
</header>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
</body>
Related
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/
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>
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>
I have tried multiple things that I have read trying to correct this issue, the big one that I've seen says that when you load you will see an error in the console, there is no error so I don't believe that one is my problem. My navbar will collapse as the screen gets smaller, but when you click on the hamburger nothing happens.
Here is my HTML
<!DOCTYPE html>
<html lang="en" class="index">
<head>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" 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.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" >
<link href="https://fonts.googleapis.com/css?family=Arvo:700|Permanent+Marker" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="portfolio.css">
<link rel="icon" type="image/png" sizes="16x16" href="./assets/favicon-16x16.png">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Alice Frazier's Portfolio</title>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark sticky-top">
<div class="container-fluid">
<div class="d-none d-lg-block center">
<p class="navbar-brand d-none d-lg-block nav-quote">"She believed she could so she did." -R.S. Grey
</p>
</div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse">
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item"><a class="nav-link" href="index.html">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#aboutmelink">About Me</a></li>
<li class="nav-item"><a class="nav-link" href="index.resume.html">My Resume</a></li>
<li class="nav-item"><a class="nav-link" href="index.projects.html">My Projects</a></li>
<li class="nav-item"><a class="nav-link" href="index.resume.html.html">Contact Me</a></li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid">
<p class="name">Alice Frazier</p>
<p class="web">Web Design</p>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<img class="mypic" src="./assets/Alice.jpg" width="500" height="600">
</div>
<div class="col-md-6">
<img class="aboutmepic" src="./assets/alice2.jpg" width="350" height="450">
</div>
</div>
</div>
<div class="container-fluid">
<p class="web" id="aboutmelink"> About Me</p>
<p class="aboutme">Currently living and working in Indianapolis, IN. I previously worked for Dominion Dealer Solutions
and started there as website tech support, which I loved doing, unfortunately our website team was dissolved and
we no longer hosted websites so my next step was to support our CRM.</p>
<br>
<p class="aboutme">For two years I was a teacher at Sylvan Learning Center where I taught the Lego Robotics class and the Tynker Coding class. If you would like more information on these programs check them out at the links below.</p>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-4 home">
<p class="title">Sylvan Learning Center</p>
<a class="sylvan" href="https://www.sylvanlearning.com/" target="_blank"><img
src="./assets/sylvan_home_logo.png"
height="200" width="200"></a>
</div>
<div class="col-md-4 home">
<p class="title">Lego </p>
<a class="Lego"
href="https://www.sylvanlearning.com/stem/robotics-science"
target="_blank"><img
src="./assets/lego.jpg"
height="200" width="200"></a>
</div>
<div class="col-md-4 home">
<p class="title">Tynker</p>
<a class="Tynker" href="https://www.tynker.com/?t=reset" target="_blank"><img
src="./assets/tynker.png"
height="200" width="300"></a>
</div>
</div>
</div>
<br>
<div class="icon">
<i class="fa fa-github-square" style="font-size:48px"> </i>
<i class="fa fa-linkedin-square" style="font-size:48px"> </i>
</div>
<footer class="footer">
<div class="container-fluid padding">
<div class="row text-center">
<div class="col-md-4">
<p>Alice Frazier</p>
</div>
<div class="col-md-4">
halliwell2046#yahoo.com
</div>
<div class="col-md-4">
(317)313-7712
</div>
</div>
</div>
</footer>
</body>
</html>
Try this. The main thing here is Navigation bar. I haven't changed the rest. It seems that your markup was not in proper order. I have solved it for you.
Also I have used scripts from your question. I haven't changed their order.
Run the code Snippet
<!DOCTYPE html>
<html lang="en" class="index">
<head>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" 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.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Arvo:700|Permanent+Marker" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="portfolio.css">
<link rel="icon" type="image/png" sizes="16x16" href="./assets/favicon-16x16.png">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Alice Frazier's Portfolio</title>
</head>
<body>
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About Me</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">My Resume</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">My Projects</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contacts</a>
</li>
</ul>
</div>
</nav>
<div class="container-fluid">
<p class="name">Alice Frazier</p>
<p class="web">Web Design</p>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<img class="mypic" src="./assets/Alice.jpg" width="500" height="600">
</div>
<div class="col-md-6">
<img class="aboutmepic" src="./assets/alice2.jpg" width="350" height="450">
</div>
</div>
</div>
<div class="container-fluid">
<p class="web" id="aboutmelink"> About Me</p>
<p class="aboutme">Currently living and working in Indianapolis, IN. I previously worked for Dominion Dealer Solutions and started there as website tech support, which I loved doing, unfortunately our website team was dissolved and we no longer hosted websites so my
next step was to support our CRM.</p>
<br>
<p class="aboutme">For two years I was a teacher at Sylvan Learning Center where I taught the Lego Robotics class and the Tynker Coding class. If you would like more information on these programs check them out at the links below.</p>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-4 home">
<p class="title">Sylvan Learning Center</p>
<a class="sylvan" href="https://www.sylvanlearning.com/" target="_blank"><img src="./assets/sylvan_home_logo.png" height="200" width="200"></a>
</div>
<div class="col-md-4 home">
<p class="title">Lego </p>
<a class="Lego" href="https://www.sylvanlearning.com/stem/robotics-science" target="_blank"><img src="./assets/lego.jpg" height="200" width="200"></a>
</div>
<div class="col-md-4 home">
<p class="title">Tynker</p>
<a class="Tynker" href="https://www.tynker.com/?t=reset" target="_blank"><img src="./assets/tynker.png" height="200" width="300"></a>
</div>
</div>
</div>
<br>
<div class="icon">
<i class="fa fa-github-square" style="font-size:48px"> </i>
<i class="fa fa-linkedin-square" style="font-size:48px"> </i>
</div>
<footer class="footer">
<div class="container-fluid padding">
<div class="row text-center">
<div class="col-md-4">
<p>Alice Frazier</p>
</div>
<div class="col-md-4">
halliwell2046#yahoo.com
</div>
<div class="col-md-4">
(317)313-7712
</div>
</div>
</div>
</footer>
</body>
</html>
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.