I am using a jumbotron container in bootstrap and trying to use an image as the background. However, it seems like all images distort as the screen size changes or don't display the correct part of the photo. Is there a correct size I should set save my image in? Or a way to get rid of/minimize distortion on screen resize? I can show you my code if necessary.
Thanks in advance!
CSS:
*{
margin: 0;
padding: 0;
}
.navbar-default{
background-color: rgb(66, 134, 244);
}
.under {
border-bottom: 15px solid rgb(66, 134, 244);
}
.size {
width: 300px;
}
.jumbotron{
height: 400px;
background: url("../images/parakeet.jpg");
background-size: cover;
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="css/custom.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<!-- Button nav for small screens -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Brand name -->
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<!-- Makes nav not expand on resize -->
<div class="collapse navbar-collapse" id="myNavbar">
<!-- Menu -->
<ul class="nav navbar-nav">
<li class="active">Home</li>
<!-- Dropdown menu -->
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Page 1-1</li>
<li>Page 1-2</li>
<li>Page 1-3</li>
</ul>
</li>
<!-- Non dropdown -->
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</div>
</nav>
<div class="jumbotron text-center under">
<h1>Website Heading</h1>
<p>Information about the website!</p>
</div>
<div class="container">
<div class="row">
<div class="col-sm-4 text-center">
<h2>Text</h2>
<p>More text describing the heading!</p>
<span class="glyphicon glyphicon-leaf size"></span>
</div>
<div class="col-sm-4 text-center">
<h2>Text</h2>
<p>More text describing the heading!</p>
<span class="glyphicon glyphicon-hourglass btn-lg"></span>
</div>
<div class="col-sm-4 text-center">
<h2>Text</h2>
<p>More text describing the heading!</p>
<span class="glyphicon glyphicon-plus btn-lg"></span>
</div>
</div>
</div>
</body>
</html>
That is perfectly fine. Now you need to play with background-position
Now if you run this code. You will see an image with some cute dogs. Now on smaller devices you will see the 3 middle dogs. Why? because the background-position is set to 50% on x and 50% on y (The center of the image)
Let's say that on mobiles you want to show the right most puppy with the black head. That is simple you just set background-position to 100% and 50%.
*{
margin: 0;
padding: 0;
}
.navbar-default{
background-color: rgb(66, 134, 244);
}
.under {
border-bottom: 15px solid rgb(66, 134, 244);
}
.size {
width: 300px;
}
.jumbotron{
height: 400px;
background: url("https://puppydogweb.com/wp-content/uploads/2015/05/54_2383_Cute-Puppies-puppies-16094619-1280-800.jpg");
background-size: cover;
background-position: 0 50%;
}
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<!-- Button nav for small screens -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Brand name -->
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<!-- Makes nav not expand on resize -->
<div class="collapse navbar-collapse" id="myNavbar">
<!-- Menu -->
<ul class="nav navbar-nav">
<li class="active">Home</li>
<!-- Dropdown menu -->
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Page 1-1</li>
<li>Page 1-2</li>
<li>Page 1-3</li>
</ul>
</li>
<!-- Non dropdown -->
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</div>
</nav>
<div class="jumbotron text-center under">
<h1>Website Heading</h1>
<p>Information about the website!</p>
</div>
<div class="container">
<div class="row">
<div class="col-sm-4 text-center">
<h2>Text</h2>
<p>More text describing the heading!</p>
<span class="glyphicon glyphicon-leaf size"></span>
</div>
<div class="col-sm-4 text-center">
<h2>Text</h2>
<p>More text describing the heading!</p>
<span class="glyphicon glyphicon-hourglass btn-lg"></span>
</div>
<div class="col-sm-4 text-center">
<h2>Text</h2>
<p>More text describing the heading!</p>
<span class="glyphicon glyphicon-plus btn-lg"></span>
</div>
</div>
</div>
</body>
So everything that has resolution < tablet resolution will see the black head puppy.
#media (max-width: 768px) {
.jumbotron{
background-position: 100% 50%;
}
}
you should add the following rules to the .jumbotron
background-repeat:no-repeat;
background-size:contain;
background-position:center;
To have the jumbotron scale and always show the full background image, make the height of the jumbotron 0, then use a percentage of padding that matches the aspect ratio of the image to create that same amount of padding in the jumbotron.
The image is 1920x1080. Represented as a percentage, 1080/1920 = 56.25%. Applied as a top or bottom padding, that will make jumbotron match that aspect ratio. Then you can absolutely position the text inside the jumbotron wherever you want. I introduced an element called .jumbotron-text for that.
* {
margin: 0;
padding: 0;
}
.navbar-default {
background-color: rgb(66, 134, 244);
}
.under {
border-bottom: 15px solid rgb(66, 134, 244);
}
.size {
width: 300px;
}
.jumbotron-text {
position: absolute;
top: 2em;
left: 0;
right: 0;
}
.jumbotron {
height: 0;
position: relative;
padding: 56.25% 0 0 !important;
background: url('http://i.imgur.com/OXMygdn.jpg') 0 0 no-repeat;
background-size: cover;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="css/custom.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<!-- Button nav for small screens -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Brand name -->
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<!-- Makes nav not expand on resize -->
<div class="collapse navbar-collapse" id="myNavbar">
<!-- Menu -->
<ul class="nav navbar-nav">
<li class="active">Home</li>
<!-- Dropdown menu -->
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Page 1-1</li>
<li>Page 1-2</li>
<li>Page 1-3</li>
</ul>
</li>
<!-- Non dropdown -->
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</div>
</nav>
<div class="jumbotron text-center under">
<div class="jumbotron-text">
<h1>Website Heading</h1>
<p>Information about the website!</p>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-4 text-center">
<h2>Text</h2>
<p>More text describing the heading!</p>
<span class="glyphicon glyphicon-leaf size"></span>
</div>
<div class="col-sm-4 text-center">
<h2>Text</h2>
<p>More text describing the heading!</p>
<span class="glyphicon glyphicon-hourglass btn-lg"></span>
</div>
<div class="col-sm-4 text-center">
<h2>Text</h2>
<p>More text describing the heading!</p>
<span class="glyphicon glyphicon-plus btn-lg"></span>
</div>
</div>
</div>
</body>
</html>
While waiting for the code, did you add the responsive class to the image tag?
<img src="picture.jpg" class="img-responsive">
Related
I have problem here with the logo and navbar in the design. There are 3 column for the logo and 6 for navbar like this image
But when I running the code They do not appear in the correct position and I do not now where is the mistake in the code. they are come like this in browser:
This is HTML code and css:
body {
font-family: 'Raleway' font-size: 16px;
color: #fff;
font-weight: 400;
letter-spacing: 1px;
background: #003153;
}
header {
background: url(images/home-bg.png) center repeat-y;
min-height: 760px;
width: 100%;
padding: 50px;
}
.navbar {
background: 0;
padding: 0;
border: 0;
}
<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.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Raleway:400,300,500,600,700" rel="stylesheet" type="text/css">
<!--header-->
<header>
<div class="container">
<div class="row">
<div class="col-lg-3 logo"><img src="images/Logo.png" alt="logo"></div>
<div class="col-lg-6 menu">
<nav class="navbar navbar-default">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="mainMenu" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="mainMenu">
<ul class="nav navbar-nav">
<li class="active">Home <span class="sr-only">(current)</span></li>
<li>About me</li>
<li>Courses</li>
<li>Gallery</li>
<li>Articles</li>
<li>Contacts</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</nav>
</div>
<div class="col-lg-3 search"></div>
</div>
</div>
</header>
Thank you
You have to put =(equals to/ assignment operator) with each class attribute
it should be
<div class="col-lg-3 logo"><img src="images/Logo.png" alt"logo"></div>
<div class="col-lg-6 menu">
Just started working with bootstrap today and I ran into a few issues. I want to edit the size of certain parts of the site but can't get them to change/am worried about the responsivity. For example in the code below I wanted to change the size of the icons so I added an additional class "size" and set the width to 300px, but the change isn't made on the site. I even tried using !important without success. Additionally, I would like to change the height of the jumbotron in the same way but have been unsuccessful. How would I go about changing these? Do I need to go into the bootstrap script? Also when designing a responsive website should I use percentages instead of pixels? Thanks, code is here:
*{
margin: 0;
padding: 0;
}
.navbar-default{
background-color: rgb(66, 134, 244);
}
.under {
border-bottom: 15px solid rgb(66, 134, 244);
}
.size {
width: 300px!important;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<!-- Button nav for small screens -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Brand name -->
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<!-- Makes nav not expand on resize -->
<div class="collapse navbar-collapse" id="myNavbar">
<!-- Menu -->
<ul class="nav navbar-nav">
<li class="active">Home</li>
<!-- Dropdown menu -->
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Page 1-1</li>
<li>Page 1-2</li>
<li>Page 1-3</li>
</ul>
</li>
<!-- Non dropdown -->
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</div>
</nav>
<div class="jumbotron text-center under">
<h1>Website Heading</h1>
<p>Information about the website!</p>
</div>
<div class="container">
<div class="row">
<div class="col-sm-4 text-center">
<h2>Text</h2>
<p>More text describing the heading!</p>
<span id="size" class="glyphicon glyphicon-leaf size"></span>
</div>
<div class="col-sm-4 text-center">
<h2>Text</h2>
<p>More text describing the heading!</p>
<span class="glyphicon glyphicon-hourglass btn-lg"></span>
</div>
<div class="col-sm-4 text-center">
<h2>Text</h2>
<p>More text describing the heading!</p>
<span class="glyphicon glyphicon-plus btn-lg"></span>
</div>
</div>
</div>
</body>
</html>
Change styles.css to custom.css and put it in folder called css
<!-- Custom CSS: You can use this stylesheet to override any Bootstrap styles and/or apply your own styles -->
<link href="css/custom.css" rel="stylesheet">
You can just wrap the icon span with a h1 tag.
<h1> <span id="size" class="glyphicon glyphicon-leaf size large"> </span></h1>
I have made some changes on your code:
/*
Put this content into style.css
*/
* {
margin: 0;
padding: 0;
}
.navbar-default {
background-color: rgb(66, 134, 244);
}
.jumbotron {
/* jumbotron height */
height: 400px;
}
.under {
border-bottom: 15px solid rgb(66, 134, 244);
}
.size {
/*use font-size instead of width*/
font-size: 100px !important;
/* this is the last one:
width: 300px!important;
(missing space before !important )
*/
}
<!--
http://stackoverflow.com/questions/42940712/bootstrap-css-customization-issues
-->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<!-- Button nav for small screens -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Brand name -->
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<!-- Makes nav not expand on resize -->
<div class="collapse navbar-collapse" id="myNavbar">
<!-- Menu -->
<ul class="nav navbar-nav">
<li class="active">Home</li>
<!-- Dropdown menu -->
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Page 1-1</li>
<li>Page 1-2</li>
<li>Page 1-3</li>
</ul>
</li>
<!-- Non dropdown -->
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</div>
</nav>
<div class="jumbotron text-center under">
<h1>Website Heading</h1>
<p>Information about the website!</p>
</div>
<div class="container">
<div class="row">
<div class="col-sm-4 text-center">
<h2>Text</h2>
<p>More text describing the heading!</p>
<span id="size" class="glyphicon glyphicon-leaf size"></span>
</div>
<div class="col-sm-4 text-center">
<h2>Text</h2>
<p>More text describing the heading!</p>
<span class="glyphicon glyphicon-hourglass btn-lg"></span>
</div>
<div class="col-sm-4 text-center">
<h2>Text</h2>
<p>More text describing the heading!</p>
<span class="glyphicon glyphicon-plus btn-lg"></span>
</div>
</div>
</div>
</body>
</html>
I am making a portfolio site on codepen.io and my navbar collapse button won't work went the window size is decreased. Codepen: https://codepen.io/RayFitzgerald/full/vKgYoj/ Apologies for poorly written code. I am new.
HTML
<body data-spy="scroll" data-target=".navbar">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
Ray Fitzgerald
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">button
</button>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav">
<li>About</li>
<li>Portfollio</li>
<li>Social</li>
</ul>
</div>
</div>
</nav>
<!-- Main Body & Text Items -->
<div class="container">
<div class="jumbotron">
<div class="intro-text" id="About">
My name is Ray Fitzgerald and I am a young Programmer and Web Developer
</div>
<div class="intro-text" id="Portfolio">
Portfolio
</div>
<div class="intro-text" id="Social">
Social
</div>
</div>
</div>
</body>
CSS
body{
padding-top: 50px;
}
.intro-text{
font-size: 30px;
}
#About{
height: 500px;
}
#Portfolio{
height: 500px;
}
#Social{
height: 500px;
}
No bootstrap.min.js and no JQuery library found in the link provided by you.
Add JQuery library then add bootstrap.min.js it will work.
Bootstrap navbar toggle component works only when Bootstrap Javascript is included in the code. Include bootstrap javascript file and it works like charm.
Reminder: Bootstrap JS works only if you include jQuery first.
Try this code as it is in application this code works me at my end
<!DOCTYPE html>
<html lang="en">
<head>
<title></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>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Sitename</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Page sub</li>
<li>Page sub</li>
<li>Page sub</li>
</ul>
</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Sign Up</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<h3>Collapsible Navbar</h3>
</div>
</body>
</html>
I am getting an unwanted space like this between red color div and header
my html is i've give 0 value for margin and padding for html and body.But still there's a problem please help
<header>
<nav role="navigation" class="navbar navbar-fixed navbar-inverse">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle nav-button">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Example
</div>
<!-- Collection of nav links and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav nav-ul">
<li id="tech" class="nav-list"> home</li>
<li id="politics" class="nav-list"> careers</li>
<li id="crime" class="nav-list"> about</li>
<li id="business" class="nav-list"> contact</li>
</ul>
</div>
</nav>
</header>
<section class="frontpage">
<div class="container">
<div class="row">
<div class="col-md-5">
</div>
</div>
</div>
</section>
<section class="ghi">
<div class="container">
<div class="row">
<div class="col-md-5">
</div>
</div>
</div>
</section>
and css is i've also tried giving 0 padding and margins for div and header
body,html {
margin:0;
padding:0;
}
header{
margin:0;
padding:0;
}
.frontpage{
background:red;
height:200px;
margin:0;
padding:0;
}
.ghi{
background:blue;
height:220px;
}
use it
.navbar{
margin-bottom: 0!important;
}
body,html {}
header{}
.frontpage{
background:red;
height:200px;
}
.ghi{
background:blue;
height:220px;
}
.navbar{
margin-bottom: 0!important;
}
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
<header>
<nav role="navigation" class="navbar navbar-fixed navbar-inverse">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle nav-button">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Example
</div>
<!-- Collection of nav links and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav nav-ul">
<li id="tech" class="nav-list"> home</li>
<li id="politics" class="nav-list"> careers</li>
<li id="crime" class="nav-list"> about</li>
<li id="business" class="nav-list"> contact</li>
</ul>
</div>
</nav>
</header>
<section class="frontpage">
<div class="container">
<div class="row">
<div class="col-md-5">
</div>
</div>
</div>
</section>
<section class="ghi">
<div class="container">
<div class="row">
<div class="col-md-5">
</div>
</div>
</div>
</section>
It is because the Browser is adding default margins to the ul Elements. Add this style to your css and it should fix the issue:
ul.nav { margin-bottom: 0 !important; }
Just in case someone else have same problem. I fixed it based on reading https://css-tricks.com/fighting-the-space-between-inline-block-elements/ in my case just added this line margin-bottom: -10px;
I'm trying to teach myself bootstrap but I've run into a bizarre problem: my navbar seems to have a link to something that's not there.
Above the navbar I have a list of social media contacts but the last list item (instagram) seems to be creating a hyperlink in the nav bar. Now, the social media list and nav bar list are in completely separate containers, the instagram <a> tag is closed and the <li> and <ul> tags are closed.
When I look at in the browsers developer tools it's showing additional instagram links that just aren't in my HTML, so I'm at a loss. I must be missing something. Website is coledavidson.ca/web (it's still in development, don't judge).
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Cole Davidson</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.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<!--HEADER SECTION-->
<div id="header">
<div class="row">
<span align="center"></center><div class="col-sm-9 header-img"><div class="header-img-box"><img src="images/Cole%20Davidson%20-%20White.png"></div></div></span>
<div class="col-sm-3 social-media">
<ul>
<li><img src="images/sm-icons/email.png"</li>
<li><img src="images/sm-icons/twitter.png"</li>
<li><img src="images/sm-icons/fb.png"</li>
<li><img src="images/sm-icons/linkedin.png"</li>
<li><img src="images/sm-icons/instagram.png"</li>
</ul>
</div>
</div>
</div>
<!--NAV BAR SECTION-->
<div class="row">
<nav class="navbar navbar-default">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="dropdown active">
<a class="dropdown-toggle" data-toggle="dropdown" href="index.html">About
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Education</li>
<li>Employment</li>
<li>Volunteerism</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Services
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Graphic Design</li>
<li>Web Design</li>
<li>NationBuilder</li>
<li>Digital Strategy</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Portfolio
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Graphic Design</li>
<li>Web Design</li>
</ul>
</li>
</ul>
</div>
</nav>
</div>
<!--PAGE CONTENT SECTION-->
<div class="row">
<div class="col-sm-12"><h1>Page Title goes here.</h1></div>
</div>
<div class="row">
<div class="col-sm-12"><p>Page content goes here.</p></div>
</div>
<!--FOOTER SECTION-->
<div class="row"><div class="col-sm-12"><p>Footer content goes here.</p></div>
</div>
</div>
</body>
</html>
CSS:
/*This is the stylesheet for coledavidson.ca. This website also uses the bootstrap stylesheets.*/
/*Author: Cole Davidson*/
body {
background-image: url(images/about-bg.jpg);
background-repeat:no-repeat;
background-size: auto;
background-position:center;
height: 100%;
}
.header-img img {
width: 75%;
height: auto;
}
.social-media ul {
list-style: none;
}
.social-media img {
width:30px;
height:auto;
}
Thanks in advance!
here you missed a '>' tag in <img src="">