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.
Related
So I am trying to design a site. First time using bootstrap and I just cant figure out editing the heights properly and I feel like I just started learning coding from scratch. (I had taken a few years hiatus.)
I am trying to get the page to look like this on above tablet(portrait size)
Above portrait size:
My goal for the larger size was to have the main body take up about 80% of the window and the footer/header take up the rest of the space.
And trying to get it to look like this on the tablet(portrait) and smaller:
Below portrait size:
My goal for this one was not to just have it go down below the image and make it scroll-able.
Right now my code looks like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="description" content="">
<meta name="keywords" content="">
<title>The Last Names</title>
<link rel="stylesheet" href="css/bootstrap4.min.css">
<link rel="stylesheet" href="css/main.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
<a class="navbar-brand" href="#">Caitlyn & Jacob Team Up</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 Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">The Bridal Party</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">RSVP</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Registry</a>
</li>
</ul>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<!-- Pictures will go here -->
<div class="picmain col-12 col-md-6 bg-primary">
<h3>pics here</h3>
</div>
<!-- Info column row -->
<div class="col-12 col-md-6">
<div class="row">
<!-- info 1 -->
<div class="info1 col-12 bg-secondary">
<h3>info1</h3>
</div>
<!-- info 2 -->
<div class="info2 col-12 bg-info">
<h3>info2</h3>
</div>
</div>
</div>
</div>
<div class="row">
<div class="footer col-12">Footer stuff will go here</div>
</div>
</div>
</body>
</html>
can anyone help me figure out what I need to do to achieve what I was hoping for?
Thank you :)
What you can do on the body is to create a row with two columns and in the second column you nest 2 rows(each row having a class "col"). Check this pen example
`
<!--General Row starts here -->
<div class="row">
<!--first column starts here -->
<div class="col-md one ">
<h1>Column </h1>
</div>
<!--first column ends here -->
<!--second column starts here -->
<div class="col-md">
<!--first nested row starts here -->
<div class="row">
<div class="col two">
<h1> first Nested row with "col" class</h1>
</div>
</div>
<!--first nested row ends here -->
<!--second nested row starts here -->
<div class="row">
<div class="col three">
<h1> second Nested row with "col" class </h1>
</div>
</div>
<!--second nested row ends here -->
</div>
</div>
</div>
` https://codepen.io/stevegates/pen/MPmRBp
and also check out the bootstrap docs for more information on bootstrap grid
https://getbootstrap.com/docs/4.1/layout/grid/
How to increase height of menu bar in this code,
how decrease column size and height
how put a rich css for this design can anyone help me without any custom css.
in notice column data should display in that yellow color place only
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="newcss.css">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="navbar-header"><a class="navbar-brand" href="#">Brand</a>
<a class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Link</li>
<li>More</li>
<li>Options</li>
</ul>
</div>
</nav>
<!-- Begin page content -->
<div class="container-fluid">
<div class="row">
<div class="col-md-2 sidebar" id="side1">Links</div>
<div class="col-md-8">
<div class="page-header">
<h1>Student Management System</h1>
</div>
<p class="lead">Home Page.</p>
</div>
<div class="col-md-2 sidebar" id="side2">notice</div>
</div>
</div>
<div id="footer">
<div class="container">
<p class="text-muted">Place sticky footer content here.</p>
</div>
</div>
</body>
</html>
I didn't get your actual requirement, but menubar height can be increased by adding following CSS.
Note: This is a workaround, may not be responsive
.navbar{
height : 100px !important; /*keep your own height here*/
}
I wand to create a footer with links and with copyright info at the end:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BlaBla</title>
<link href="bootstrap.css" rel="stylesheet"/>
</head>
<body>
<div class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<label class="navbar-brand" for="BlaBla">BlaBla</label>
</div>
</div>
</div>
<div class="container body-content">
<hr />
<footer>
<nav class="navbar navbar-inverse" role="navigation">
<div>
<ul class="nav navbar-nav">
<li>Corporate Information</li>
<li>Privacy Policy</li>
<li>Cookie Policy</li>
<li>Help</li>
<li>© BlaBla 2016 All Rights Reserved</li>
</ul>
</div>
</nav>
</footer>
</div>
</body>
</html>
But here the copyright is shown on the top of the navbar, and it is dark grey, not light gray, and I did not find any Bootstrap class.
I do not want to use the style HTML attribute, I want to solve it with pure Bootstrap. Is there any solution?
Use it like:
<ul>...</ul>
<p class="navbar-text pull-right">© BlaBla #DateTime.Now.Year All Rights Reserved</p>
Bootply
To "...copyright info at the end" - use .pull-right class, which is basically float: right.
And to color the text, use .navbar-text class.
You may want to use the class navbar-text.
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li>Link</li>
</ul>
<p class="navbar-text">
Text
</p>
</div>
</nav>
https://jsfiddle.net/t2rrgynf/
I think is this what you want.
<footer class="footer navbar-fixed-bottom">
<div class="container">
<p class="text-muted">Place sticky footer content here.</p>
</div>
</footer>
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.
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