When trying to position my search bar at equal y level to the "Art Store" text, it does not do this.
<div id="logoRow" >
<h1>Art Store</h1>
<form class="searchBar">
<div class="input-group locationSearch">
<input type="text" class="form-control" placeholder="Search" name="search">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
</div>
That is my text for the art store and then the search bar. My search bar looks like this with none of my own CSS:
When I add my own CSS, it looks like this
.searchBar {
width: 250px;
padding: 10px;
margin-right: 50px;
}
I want to position my search bar on the right side positioned at an equal y level to the Art Store text. When I use float: right, it positions the search bar down into the bottom navbar...?
This is not what I want to happen. I'm unsure why this is happening as it happens even when I set the position to relative. Any help would be greatly appreciated. Below is a little bit more code if that helps. (includes the bottom navbar)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chapter5</title>
<!-- Custom styles for this template -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link href="assign3.css" rel="stylesheet">
</head>
<body>
<header>
<div id="topHeaderRow" >
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Welcome to Art Store, Login or Create a new Account</a>
</div>
<ul class="nav navbar-nav moveRight">
<li>My Account</li>
<li>Wish List</li>
<li>Shopping Cart</li>
<li>Checkout</li>
</ul>
</div>
</nav>
</div>
<!-- end topHeaderRow -->
<div id="logoRow" >
<h1>Art Store</h1>
<form class="searchBar">
<div class="input-group locationSearch">
<input type="text" class="form-control" placeholder="Search" name="search">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
</div>
<!-- end logoRow -->
<div id="mainNavigationRow" >
<nav class="navbar navbar-default">
<ul class="nav navbar-nav mynavbar">
<li class="active">Home</li>
<li>About Us</li>
<li>Art Works</li>
<li>Artists</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Specials
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Special 1</li>
<li>Special 2</li>
</ul>
</li>
</ul>
</div>
</nav>
</nav>
</div>
I'am added a code into your case
#logoRow {
display:flex;
width:100%
}
#logoRow h1 {
margin-top:0;
}
#logoRow form.searchBar {
width:40%
display:inline-block;
margin-left:auto;
}
I'm used margin-top:0px for remove margin from bootstrap into #logoRow
So will get output like this
#logoRow {
display:flex;
width:100%
}
#logoRow h1 {
margin-top:0;
}
#logoRow form.searchBar {
width:40%;
display:inline-block;
margin-left:auto;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chapter5</title>
<!-- Custom styles for this template -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link href="assign3.css" rel="stylesheet">
</head>
<body>
<header>
<div id="topHeaderRow">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Welcome to Art Store, Login or Create a new Account</a>
</div>
<ul class="nav navbar-nav moveRight">
<li>My Account</li>
<li>Wish List</li>
<li>Shopping Cart</li>
<li>Checkout</li>
</ul>
</div>
</nav>
</div>
<!-- end topHeaderRow -->
<div id="logoRow">
<h1>Art Store</h1>
<form class="searchBar">
<div class="input-group locationSearch">
<input type="text" class="form-control" placeholder="Search" name="search">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
</div>
<!-- end logoRow -->
<div id="mainNavigationRow">
<nav class="navbar navbar-default">
<ul class="nav navbar-nav mynavbar">
<li class="active">Home</li>
<li>About Us</li>
<li>Art Works</li>
<li>Artists</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Specials
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Special 1</li>
<li>Special 2</li>
</ul>
</li>
</ul>
</div>
</nav>
</nav>
</div>
This should work
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chapter5</title>
<!-- Custom styles for this template -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link href="assign3.css" rel="stylesheet">
<style>
.searchBar {
width: 250px;
padding: 10px;
margin-left: auto;
}
</style>
</head>
<body>
<header>
<div id="topHeaderRow" >
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Welcome to Art Store, Login or Create a new Account</a>
</div>
<ul class="nav navbar-nav moveRight">
<li>My Account</li>
<li>Wish List</li>
<li>Shopping Cart</li>
<li>Checkout</li>
</ul>
</div>
</nav>
</div>
<!-- end topHeaderRow -->
<div id="logoRow" >
<h1>Art Store</h1>
</div>
<!-- end logoRow -->
<div id="mainNavigationRow" >
<nav class="navbar navbar-default">
<ul class="nav navbar-nav mynavbar">
<li class="active">Home</li>
<li>About Us</li>
<li>Art Works</li>
<li>Artists</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Specials
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Special 1</li>
<li>Special 2</li>
</ul>
</li>
</ul>
<form class="searchBar">
<div class="input-group locationSearch">
<input type="text" class="form-control" placeholder="Search" name="search">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
</nav>
</div>
</header>
</body>
</html>
Hey if i understand correctly you can use display flex to get your desired results. See the below css for how I solved it. click here for a screenshot
#logoRow{
display: flex;
align-items: center;
}
#logoRow h1{
margin: 2rem;
}
This can help:
.searchBar {
position:absolute;
float:right;
width: 250px;
padding: 10px;
margin-right: 50px;
}
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'm having trouble aligning <h2> in a straight line on a Bootstrap page (centered column) as shown in the snippet below.
h1 {
text-align: center;
}
.navbar-default {
background-color: #F5F5F5;
border-color: #E7E7E7;
opacity: 100%;
}
.row-footer{
background-color: #AfAfAf;
margin:0px auto;
padding: 20px 0px 20px 0px;
}
.icons {
display: inline;
}
/* centered columns styles */
.row-centered {
text-align:center;
}
.col-centered {
display:inline-block;
float:none;
/* reset the text-align */
text-align:left;
/* inline-block space fix */
margin-right:-4px;
}
<!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 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<title>Responsive Page</title>
<link rel="stylesheet" type="text/css" href="style1.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="bootstrap-social.css">
</head>
<body>
<h1>ALOK</h1>
<div class="container">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</div>
<div class="container">
<div class="row row-centered">
<div class="col-sm-4 col-centered">
<h2>Favorite Foods</h2>
<ul>
<li>Apples</li>
<li>Pizza</li>
<li>Crab</li>
<li>Chocolate Cake</li>
</ul>
</div>
<div class="col-sm-4 col-centered">
<h2>Achievements</h2>
</div>
<div class="col-sm-4 col-centered">
<h2>More About Me</h2>
</div>
</div>
</div>
<footer>
<div class="container">
<div class="row row-footer">
<div class="col-xs-5 col-xs-offset-1 col-sm-2 col-sm-offset-1">
<h5>Links</h5>
<ul class="list-unstyled">
<li>Home</li>
<li>About</li>
<li>Menu</li>
<li>Contact</li>
</ul>
</div>
<div class="col-xs-6 col-sm-5">
<h5>Our Address</h5>
<address>
121, Clear Water Bay Road<br>
Clear Water Bay, Kowloon<br>
HONG KONG<br>
Tel.: +852 1234 5678<br>
Fax: +852 8765 4321<br>
Email: confusion#food.net
</address>
</div>
<div class="col-xs-12 col-sm-4">
<div class="icons" style="padding: 40px 10px;">
<li><i class="fa fa-stack-overflow"></i></li>
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-facebook"></i></li>
<li><i class="fa fa-google-plus"></i></li>
</div>
<div class="col-xs-12">
<p style="padding:10px;"></p>
<p align="center">© Copyright 2016 Alok's Webpage!</p>
</div>
</div>
</div>
</footer>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</body>
</html>
If I add the <ul> after <h2> the remaining <h2> gets misaligned. I have shown the picture here How do I align them?
It is done and worked perfectly check it. Hope this works for you.
h1 {
text-align: center;
}
.navbar-default {
background-color: #F5F5F5;
border-color: #E7E7E7;
opacity: 100%;
}
.row-footer {
background-color: #AfAfAf;
margin: 0px auto;
padding: 20px 0px 20px 0px;
}
.icons {
display: inline;
}
/* centered columns styles */
.row-centered {
text-align: center;
}
.col-centered {
display: inline-block;
float: none;
/* reset the text-align */
text-align: left;
/* inline-block space fix */
margin-right: -4px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<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://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<h1>ALOK</h1>
<div class="container">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home
</li>
<li>About
</li>
<li>Contact
</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link
</li>
<li>One more separated link
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</div>
<div class="container">
<div class="row">
<div class="col-sm-4 col-md-4col-centered">
<h2>Favorite Foods</h2>
<ul>
<li>Apples</li>
<li>Pizza</li>
<li>Crab</li>
<li>Chocolate Cake</li>
</ul>
</div>
<div class="col-sm-4 col-md-4col-centered">
<h2>Achievements</h2>
</div>
<div class="col-sm-4 col-md-4col-centered">
<h2>More About Me</h2>
</div>
</div>
</div>
<footer>
<div class="container">
<div class="row row-footer">
<div class="col-xs-5 col-xs-offset-1 col-sm-2 col-sm-offset-1">
<h5>Links</h5>
<ul class="list-unstyled">
<li>Home
</li>
<li>About
</li>
<li>Menu
</li>
<li>Contact
</li>
</ul>
</div>
<div class="col-xs-6 col-sm-5">
<h5>Our Address</h5>
<address>
121, Clear Water Bay Road<br>
Clear Water Bay, Kowloon<br>
HONG KONG<br>
Tel.: +852 1234 5678<br>
Fax: +852 8765 4321<br>
Email: confusion#food.net
</address>
</div>
<div class="col-xs-12 col-sm-4">
<div class="icons" style="padding: 40px 10px;">
<li><i class="fa fa-stack-overflow"></i>
</li>
<li><i class="fa fa-twitter"></i>
</li>
<li><i class="fa fa-facebook"></i>
</li>
<li><i class="fa fa-google-plus"></i>
</li>
</div>
<div class="col-xs-12">
<p style="padding:10px;"></p>
<p align="center">© Copyright 2016 Alok's Webpage!</p>
</div>
</div>
</div>
</footer>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</body>
</html>
Since you tried to add three columns in a row for small screen, it was break.
Add proper classes for columns. col-xs-12 col-lg-4 col-centered
h1 {
text-align: center;
}
.navbar-default {
background-color: #F5F5F5;
border-color: #E7E7E7;
opacity: 100%;
}
.row-footer{
background-color: #AfAfAf;
margin:0px auto;
padding: 20px 0px 20px 0px;
}
.icons {
display: inline;
}
/* centered columns styles */
.row-centered {
text-align:center;
}
.col-centered {
display:inline-block;
float:none !important;
/* reset the text-align */
text-align:left;
/* inline-block space fix */
margin-right:-4px;
}
<!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 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<title>Responsive Page</title>
<link rel="stylesheet" type="text/css" href="style1.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="bootstrap-social.css">
</head>
<body>
<h1>ALOK</h1>
<div class="container">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</div>
<div class="container">
<div class="row row-centered">
<div class="col-xs-12 col-lg-4 col-centered">
<h2>Favorite Foods</h2>
<ul>
<li>Apples</li>
<li>Pizza</li>
<li>Crab</li>
<li>Chocolate Cake</li>
</ul>
</div>
<div class="col-xs-12 col-lg-4 col-centered">
<h2>Achievements</h2>
</div>
<div class="col-xs-12 col-lg-4 col-centered">
<h2>More About Me</h2>
</div>
</div>
</div>
<footer>
<div class="container">
<div class="row row-footer">
<div class="col-xs-5 col-xs-offset-1 col-sm-2 col-sm-offset-1">
<h5>Links</h5>
<ul class="list-unstyled">
<li>Home</li>
<li>About</li>
<li>Menu</li>
<li>Contact</li>
</ul>
</div>
<div class="col-xs-6 col-sm-5">
<h5>Our Address</h5>
<address>
121, Clear Water Bay Road<br>
Clear Water Bay, Kowloon<br>
HONG KONG<br>
Tel.: +852 1234 5678<br>
Fax: +852 8765 4321<br>
Email: confusion#food.net
</address>
</div>
<div class="col-xs-12 col-sm-4">
<div class="icons" style="padding: 40px 10px;">
<li><i class="fa fa-stack-overflow"></i></li>
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-facebook"></i></li>
<li><i class="fa fa-google-plus"></i></li>
</div>
<div class="col-xs-12">
<p style="padding:10px;"></p>
<p align="center">© Copyright 2016 Alok's Webpage!</p>
</div>
</div>
</div>
</footer>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
use a min-height to your h2 div's min-height:200px;
<!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 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<title>Responsive Page</title>
<link rel="stylesheet" type="text/css" href="style1.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="bootstrap-social.css">
<style type="text/css">
h1 {
text-align: center;
}
.navbar-default {
background-color: #F5F5F5;
border-color: #E7E7E7;
opacity: 100%;
}
.row-footer{
background-color: #AfAfAf;
margin:0px auto;
padding: 20px 0px 20px 0px;
}
.icons {
display: inline;
}
/* centered columns styles */
.row-centered {
text-align:center;
}
.col-centered {
display:inline-block;
float:none;
/* reset the text-align */
text-align:left;
/* inline-block space fix */
margin-right:-4px;
}
</style>
</head>
<body>
<h1>ALOK</h1>
<div class="container">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</div>
<div class="container">
<div class="row row-centered">
<div class="col-sm-4" style="min-height:200px;">
<h2>Favorite Foods</h2>
<ul>
<li>Apples</li>
<li>Pizza</li>
<li>Crab</li>
<li>Chocolate Cake</li>
</ul>
</div>
<div class="col-sm-4" style="min-height:200px;">
<h2>Achievements</h2>
</div>
<div class="col-sm-4" style="min-height:200px;">
<h2>More About Me</h2>
</div>
</div>
</div>
<footer>
<div class="container">
<div class="row row-footer">
<div class="col-xs-5 col-xs-offset-1 col-sm-2 col-sm-offset-1">
<h5>Links</h5>
<ul class="list-unstyled">
<li>Home</li>
<li>About</li>
<li>Menu</li>
<li>Contact</li>
</ul>
</div>
<div class="col-xs-6 col-sm-5">
<h5>Our Address</h5>
<address>
121, Clear Water Bay Road<br>
Clear Water Bay, Kowloon<br>
HONG KONG<br>
Tel.: +852 1234 5678<br>
Fax: +852 8765 4321<br>
Email: confusion#food.net
</address>
</div>
<div class="col-xs-12 col-sm-4">
<div class="icons" style="padding: 40px 10px;">
<li><i class="fa fa-stack-overflow"></i></li>
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-facebook"></i></li>
<li><i class="fa fa-google-plus"></i></li>
</div>
<div class="col-xs-12">
<p style="padding:10px;"></p>
<p align="center">© Copyright 2016 Alok's Webpage!</p>
</div>
</div>
</div>
</footer>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</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>
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="">