I am a complete noob when it comes to using bootstrap, or any HTML. I made a simple banner using photoshop and a simple nav-bar for my high school robotics team, but I am having trouble comprehending bootstrap's grid system. For some reason, my navbar is cutting off my banner. I want the banner below the navbar, how would I do this using bootstrap?
<!DOCTYPE html>
<html>
<head>
<title>Robotics Team 3774 Home</title>
<!-- Link to stylesheet -->
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/index1.css">
<!-- Mobile Scaling -->
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<!-- Navbar -->
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">Team 3774</a>
</div>
<div class="navbar-collapse collapse" style="height: 0.866667px;">
<ul class="nav navbar-nav">
<li>Team Bio</li>
<li>Our Robot</li>
<li>Our Coach</li>
<li>Gallery</li>
<li>Outreach</li>
<li>Youtube</li>
</ul>
</div>
</div>
</div>
<!-- Banner -->
<div class="banner">
<img src="Banner.png" class="img-responsive" alt="Responsive image">
</div>
</body>
Bootstrap doesn't really have a banner element, and the grid system isn't necessarily related to placing an item like that into your page. If you want a banner that spans the page like the navbar does, then you probably want to look at their Jumbotron element. All you really have to do is replace your "banner" class with a "jumbotron" like so:
<!-- Banner -->
<div class="jumbotron">
<img src="Banner.png" class="img-responsive" alt="Reponsive image" />
</div>
Then you just need to add a little custom styling to hide the gray background and have your banner image take up the width of the screen:
.jumbotron {
padding-left:0;
padding-right:0;
padding-bottom:0;
}
That should do it. I had to edit my answer once I saw that you had posted the link to your website.
Demo Here
include your banner inside the container tag
<head>
<title>Robotics Team 3774 Home</title>
<!-- Link to stylesheet -->
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/index1.css">
<!-- Mobile Scaling -->
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<!-- Navbar -->
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">Team 3774</a>
</div>
<div class="navbar-collapse collapse" style="height: 0.866667px;">
<ul class="nav navbar-nav">
<li>Team Bio</li>
<li>Our Robot</li>
<li>Our Coach</li>
<li>Gallery</li>
<li>Outreach</li>
<li>Youtube</li>
</ul>
</div>
</div>
<!-- Banner -->
<div class="banner">
<img src="Banner.png" class="img-responsive" alt="Responsive image">
</div>
</div>
Just add the following line to your CSS:
body
{
padding-top:50px;
}
And you should be good to go.
This is generally done in Bootstrap when navbar-fixed-top is used.
Related
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- Own Css -->
<link rel="stylesheet" href="css/style.css">
<title>Tropico</title>
</head>
<body>
<!-- Section - 1 Navigation Starts -->
<nav class="navbar navbar-expand-lg">
<div class="container">
<img src="img/logo.png" alt=""><span>Tropico</span>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navmenu">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navmenu">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
Home
</li>
<li class="nav-item">
Fruits
</li>
<li class="nav-item">
Services
</li>
<li class="nav-item">
Contact us
</li>
<button class="nav-item">Get a quote</button>
</ul>
</div>
</div>
</nav>
<!-- Section - 1 Navigation End -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
</body>
</html>
Nav icon not showing when display goes below 992px as i used navbar-expand-lg in bootstrap5.
Nav icon not showing when display goes below 992px as i used navbar-expand-lg in bootstrap5
Nav icon not showing when display goes below 992px as i used navbar-expand-lg in bootstrap5
Nav icon not showing when display goes below 992px as i used navbar-expand-lg in bootstrap5
Nav icon not showing when display goes below 992px as i used navbar-expand-lg in bootstrap5
Nav icon not showing when display goes below 992px as i used navbar-expand-lg in bootstrap5
maybe your source in img tag is wrong
if you have img folder in your root path (based on src="img/logo.png") change it to <img src="/img/logo.png" alt="">
If not worked see html file paths
Since you are using Bootstrap 5.0.2, you got to do the following modification:
Add .navbar-light in <nav> to have the nav burger menu icon displayed. It's because the selector in Bootstrap to display the image is .navbar-light .navbar-toggler-icon so without .navbar-light it won't be displayed.
Spotted another issue with the interaction with this toggle icon. You'll need to do the following modifications as well:
Modify data-toggle="collapse" to data-bs-toggle="collapse"
Modify data-target="#navmenu" to data-bs-target="#navmenu"
FYI data-target was the previous annotation used in Bootstrap v4. Now, in Bootstrap v5, every data-* has been changed to data-bs-*
Don't forget to use aria-* as mentioned in Bootstrap documentation as well for accessibility :)
You have some BS missing classes
try this:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- Own Css -->
<link rel="stylesheet" href="css/style.css">
<title>Tropico</title>
</head>
<body>
<!-- Section - 1 Navigation Starts -->
<nav class="navbar navbar-expand-sm navbar-light navbar-expand-lg">
<div class="container">
<img src="https://i.imgur.com/vhbkAUt.png" width="40" alt=""><span>Tropico</span>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navmenu">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navmenu">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
Home
</li>
<li class="nav-item">
Fruits
</li>
<li class="nav-item">
Services
</li>
<li class="nav-item">
Contact us
</li>
<button class="nav-item">Get a quote</button>
</ul>
</div>
</div>
</nav>
<!-- Section - 1 Navigation End -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
</body>
</html>
I have been working on a site using the Download ready-to-use compiled code for Bootstrap v4.1.3 provided on the bootstrap page, and after reading how to work on the nav and the buttons I have stumbled into a problem.
below of my meta tags I have the css links
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="addons/css/bootstrap.min.css">
<link rel="stylesheet" href="addons/css/core-style.css">
<link rel="stylesheet" href="addons/css/menustyle.css">
</head>
<body>
<header>
<nav class="navbar navbar-expand-md navbar-light bg-info fixed-top">
<a class="navbar-brand" href="#">
<img src="/docs/4.1/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top">
Bootstrap</a>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link" href="#">Facultad</a>
<a class="nav-item nav-link" href="#">Alumnos</a>
<a class="nav-item nav-link active" href="#">Consultas<span class="sr-only">(current)</span></a>
</div>
<div class="mx-auto"><b><h4>Consulta General [Notas]</h4></b></div>
</div>
</nav>
</header>
<section>...<section>
<section>...<section>
<button type="button" class="btn btn-secondary" style="width:auto" onClick="window.location.href='../Consultas.html'">Menu Consultas</button>
<section>...<section>
<footer>...</footer>
<!-- Opptional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="js/jquery-3.3.1.slim.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
The only fix I have for the button that I have in the body bellow all the other code but on the nav the code button tag does the same for the code of a tag
From the navbar the only one that has given me a problem is Placeholder that is between the atags same with the code below and that is when I hover over the button it gets smaller and that changes the height of the navbar when I hover it, link works fine and all is just that the hover, also the same happens when I use the code for the button on the Navbar provided by bootstrap
<a class="btn btn-secondary" href="Menu.php" role="button">Menu Principal</a>
the button on my code works but the a with role=button on another page does the same as the nav.
Don't know if I fully explained my issue or is easy to understand, also the code I been using is on the documentation of the Bootstrap site, also for the navbar if I don't put fixed-top on the class it leaves a white space at the top of the page I put the following code on menustyle.css but it didn't fix it, is there another way to remove the white space without the need to use fixed-top in the nav class?
header{
margin:0px;
}
body{
margin:0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">nav-bar</a>
</div>
<ul class="nav navbar-nav">
<li class="active" title="home">Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</nav>
</body>
</html>
Hey, this is the working snippet for nav bar . Please show us the issue which you're facing
Am starting out on learning bootstrap 4 on my own and am having trouble as to why bootstrap is only showing part of my footer (i.e i can only see the "privacy policy" ) on my browser. I even tried creating a tag at the top but cant get it to display. The menu section is okay. Below is my HTML from my index file. I have no content yet on my CSS file. Any suggestion is highly welcomed. Also below is an image how it appears;
Bootstrap clipping words
<!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="/css/bootstrap.css">
<link rel="stylesheet" href="/css/style.css">
<title>Gamma</title>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-light bg-light fixed-top">
<div class="container">
<a class="navbar-brand em-text" href="index.html">Gamma</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample09" aria-controls="#navbarsExample09" aria-expanded="false" aria-label="Toogle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExample09">
<ul class="nav navbar-nav mr-auto">
<li class="active"><a href="index.html" class="nav-
link">Home</a</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
<footer>
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-7 col-sm-12">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Privacy Policy</li>
</ul>
</div>
<div class="col-lg-6 col-md-7 col-sm-12">
<p>Copyright ©2017, All Rights Reserved</p>
</div>
</div>
</div>
</footer>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="/js/jquery.min.js"></script>
<script src="/js/tether.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
</body>
</html>
You have more than 12 units for your columns.
Looks like you're missing a row around the Copyright div.
Should it look like this?
<div class="row">
<div class="col-lg-6 col-md-7 col-sm-12">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Privacy Policy</li>
</ul>
</div>
</div>
<div class="row>
<div class="col-lg-6 col-md-7 col-sm-12">
<p>Copyright ©2017, All Rights Reserved</p>
</div>
</div>
See the reference here for more details: https://getbootstrap.com/docs/4.0/layout/grid/
That's because you have a fixed navbar, which makes it overlap your footer. Give the content you don't want to be overlapped by the navbar a top margin.
How do I get my sidemenu to remain stuck so the navigation tabs always remain on top and don't scroll with the page
How do I get the buttons to change background color on hover?
The issue is that only the text changes background color or only a small portion
THE CODEPEN
<head>
<title>Århus Gastronomi</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="frontpage" class="content">
<div id="sidebar">
<ul id="navbar">
<li class="navitem">Kat</li>
<li class="navitem">Kat</li>
<li class="navitem">Kat</li>
<li class="navitem">Kat</li>
</ul>
</div>
<p>Another item</p>
</div>
<div id="page2" class="content">
<p>This is page 2</p>
</div>
</body>
Add position: fixed; to your #sidebar
You may also want to add this:
.content {margin-left: 10%;}
And restructure your html like so, with the nav outside of the first content section::
<body>
<div id="sidebar">
<ul id="navbar">
<li class="navitem">Kat</li>
<li class="navitem">Kat</li>
<li class="navitem">Kat</li>
<li class="navitem">Kat</li>
</ul>
</div>
<div id="frontpage" class="content">.......
This will make it so that your content isn't behind the nav you have.
I am using the framework of a previous website I built as part of an assignment to build an actual website. However, when I copy all the code over, my navs do not look the same as they did when I did my assignment.
Here is the code, and you can view a live example of it at 192.241.215.180
The navigations are supposed to be "pills" and they are supposed to go across, not stack up.
<head>
<link href="/css/bootstrap.min.css" rel="stylesheet"/>
<link href="/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="/css/styles.css" rel="stylesheet"/>
<title>C$50 Finance: Portfolio</title>
<script src="/js/jquery-1.10.2.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/js/scripts.js"></script>
</head>
<body>
<div class="container">
<div id="top">
<img alt="C$50 Finance" src="/img/logo.gif"/>
</div>
<div class="navbar nav-pills" role="navigation">
<div class="navbar-inner">
<div class="container">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Buy</li>
<li>Sell</li>
<li>Quote</li>
<li>History</li>
<li>Change Password<li>
</ul>
</div>
</div>
</div>
<div id="middle">
</div>
<div id="bottom">
Copyright © John Harvard
</div>
</div>
</body>
you have a couple issues. First, your markup is incorrect, if you want pills, you need to use nav-pills class for the <ul> element, like this:
<ul class="nav nav-pills">
While this should be enough, this alone won't do anything, because you have a bad CSS file and a bad JQuery file. I don't know how you managed to do that, but that's what you got. So, instead of using your files, try using the CDN versions, like this:
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
and
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
test them and see how they work out for you, but I'm sure this will fix your issues
Try this:
Use <ul class="nav nav-pills">
FULL HTML:
<div class="container">
<div id="top">
<a href="/">
<img alt="C$50 Finance" src="/img/logo.gif" /></a>
</div>
<div class="navbar nav-pills" role="navigation">
<div class="navbar-inner">
<div class="container">
<ul class="nav nav-pills">
<li class="active">Home</li>
<li>Buy</li>
<li>Sell</li>
<li>Quote</li>
<li>History</li>
<li>Change Password</li>
</ul>
</div>
</div>
</div>
<div id="middle">
</div>
<div id="bottom">
Copyright © John Harvard
</div>
</div>
DEMO
Something is wrong with your version of Bootstrap. Using this worked for me:
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
there are some problem in your bootstrap.min.css
you can use this links
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
after these changes this will fix your issues