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
Related
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.
I have a problem for setting all the elements of the header in the same row.
Here is the code:
<nav class="navbar navbar-default header navbar-fixed-top">
<div class="col-md-12 nav-wrapper">
<div class="row">
<div class="navbar-header">
<div class="col-md-3">
<div class="opener-left-menu is-open">
<span class="top"></span> <span class="middle"></span> <span class="bottom"></span>
</div>
<b>Consultation Web</b>
</div>
<div class="col-md-3">
<ul class="nav navbar-nav navbar-right user-nav">
<li class="user-name"><span>User name</span></li>
<li class="dropdown avatar-dropdown">
<img src="./app/shared/img/avatar.jpg"
class="img-circle avatar" alt="user name" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="true" />
</li>
</ul>
</div>
</div>
</div>
</div>
</nav>
I have tried to surround the elements in a row class.
also i gave class="col-md-3" for both elements. So, I expect that i use only half the available columns. Unfortunately, the img tag always go to the next row. I want to have all the element in only one row.
How can i fix it?
Here is the css i am using:
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">
<link rel="stylesheet" href="./app/shared/css/style.css">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
I am sure that, style.css is get loaded properly.
Thank you all.
I forgot to add the
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
I am making a Navbar using Bootstrap 3 and when I put in the ul tag and add a list item it doesn't show up. I have tried wrapping it in a div with the class of container but that doesn't work.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap Course</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<a class="navbar-brand" href="#"><img src="logo.png"></a>
<div class="nav-collapse collapse navbar-responsive-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
</ul>
</div>
</div>
</div>
<div class="row">
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384- 0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="scripts.js"></script>
</body>
</html>
Please use navbar code listed in bootstrap documentation.
You need to replace class="nav-collapse collapse navbar-responsive-collapse"> with class="collapse navbar-collapse"
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img src="logo.png">
</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home
</li>
</ul>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="scripts.js"></script>
use border first on your css file to locate where is your nav bar location in the page like this..
div class="navbar navbar-default navbar-fixed-top" style="border:2px solid #000000">
this will guide you..
Hope it helps..
Looks like you're missing JQuery.
Add this above your bootstrap JS
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
Here's an example codepen http://codepen.io/anon/pen/zBRLZo
I'm new to the Bootstrap world and just tried to make a simple scrollspy.
<!DOCTYPE html>
<html>
<head>
<title>Team Avero | Home</title>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/style.css">
<script src="js/bootstrap.js"></script>
</head>
<body data-spy="scroll" data-target="#navbar">
<div class="container">
<ul class="nav nav-tabs pull-left" id="navbar">
<li class="active">Home</li>
<li>News</li>
<li>Team</li>
<li>Social Media</li>
</ul>
<ul class="nav nav-tabs pull-right">
<li>Avero Store</li>
<li>Forums</li>
</ul>
</div>
<div class="jumbotron">
<div class="container">
<h1>Team Avero</h1>
<p>provides the best tools, services and more in the modding community. Guaranteed.</p>
</div>
</div>
<div class="news">
<div class="container">
<p>This is a test.</p>
<p>This is a test.</p>
<p>This is a test.</p>
<p>This is a test.</p>
<p>This is a test.</p>
<p>This is a test.</p>
<p>This is a test.</p>
</div>
</div>
</body>
</html>
The layout is fine, however when I click on the "News" item in the navigation, it doesn't scroll to the div class news. What's wrong?
You have specified <div class="news"> It should be <div id="news"> because you have used #news for the anchor tag.
# refers to id and . refers to class
Try to replace
<ul id="navbar">
...
</ul>
to
<div id="navbar">
<ul>
...
</ul>
</div>
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.