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>
Related
I am trying to create a page with a collapsible sidebar on the left and a content are that occupies the rest of the page. In my content area I want a navbar up on top and the rest of the content below.
Currently, I am using a container-fluid class to make sure the navbar resizes. When I have a regular paragraph encapsulated in <p> tag the navbar and the paragraph spans the full width of the page. However, the moment I use row's and col's the content seems to take up only have the page and does not go to the edges.
Here is my html code:
<div id="content">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" id="sidebarCollapse" class="btn navbar-btn">
<i class="glyphicon glyphicon-menu-hamburger"></i>
<span>Toggle Sidebar</span>
</button>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>username</li>
<li>Logout</li>
</ul>
</div>
</div>
</nav>
<div class="row">
<div class="col-md-3">
<!-- I have a few divs here -->
</div>
<div class="col-md-9">
<!-- I have a fre more divs here -->
</div>
</div><!-- row -->
</div>
I am currently using Bootstrap 3 (3.3.7) and was following along with this tutorial. I know there are a few other questions on Stack Overflow, but none of the solutions there seems to do anything to solve my problem.
Thanks for any help.
I think you expecting this. if it's not your expectation please add fiddler snippet here, I will update code.
$(document).ready(function () {
$("#sidebar").mCustomScrollbar({
theme: "minimal"
});
$('#sidebarCollapse').on('click', function () {
$('#sidebar, #content').toggleClass('active');
$('.collapse.in').toggleClass('in');
$('a[aria-expanded=true]').attr('aria-expanded', 'false');
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://bootstrapious.com/tutorial/sidebar/style2.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.css"/>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="wrapper">
<!-- Sidebar Holder -->
<nav id="sidebar">
<div class="sidebar-header">
<h3>Bootstrap Sidebar</h3>
</div>
<ul class="list-unstyled components">
<p>Dummy Heading</p>
<li class="active">
Home
<ul class="collapse list-unstyled" id="homeSubmenu">
<li>Home 1</li>
<li>Home 2</li>
<li>Home 3</li>
</ul>
</li>
<li>
About
Pages
<ul class="collapse list-unstyled" id="pageSubmenu">
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</li>
<li>
Portfolio
</li>
<li>
Contact
</li>
</ul>
<ul class="list-unstyled CTAs">
<li>Download source</li>
<li>Back to article</li>
</ul>
</nav>
<!-- Page Content Holder -->
<div id="content" class="">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" id="sidebarCollapse" class="btn btn-info navbar-btn">
<i class="glyphicon glyphicon-align-left"></i>
<span>Toggle Sidebar</span>
</button>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>Page</li>
<li>Page</li>
<li>Page</li>
<li>Page</li>
</ul>
</div>
</div>
</nav>
<div class="row">
<div class="col-md-3">
<div style="background-color: #324D5C; padding: 25px; border-radius: 5px;">
<p><b style="color: #fff;">Upcomming</b></p>
<h1 style="color: #46B29D; text-align: right;">50</h1>
</div>
<br>
<div style="background-color: #46B29D; padding: 25px; border-radius: 5px;">
<p><b style="color: #fff;">Total Created</b></p>
<h1 style="color: #F0CA4D; text-align: right;">120</h1>
</div>
<br>
<div style="background-color: #F0CA4D; padding: 25px; border-radius: 5px;">
<p><b style="color: #E37B40;">Avgerage Value</b></p>
<h1 style="color: #324D5C; text-align: right;">$400</h1>
</div>
<br>
</div> <!-- col-md-3 -->
<div class="col-md-9">
<div style="background-color: #46B29D; padding: 25px; border-radius: 5px;">
<p><b style="color: #fff;">Upcomming</b></p>
<h1 style="color: #46B29D; text-align: right;">50</h1>
</div>
<br>
<div style="background-color: #46B29D; padding: 25px; border-radius: 5px; ">
<p><b style="color: #fff;">Total Created</b></p>
<h1 style="color: #F0CA4D; text-align: right;">120</h1>
</div>
<br>
<div style="background-color: #F0CA4D; padding: 25px; border-radius: 5px;">
<p><b style="color: #E37B40;">Avgerage Value</b></p>
<h1 style="color: #324D5C; text-align: right;">$400</h1>
</div>
<br>
</div> <!-- col-md-9 -->
</div><!-- row -->
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.concat.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
</body>
</html>
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">
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>
For some reason, my dropdown in my navigation bar is not working; nothing happens when it is clicked. I also find it strange because I copied this code from somewhere else, and it isn't working. I have checked for typos multiple times but came up with nothing.
My HTML:
<!DOCTYPE html>
<html>
<head>
<title>Website Template</title>
<!-- links to the css page and bootstrap -->
<link rel="stylesheet" type="text/css" href="main.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<!-- BEGIN NAVBAR -->
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header pull-left">
<a class="navbar-brand" href="#">Project Name</a>
</div>
<div class="navbar-header pull-right">
<ul class="nav navbar-nav pull-left">
<li><a class="" href="#">Text</a></li>
</ul>
<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>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Text</li>
<li>Text</li>
<li>Text</li>
<li class="dropdown">
Dropdown <b class="caret"></b> <ul class="dropdown-menu">
<li>Text</li>
<li class="divider"></li>
<li class="dropdown-header">Text</li>
<li>Text</li>
<li>Text</li>
</ul>
</li>
</ul>
<div class="navbar-right">
<ul class="nav navbar-nav">
<li>Text</li>
<li>Text</li>
</ul>
</div>
</div>
</div>
</div>
<!-- END NAVBAR -->
<div class="jumbotron">
<div class="container">
<h1>Text</h1>
<p>Paragraph.</p>
</div>
</div>
</body>
</html>
My CSS:
.jumbotron {
text-align: center;
}
body {
padding-top: 50px;
padding-bottom: 20px;
}
You're not referencing the jQuery library and Bootstrap.js library in your <head> tag..
The navbar requires a javascript library (collapse.js), all you need is here, check the text in the big red box.
EDIT: Put this CDN tag in your <head>, make sure to put the latest jQuery library before this line.
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>
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="">