I want to create a bootstrap navbar that's fixed at the bottom of the page spanning just the width of the column (col-sm-7) that it's contained in. The navbar currently spans the width of the entire page and not just the center column like I want!
FYI - I could use afooter if that works too, but not sure how I would implement it either, I did replace the navbar with a footer, but the footer wasn't fixed at the bottom.
Here is my fiddle to demonstrate the navbar spanning across the entire page.
Here is the code with a navbar
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="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>
<style>
/* Set black background color, white text and some padding */
footer {
background-color: #555;
color: white;
padding: 15px;
}
</style>
</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="#">Logo</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home
</li>
<li>Messages
</li>
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="form-group input-group">
<input type="text" class="form-control" placeholder="Search..">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</form>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> My Account
</li>
</ul>
</div>
</div>
</nav>
<div class="container text-center">
<div class="row">
<div class="col-sm-3 well">
<div class="well">
<p>My Profile
</p>
<img src="bird.jpg" class="img-circle" height="65" width="65" alt="Avatar">
</div>
<div class="well">
<p>Interests
</p>
<p>
<span class="label label-default">News</span>
<span class="label label-primary">W3Schools</span>
<span class="label label-success">Labels</span>
<span class="label label-info">Football</span>
<span class="label label-warning">Gaming</span>
<span class="label label-danger">Friends</span>
</p>
</div>
<div class="alert alert-success fade in">
×
<p><strong>Ey!</strong>
</p>
People are looking at your profile. Find out who.
</div>
<p>Link
</p>
<p>Link
</p>
<p>Link
</p>
</div>
<div class="col-sm-7">
<div class="row">
<div class="col-sm-12">
<div class="panel panel-default text-left">
<div class="panel-body">
<p contenteditable="true">Status: Feeling Blue</p>
<button type="button" class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-thumbs-up"></span> Like
</button>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<div class="well">
<p>John</p>
<img src="bird.jpg" class="img-circle" height="55" width="55" alt="Avatar">
</div>
</div>
<div class="col-sm-9">
<div class="well">
<p>Just Forgot that I had to mention something about someone to someone about how I forgot something, but now I forgot it. Ahh, forget it! Or wait. I remember.... no I don't.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<div class="well">
<p>Bo</p>
<img src="bandmember.jpg" class="img-circle" height="55" width="55" alt="Avatar">
</div>
</div>
<div class="col-sm-9">
<div class="well">
<p>Just Forgot that I had to mention something about someone to someone about how I forgot something, but now I forgot it. Ahh, forget it! Or wait. I remember.... no I don't.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<div class="well">
<p>Jane</p>
<img src="bandmember.jpg" class="img-circle" height="55" width="55" alt="Avatar">
</div>
</div>
<div class="col-sm-9">
<div class="well">
<p>Just Forgot that I had to mention something about someone to someone about how I forgot something, but now I forgot it. Ahh, forget it! Or wait. I remember.... no I don't.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<div class="well">
<p>Anja</p>
<img src="bird.jpg" class="img-circle" height="55" width="55" alt="Avatar">
</div>
</div>
<div class="col-sm-9">
<div class="well">
<p>Just Forgot that I had to mention something about someone to someone about how I forgot something, but now I forgot it. Ahh, forget it! Or wait. I remember.... no I don't.</p>
</div>
</div>
</div>
<div style="border: 1px solid black" class="navbar navbar-fixed-bottom">
<button type="button" class="btn btn-primary">
<span class="glyphicon glyphicon-thumbs-up"></span> Save
</button>
</div>
</div>
<div class="col-sm-2 well">
<div class="thumbnail">
<p>Upcoming Events:</p>
<img src="paris.jpg" alt="Paris" width="400" height="300">
<p><strong>Paris</strong>
</p>
<p>Fri. 27 November 2015</p>
<button class="btn btn-primary">Info</button>
</div>
<div class="well">
<p>ADS</p>
</div>
<div class="well">
<p>ADS</p>
</div>
</div>
</div>
</div>
</body>
</html>
Add col-sm-offset-3 col-sm-7 to the class attribute of the div with navbar-fixed-bottom.
updated fiddle
Related
I have been trying to make a portfolio website for myself.
But for 'My works' div when I apply the Bootstrap class, I am not getting the result as I am expected to get. The alignment of the div is not in a grid.
Here's how it shows up:
I am not able to fix this problem.
The HTML code:
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Responsive Portfolio Template">
<meta name="author" content="Suvrat Jain">
<title>Responsive Bootstrap Template for Portfolio</title>
<!-- Bootstrap core CSS -->
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation" id="menu">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<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="#"><i class="fa fa-globe"></i></a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
<div class="container-fluid splash" id="splash">
<div class="container">
<img src="https://s-media-cache-ak0.pinimg.com/736x/71/9e/59/719e59481d2be40a77ab6c3386fc0a45--photoshop-illustrator-illustrator-tutorials.jpg" alt="Portrait of Mr. Roboto" class="profile-image">
<h1>HELLO!</h1>
<h1 class="intro-text"><span class="lead" id="typed">I am a </span></h1>
<span class="continue"><i class="fa fa-angle-down"></i></span>
</div>
</div>
<!-- About Section -->
<section class="success" id="about">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2>About Me</h2>
<hr class="star-light">
</div>
</div>
<div class="row">
<div class="col-lg-4 col-lg-offset-2">
<p class="content-text" style="text-align:justify;">Hey there! I am a junior software developer based in Mumbai, India. I work with some of the popular front end technologies to create beautiful websites that get noticed. I seek experience to gain more knowledge in the web development field.
</p>
</div>
<div class="col-lg-4">
<p class="content-text">If you are in need of a beautiful simple website, I'm your guy. I look forward to talking to you soon!</p>
</div>
<div class="col-lg-8 col-lg-offset-2 text-center contact-button">
<a href="#contact" class="btn btn-lg btn-outline">
<i class="fa fa-envelope"></i> Contact Me
</a>
</div>
</div>
</div>
</section>
<div class="container-fluid portfolio-container-holder content-section" id="portfolio">
<div class="portfolio-container container">
<h1 class="text-center">My Portfolio</h1>
<hr class="star-portfolio">
<div class="row">
<div class="col-md-6 col-xs-11 col-sm-6 portfolio-card-holder">
<div class=" portfolio-card">
<img src="https://i.ibb.co/QFX1CKL/8705c160752271.png" alt="Portfolio" class="img-responsive portfolio-img">
<div class="portfolio-img-desc">
<p>Quantum Computing and cryptocurrency</p>
</div>
</div>
</div>
<div class="col-md-6 col-xs-11 col-sm-6 portfolio-card-holder">
<div class=" portfolio-card">
<img src="https://i.ibb.co/GVr9drm/illu-app-modernization-whtbg.png" alt="Portfolio" class="img-responsive portfolio-img">
<div class="portfolio-img-desc">
<p>Logistic Regression in Machine Learning</p>
</div>
</div>
</div>
<div class="col-md-6 col-xs-11 col-sm-6 portfolio-card-holder">
<div class=" portfolio-card">
<img src="https://i.ibb.co/nwzg94P/0-Yb-Vi-GAYNXI51ek-E.png" alt="Portfolio" class="img-responsive portfolio-img">
<div class="portfolio-img-desc">
<p>Introduction to Computer Vision</p>
</div>
</div>
</div>
<div class="col-md-6 col-xs-11 col-sm-6 portfolio-card-holder">
<div class=" portfolio-card">
<img src="https://i.ibb.co/5vNfRC9/depositphotos-1245773-stock-photo-simple-math-example.png" alt="Portfolio" class="img-responsive portfolio-img">
<div class="portfolio-img-desc">
<p>Addition of Two Numbers in Python</p>
</div>
</div>
</div>
<div class="col-md-6 col-xs-11 col-sm-6 portfolio-card-holder">
<div class=" portfolio-card">
<img src="https://i.ibb.co/GVr9drm/illu-app-modernization-whtbg.png" alt="Portfolio" class="img-responsive portfolio-img">
<div class="portfolio-img-desc">
<p>Logistic Regression in Machine Learning</p>
</div>
</div>
</div>
<div class="col-md-6 col-xs-11 col-sm-6 portfolio-card-holder">
<div class=" portfolio-card">
<img src="https://i.ibb.co/nwzg94P/0-Yb-Vi-GAYNXI51ek-E.png" alt="Portfolio" class="img-responsive portfolio-img">
<div class="portfolio-img-desc">
<p>AI: myths versus reality</p>
</div>
</div>
</div>
<div class="col-md-6 col-xs-11 col-sm-6 portfolio-card-holder">
<div class=" portfolio-card">
<img src="https://i.ibb.co/nwzg94P/0-Yb-Vi-GAYNXI51ek-E.png" alt="Portfolio" class="img-responsive portfolio-img">
<div class="portfolio-img-desc">
<p>Introduction to Computer Vision</p>
</div>
</div>
</div>
<div class="col-md-6 col-xs-11 col-sm-6 portfolio-card-holder">
<div class=" portfolio-card">
<img src="https://i.ibb.co/nwzg94P/0-Yb-Vi-GAYNXI51ek-E.png" alt="Portfolio" class="img-responsive portfolio-img">
<div class="portfolio-img-desc">
<p>Introduction to Computer Vision</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Contact form -->
<div class="container-fluid contact-me-container content-section" id="contact">
<div class="container">
<h1 class="intro-text text-center">Contact Me</h1>
<hr class="star-light">
<div class="row">
<div class="col-sm-12 col-md-12">
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><i class="fa fa-user"></i></div>
<input type="text" class="form-control" id="name" placeholder="Name">
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><i class="fa fa-at"></i></div>
<input type="text" class="form-control" id="email" placeholder="Email ID">
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><i class="fa fa-phone"></i></div>
<input type="text" class="form-control" id="phone" placeholder="Phone Number">
</div>
</div>
</div>
<div class="col-sm-12">
<textarea class="form-control" rows="5" placeholder="Message"></textarea>
</div>
</div>
<div class="text-center">
<button class="btn btn-default submit-button btn-lg btn-primary"><i class="fa fa-paper-plane"></i> Send</button>
</div>
</div>
</div>
<!-- Footer -->
<footer>
<div class="container footer-container">
<div class="row footer-row">
<div class="col-xs-12 col-sm-6 col-md-6 text-center">
<h4 class="text-center">Find me here</h4>
<address> <strong><i class="fa fa-location-arrow"></i> Monsters Inc.</strong><br>Lorem ipsum dolor, sir amet,<br>Aurangabad, India 431001<br><br><a class="tel" href="tel:9999988888" type="tel"><i class="fa fa-mobile"></i><span> +91 </span></a></address>
</div>
<div class="col-xs-12 col-md-6 col-sm-6 social-section">
<div class="text-center">
<h4 class="text-center">Also, I can be found here</h4>
<div class="text-center social-buttons">
<a href="https://www.linkedin.com/in/simplysuvi" class="btn btn-default btn-lg social-button link-linkedin"><i class="fa fa-linkedin"></i>
</a>
<a href="https://instagram.com/simplysuvi" class="btn btn-default btn-lg social-button link-instagram"><i class="fa fa-instagram"></i>
</a>
</div>
<hr class="footer-hr">
<h4 class="author">Made with <i class="fa fa-heart"></i> by <strong>Akshra Dube</strong></h4>
</div>
</div>
</div>
</div>
</footer>
<!-- Bootstrap core JavaScript -->
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
</body>
</html>
Issue is with columns used for a single row.
Note that, each row can have only 12 columns. But you are using multiple columns in a single row. so it doesn't work like that.
Refer this more details - https://getbootstrap.com/docs/4.0/layout/grid/
You can try enclosing two cards per each row (assuming you wanted to show twoo cards per row). see below code. Hope this helps.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Responsive Portfolio Template">
<meta name="author" content="Suvrat Jain">
<title>Responsive Bootstrap Template for Portfolio</title>
<!-- Bootstrap core CSS -->
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation" id="menu">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<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="#"><i class="fa fa-globe"></i></a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
<div class="container-fluid splash" id="splash">
<div class="container">
<img src="https://s-media-cache-ak0.pinimg.com/736x/71/9e/59/719e59481d2be40a77ab6c3386fc0a45--photoshop-illustrator-illustrator-tutorials.jpg" alt="Portrait of Mr. Roboto" class="profile-image">
<h1>HELLO!</h1>
<h1 class="intro-text"><span class="lead" id="typed">I am a </span></h1>
<span class="continue"><i class="fa fa-angle-down"></i></span>
</div>
</div>
<!-- About Section -->
<section class="success" id="about">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2>About Me</h2>
<hr class="star-light">
</div>
</div>
<div class="row">
<div class="col-lg-4 col-lg-offset-2">
<p class="content-text" style="text-align:justify;">Hey there! I am a junior software developer based in Mumbai, India. I work with some of the popular front end technologies to create beautiful websites that get noticed. I seek experience to gain more knowledge in the web development field.
</p>
</div>
<div class="col-lg-4">
<p class="content-text">If you are in need of a beautiful simple website, I'm your guy. I look forward to talking to you soon!</p>
</div>
<div class="col-lg-8 col-lg-offset-2 text-center contact-button">
<a href="#contact" class="btn btn-lg btn-outline">
<i class="fa fa-envelope"></i> Contact Me
</a>
</div>
</div>
</div>
</section>
<div class="container-fluid portfolio-container-holder content-section" id="portfolio">
<div class="portfolio-container container">
<h1 class="text-center">My Portfolio</h1>
<hr class="star-portfolio">
<div class="row">
<div class="col-md-6 col-xs-11 col-sm-6 portfolio-card-holder">
<div class=" portfolio-card">
<img src="https://i.ibb.co/QFX1CKL/8705c160752271.png" alt="Portfolio" class="img-responsive portfolio-img">
<div class="portfolio-img-desc">
<p>Quantum Computing and cryptocurrency</p>
</div>
</div>
</div>
<div class="col-md-6 col-xs-11 col-sm-6 portfolio-card-holder">
<div class=" portfolio-card">
<img src="https://i.ibb.co/GVr9drm/illu-app-modernization-whtbg.png" alt="Portfolio" class="img-responsive portfolio-img">
<div class="portfolio-img-desc">
<p>Logistic Regression in Machine Learning</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-xs-11 col-sm-6 portfolio-card-holder">
<div class=" portfolio-card">
<img src="https://i.ibb.co/nwzg94P/0-Yb-Vi-GAYNXI51ek-E.png" alt="Portfolio" class="img-responsive portfolio-img">
<div class="portfolio-img-desc">
<p>Introduction to Computer Vision</p>
</div>
</div>
</div>
<div class="col-md-6 col-xs-11 col-sm-6 portfolio-card-holder">
<div class=" portfolio-card">
<img src="https://i.ibb.co/5vNfRC9/depositphotos-1245773-stock-photo-simple-math-example.png" alt="Portfolio" class="img-responsive portfolio-img">
<div class="portfolio-img-desc">
<p>Addition of Two Numbers in Python</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-xs-11 col-sm-6 portfolio-card-holder">
<div class=" portfolio-card">
<img src="https://i.ibb.co/GVr9drm/illu-app-modernization-whtbg.png" alt="Portfolio" class="img-responsive portfolio-img">
<div class="portfolio-img-desc">
<p>Logistic Regression in Machine Learning</p>
</div>
</div>
</div>
<div class="col-md-6 col-xs-11 col-sm-6 portfolio-card-holder">
<div class=" portfolio-card">
<img src="https://i.ibb.co/nwzg94P/0-Yb-Vi-GAYNXI51ek-E.png" alt="Portfolio" class="img-responsive portfolio-img">
<div class="portfolio-img-desc">
<p>AI: myths versus reality</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-xs-11 col-sm-6 portfolio-card-holder">
<div class=" portfolio-card">
<img src="https://i.ibb.co/nwzg94P/0-Yb-Vi-GAYNXI51ek-E.png" alt="Portfolio" class="img-responsive portfolio-img">
<div class="portfolio-img-desc">
<p>Introduction to Computer Vision</p>
</div>
</div>
</div>
<div class="col-md-6 col-xs-11 col-sm-6 portfolio-card-holder">
<div class=" portfolio-card">
<img src="https://i.ibb.co/nwzg94P/0-Yb-Vi-GAYNXI51ek-E.png" alt="Portfolio" class="img-responsive portfolio-img">
<div class="portfolio-img-desc">
<p>Introduction to Computer Vision</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Contact form -->
<div class="container-fluid contact-me-container content-section" id="contact">
<div class="container">
<h1 class="intro-text text-center">Contact Me</h1>
<hr class="star-light">
<div class="row">
<div class="col-sm-12 col-md-12">
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><i class="fa fa-user"></i></div>
<input type="text" class="form-control" id="name" placeholder="Name">
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><i class="fa fa-at"></i></div>
<input type="text" class="form-control" id="email" placeholder="Email ID">
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><i class="fa fa-phone"></i></div>
<input type="text" class="form-control" id="phone" placeholder="Phone Number">
</div>
</div>
</div>
<div class="col-sm-12">
<textarea class="form-control" rows="5" placeholder="Message"></textarea>
</div>
</div>
<div class="text-center">
<button class="btn btn-default submit-button btn-lg btn-primary"><i class="fa fa-paper-plane"></i> Send</button>
</div>
</div>
</div>
<!-- Footer -->
<footer>
<div class="container footer-container">
<div class="row footer-row">
<div class="col-xs-12 col-sm-6 col-md-6 text-center">
<h4 class="text-center">Find me here</h4>
<address> <strong><i class="fa fa-location-arrow"></i> Monsters Inc.</strong><br>Lorem ipsum dolor, sir amet,<br>Aurangabad, India 431001<br><br><a class="tel" href="tel:9999988888" type="tel"><i class="fa fa-mobile"></i><span> +91 </span></a></address>
</div>
<div class="col-xs-12 col-md-6 col-sm-6 social-section">
<div class="text-center">
<h4 class="text-center">Also, I can be found here</h4>
<div class="text-center social-buttons">
<a href="https://www.linkedin.com/in/simplysuvi" class="btn btn-default btn-lg social-button link-linkedin"><i class="fa fa-linkedin"></i>
</a>
<a href="https://instagram.com/simplysuvi" class="btn btn-default btn-lg social-button link-instagram"><i class="fa fa-instagram"></i>
</a>
</div>
<hr class="footer-hr">
<h4 class="author">Made with <i class="fa fa-heart"></i> by <strong>Akshra Dube</strong></h4>
</div>
</div>
</div>
</div>
</footer>
<!-- Bootstrap core JavaScript -->
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
</body>
</html>
I need to align content in one of the columns in html like on the picture. But for some reason, even with the right code, it's not working for me. Instead of the content being close to the image, it's away from it. Can anyone tell me where is my error or what I'm doing wrong? Attached below are the code and image of what it should look like. Would appreciate any help! Here is the link to the github and picture:
/* body { padding-top: 70px; } */
html, body {
background-image: url(images/art/stucco/stucco.png);
}
.info {
background-color: #fff;
}
h1 {
font-size: 3em;
font-weight: bold;
}
.price {
color: red;
font-size: 1.4em;
font-weight: bold;
}
.similarTitle {
}
.cartText {
font-size: 0.75em;
}
footer {
background-color: #E7E7E7;
}
.tight-form-group {
font-size: 0.9em;
}
#copyrightRow {
background-color: #3A3A3A;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<title>Assignment 1 - Page 1</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<!-- Custom styles for this template -->
<link href="pageOne.css" rel="stylesheet">
</head>
<body>
<header>
<div id="topHeaderRow">
<div class="container">
<nav class="navbar navbar-inverse" role="navigation">
<div class="navbar-header">
<p class="navbar-text">Welcome to <b>Art Store</b>,
Login or Create new account
</p>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse pull-right">
<ul class="nav navbar-nav">
<li><span class="glyphicon glyphicon-user">My Account</span></li>
<li><span class="glyphicon glyphicon-gift">Wish List</span></li>
<li><span class="glyphicon glyphicon-shopping-cart">Shopping Cart</span></li>
<li><span class="glyphicon glyphicon-arrow-right">Checkout</span></li>
</ul>
</div>
</nav>
</div>
</div>
<div id="logoRow">
<div class="container">
<div class="row">
<div class="col-md-8">
<h1>Art Store</h1>
</div>
<div class="col-md-4">
<form class="form-inline" role="search">
<div class="input-group">
<label class="sr-only" for="search">Search</label>
<input type="text" placeholder="Search.." class="form-control" />
<span class="input-group-btn">
<button class="btn btn-default" type="submit"><span class="glyphicon glyphicon-search"></span> </button>
</span>
</div>
</form>
</div>
</div>
</div>
</div>
<div id="mainNavigationRow">
<div class="container">
<nav class="navbar navbar-default" role="navigation">
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About Us</li>
<li>Art Work</li>
<li>Artists</li>
</ul>
</div>
</nav>
</div>
</div>
</header>
<div class="container">
<div class="info">
<div class="row">
<div class="col-md-10">
<h2>Self-portait in a Straw Hat</h2>
<p>By Elisabeth Louise Vigée Le Brun</p>
</div>
</div>
<div class="row">
<div class="col-md-5">
<img src="images/art/113010-m.jpg" class="img-thumbnail img-responsive" />
</div>
<div class="col-md-7">
<p>The painting appears, after cleaning, to be an authograph replica of a picture, the original of which was painted in Brusseles in 1782 in free imitation of Rubens's 'Chapeau de Paile', which LeBrun had seen in Antwerp. It was exhibited in Paris in 1782 at the Salon de la Correspondance. LeBrun's original is recorded in a private collection in France.</p>
<p class="price">$700</p>
<div class="btn-group btn-group-lg">
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-gift">Add to Wish List</span>
</button>
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-shopping-cart">Add to Shopping Cart</span>
</button>
<p> </p>
</div>
<div class="panel panel-default">
<div class="panel-heading">Product Details</div>
<table class="table">
<tr>
<th>Date:</th>
<td>1782</td>
</tr>
<tr>
<th>Medium:</th>
<td>Oil on canvas</td>
</tr>
<tr>
<th>Dimentions:</th>
<td>98cm x 71cm</td>
</tr>
<tr>
<th>Home:</th>
<td>National Gallery, London</td>
</tr>
<tr>
<th>Genres:</th>
<td>Realism, Rococo</td>
</tr>
<tr>
<th>Subjects:</th>
<td>People, Arts</td>
</tr>
</table>
</div>
</div>
<div class="col-md-2">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Cart</h3>
</div>
<div class="panel-body">
<div class="media">
<a class="pull-left" href="#"><img class="media-object" src="images/art/tiny/116010.jpg" width="41px"></a>
<div class="media-body">
<p class="cartText">Artist Holding a Thistle</p>
</div>
</div>
<div class="media">
<a class="pull-left" href="#"><img class="media-object" src="images/art/tiny/113010.jpg" width="41px"></a>
<div class="media-body">
<p class="cartText">Self-portrait in a Straw Hat</p>
</div>
</div>
<strong class="cartText">Subtotal: <span class="text-warning">$1200</span></strong>
<div>
<button type="button" class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-info-sign">Edit</span></button>
<button type="button" class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-arrow-right">Checkout</span></button>
</div>
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">Popular Artists</h3>
</div>
<div class="panel-body">
<ul class="nav nav-pills nav-stacked">
<li>Caravaggio</li>
<li>Cezanne</li>
<li>Matisse</li>
<li>Michelangelo</li>
<li>Picasso</li>
<li>Raphael</li>
<li>Van Gogh</li>
</ul>
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">Popular Genres</h3>
</div>
<div class="panel-body">
<ul class="nav nav-pills nav-stacked">
<li>Baroque</li>
<li>Cubism</li>
<li>Impressionism</li>
<li>Renaissance</li>
</ul>
</div>
</div>
</div>
</div>
<p> </p>
<h3>Similar Products</h3>
<div class="row">
<div class="col-md-3">
<div class="thumbnail">
<img src="images/art/thumbs/116010.jpg" class="img-thumbnail img-responsive" />
<div class="caption">
<p class="similarTitle">Artist Holding a Thistle</p>
<button type="button" class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-info-sign">View</span></button>
<button type="button" class="btn btn-success btn-xs"><span class="glyphicon glyphicon-gift">Wish</span></button>
<button type="button" class="btn btn-info btn-xs"><span class="glyphicon glyphicon-shopping-cart">Cart</span></button>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="images/art/thumbs/120010.jpg" class="img-thumbnail img-responsive" />
<div class="caption">
<p class="similarTitle">Portrait of Eleanor of Toledo</p>
<button type="button" class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-info-sign">View</span></button>
<button type="button" class="btn btn-success btn-xs"><span class="glyphicon glyphicon-gift">Wish</span></button>
<button type="button" class="btn btn-info btn-xs"><span class="glyphicon glyphicon-shopping-cart">Cart</span></button>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="images/art/thumbs/107010.jpg" class="img-thumbnail img-responsive" />
<div class="caption">
<p class="similarTitle">Madame de Pompadour</p>
<button type="button" class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-info-sign">View</span></button>
<button type="button" class="btn btn-success btn-xs"><span class="glyphicon glyphicon-gift">Wish</span></button>
<button type="button" class="btn btn-info btn-xs"><span class="glyphicon glyphicon-shopping-cart">Cart</span></button>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="images/art/thumbs/106020.jpg" class="img-thumbnail img-responsive" />
<div class="caption">
<p class="similarTitle">Girl with a Pearl Earring</p>
<button type="button" class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-info-sign">View</span></button>
<button type="button" class="btn btn-success btn-xs"><span class="glyphicon glyphicon-gift">Wish</span></button>
<button type="button" class="btn btn-info btn-xs"><span class="glyphicon glyphicon-shopping-cart">Cart</span></button>
</div>
</div>
</div>
</div>
</div>
</div>
<footer>
<div class="container">
<div class="row">
<div class="col-md-3">
<h4><span class="glyphicon glyphicon-info-sign">About Us</span></h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
</div>
<div class="col-md-3">
<h4><span class="glyphicon glyphicon-earphone">Customer Service</span></h4>
<ul class="nav nav-stacked">
<li>Delivery Inforomation</li>
<li>Privacy Policy</li>
<li>Shipping</li>
<li>Terms and Conditions</li>
</ul>
</div>
<div class="col-md-3">
<h4><span class="glyphicon glyphicon-shopping-cart">Just Ordered</span></h4>
<div class="media">
<a class="pull-left" href="#"><img class="media-object" src="images/art/tiny/13030.jpg" /></a>
<div class="media-body">
<p class="media-heading similarTitle">Arrangement in Grey and Black</p>
<em>5 minutes ago</em>
</div>
<div class="media">
<a class="pull-left" href="#"><img class="media-object" src="images/art/tiny/116010.jpg" /></a>
<div class="media-body">
<p class="media-heading similarTitle">Artist Holding a Thistle</p>
<em>5 minutes ago</em>
</div>
</div>
<div class="media">
<a class="pull-left" href="#"><img class="media-object" src="images/art/tiny/113010.jpg" /></a>
<div class="media-body">
<p class="media-heading similarTitle">Self-portrait in a Straw Hat</p>
<em>5 minutes ago</em>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<h4><span class="glyphicon glyphicon-envelope">Contact Us</span></h4>
<form role="form">
<div class="form-group tight-form-group">
<label class="sr-only" for="name">Name</label>
<input type="text" class="form-control" placeholder="Enter name ..." />
</div>
<div class="form-group tight-form-group">
<label class="sr-only" for="email">Email</label>
<input type="email" class="form-control" placeholder="Enter email ..." />
</div>
<div class="form-group tight-form-group">
<label class="sr-only" for="message">Message</label>
<textarea class="form-control" placeholder="Enter message ..."></textarea>
</div>
<button type="submit" class="btn btn-primary btn-block">Submit</button>
</form>
</div>
</div>
</div>
<div id="copyrightRow">
<div class="container">
<div class="row">
<p class="text-muted">All images are copyright to their owners. This is just a hypothetical sitemuted"<span class="pull-right">Ⓒ2014 Copyright Art Store</span></p>
</div>
</div>
</div>
</footer>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</body>
</html>
With couple of changes to the row - col divs below is the code snippet that might be the solution to you problem. (Though the images are missing, it comes close to screenshot you have posted).
/* body { padding-top: 70px; } */
html,
body {
background-image: url(images/art/stucco/stucco.png);
}
.info {
background-color: #fff;
}
h1 {
font-size: 3em;
font-weight: bold;
}
.price {
color: red;
font-size: 1.4em;
font-weight: bold;
}
.similarTitle {}
.cartText {
font-size: 0.75em;
}
footer {
background-color: #E7E7E7;
}
.tight-form-group {
font-size: 0.9em;
}
#copyrightRow {
background-color: #3A3A3A;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<title>Assignment 1 - Page 1</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<!-- Custom styles for this template -->
<link href="pageOne.css" rel="stylesheet">
</head>
<body>
<header>
<div id="topHeaderRow">
<div class="container">
<nav class="navbar navbar-inverse" role="navigation">
<div class="navbar-header">
<p class="navbar-text">Welcome to <b>Art Store</b>,
Login or Create new account
</p>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse pull-right">
<ul class="nav navbar-nav">
<li><span class="glyphicon glyphicon-user">My Account</span></li>
<li><span class="glyphicon glyphicon-gift">Wish List</span></li>
<li><span class="glyphicon glyphicon-shopping-cart">Shopping Cart</span></li>
<li><span class="glyphicon glyphicon-arrow-right">Checkout</span></li>
</ul>
</div>
</nav>
</div>
</div>
<div id="logoRow">
<div class="container">
<div class="row">
<div class="col-md-8">
<h1>Art Store</h1>
</div>
<div class="col-md-4">
<form class="form-inline" role="search">
<div class="input-group">
<label class="sr-only" for="search">Search</label>
<input type="text" placeholder="Search.." class="form-control" />
<span class="input-group-btn">
<button class="btn btn-default" type="submit"><span class="glyphicon glyphicon-search"></span> </button>
</span>
</div>
</form>
</div>
</div>
</div>
</div>
<div id="mainNavigationRow">
<div class="container">
<nav class="navbar navbar-default" role="navigation">
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About Us</li>
<li>Art Work</li>
<li>Artists</li>
</ul>
</div>
</nav>
</div>
</div>
</header>
<div class="container">
<div class="info">
<div class="row">
<div class="col-md-10">
<h2>Self-portait in a Straw Hat</h2>
<p>By Elisabeth Louise Vigée Le Brun</p>
</div>
</div>
<div class="row">
<div class="col-md-10">
<div class="row">
<div class="col-md-5">
<img src="images/art/113010-m.jpg" class="img-thumbnail img-responsive" />
</div>
<div class="col-md-7">
<p>The painting appears, after cleaning, to be an authograph replica of a picture, the original of which was painted in Brusseles in 1782 in free imitation of Rubens's 'Chapeau de Paile', which LeBrun had seen in Antwerp. It was exhibited in
Paris in 1782 at the Salon de la Correspondance. LeBrun's original is recorded in a private collection in France.</p>
<p class="price">$700</p>
<div class="btn-group btn-group-lg">
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-gift">Add to Wish List</span>
</button>
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-shopping-cart">Add to Shopping Cart</span>
</button>
<p> </p>
</div>
<div class="panel panel-default">
<div class="panel-heading">Product Details</div>
<table class="table">
<tr>
<th>Date:</th>
<td>1782</td>
</tr>
<tr>
<th>Medium:</th>
<td>Oil on canvas</td>
</tr>
<tr>
<th>Dimentions:</th>
<td>98cm x 71cm</td>
</tr>
<tr>
<th>Home:</th>
<td>National Gallery, London</td>
</tr>
<tr>
<th>Genres:</th>
<td>Realism, Rococo</td>
</tr>
<tr>
<th>Subjects:</th>
<td>People, Arts</td>
</tr>
</table>
</div>
</div>
<p> </p>
<h3>Similar Products</h3>
<div class="col-md-3">
<div class="thumbnail">
<img src="images/art/thumbs/116010.jpg" class="img-thumbnail img-responsive" />
<div class="caption">
<p class="similarTitle">Artist Holding a Thistle</p>
<button type="button" class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-info-sign">View</span></button>
<button type="button" class="btn btn-success btn-xs"><span class="glyphicon glyphicon-gift">Wish</span></button>
<button type="button" class="btn btn-info btn-xs"><span class="glyphicon glyphicon-shopping-cart">Cart</span></button>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="images/art/thumbs/120010.jpg" class="img-thumbnail img-responsive" />
<div class="caption">
<p class="similarTitle">Portrait of Eleanor of Toledo</p>
<button type="button" class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-info-sign">View</span></button>
<button type="button" class="btn btn-success btn-xs"><span class="glyphicon glyphicon-gift">Wish</span></button>
<button type="button" class="btn btn-info btn-xs"><span class="glyphicon glyphicon-shopping-cart">Cart</span></button>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="images/art/thumbs/107010.jpg" class="img-thumbnail img-responsive" />
<div class="caption">
<p class="similarTitle">Madame de Pompadour</p>
<button type="button" class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-info-sign">View</span></button>
<button type="button" class="btn btn-success btn-xs"><span class="glyphicon glyphicon-gift">Wish</span></button>
<button type="button" class="btn btn-info btn-xs"><span class="glyphicon glyphicon-shopping-cart">Cart</span></button>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="images/art/thumbs/106020.jpg" class="img-thumbnail img-responsive" />
<div class="caption">
<p class="similarTitle">Girl with a Pearl Earring</p>
<button type="button" class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-info-sign">View</span></button>
<button type="button" class="btn btn-success btn-xs"><span class="glyphicon glyphicon-gift">Wish</span></button>
<button type="button" class="btn btn-info btn-xs"><span class="glyphicon glyphicon-shopping-cart">Cart</span></button>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-2">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Cart</h3>
</div>
<div class="panel-body">
<div class="media">
<a class="pull-left" href="#"><img class="media-object" src="images/art/tiny/116010.jpg" width="41px"></a>
<div class="media-body">
<p class="cartText">Artist Holding a Thistle</p>
</div>
</div>
<div class="media">
<a class="pull-left" href="#"><img class="media-object" src="images/art/tiny/113010.jpg" width="41px"></a>
<div class="media-body">
<p class="cartText">Self-portrait in a Straw Hat</p>
</div>
</div>
<strong class="cartText">Subtotal: <span class="text-warning">$1200</span></strong>
<div>
<button type="button" class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-info-sign">Edit</span></button>
<button type="button" class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-arrow-right">Checkout</span></button>
</div>
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">Popular Artists</h3>
</div>
<div class="panel-body">
<ul class="nav nav-pills nav-stacked">
<li>Caravaggio</li>
<li>Cezanne</li>
<li>Matisse</li>
<li>Michelangelo</li>
<li>Picasso</li>
<li>Raphael</li>
<li>Van Gogh</li>
</ul>
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">Popular Genres</h3>
</div>
<div class="panel-body">
<ul class="nav nav-pills nav-stacked">
<li>Baroque</li>
<li>Cubism</li>
<li>Impressionism</li>
<li>Renaissance</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<footer>
<div class="container">
<div class="row">
<div class="col-md-3">
<h4><span class="glyphicon glyphicon-info-sign">About Us</span></h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
</div>
<div class="col-md-3">
<h4><span class="glyphicon glyphicon-earphone">Customer Service</span></h4>
<ul class="nav nav-stacked">
<li>Delivery Inforomation</li>
<li>Privacy Policy</li>
<li>Shipping</li>
<li>Terms and Conditions</li>
</ul>
</div>
<div class="col-md-3">
<h4><span class="glyphicon glyphicon-shopping-cart">Just Ordered</span></h4>
<div class="media">
<a class="pull-left" href="#"><img class="media-object" src="images/art/tiny/13030.jpg" /></a>
<div class="media-body">
<p class="media-heading similarTitle">Arrangement in Grey and Black</p>
<em>5 minutes ago</em>
</div>
<div class="media">
<a class="pull-left" href="#"><img class="media-object" src="images/art/tiny/116010.jpg" /></a>
<div class="media-body">
<p class="media-heading similarTitle">Artist Holding a Thistle</p>
<em>5 minutes ago</em>
</div>
</div>
<div class="media">
<a class="pull-left" href="#"><img class="media-object" src="images/art/tiny/113010.jpg" /></a>
<div class="media-body">
<p class="media-heading similarTitle">Self-portrait in a Straw Hat</p>
<em>5 minutes ago</em>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<h4><span class="glyphicon glyphicon-envelope">Contact Us</span></h4>
<form role="form">
<div class="form-group tight-form-group">
<label class="sr-only" for="name">Name</label>
<input type="text" class="form-control" placeholder="Enter name ..." />
</div>
<div class="form-group tight-form-group">
<label class="sr-only" for="email">Email</label>
<input type="email" class="form-control" placeholder="Enter email ..." />
</div>
<div class="form-group tight-form-group">
<label class="sr-only" for="message">Message</label>
<textarea class="form-control" placeholder="Enter message ..."></textarea>
</div>
<button type="submit" class="btn btn-primary btn-block">Submit</button>
</form>
</div>
</div>
</div>
<div id="copyrightRow">
<div class="container">
<div class="row">
<p class="text-muted">All images are copyright to their owners. This is just a hypothetical sitemuted"<span class="pull-right">Ⓒ2014 Copyright Art Store</span></p>
</div>
</div>
</div>
</footer>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</body>
</html>
Hope this helps. Don't forget to mark as answer if it helps. (Run the code snippet in full screen mode)
Thank you. :)
Just separate your bootstrap column become col-md-4,col-md-6,col-md-2 to get visible same line. And also always use the text after the icon <span class="glyphicon glyphicon-gift"></span> Add to Wish List . I hope this solution will be helpful.
/* body { padding-top: 70px; } */
html,
body {
background-image: url(images/art/stucco/stucco.png);
}
.info {
background-color: #fff;
}
h1 {
font-size: 3em;
font-weight: bold;
}
.price {
color: red;
font-size: 1.4em;
font-weight: bold;
}
.similarTitle {}
.cartText {
font-size: 0.75em;
}
footer {
background-color: #E7E7E7;
}
.tight-form-group {
font-size: 0.9em;
}
#copyrightRow {
background-color: #3A3A3A;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<title>Assignment 1 - Page 1</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<!-- Custom styles for this template -->
<link href="style.css" rel="stylesheet">
</head>
<body>
<header>
<div id="topHeaderRow">
<div class="container">
<nav class="navbar navbar-inverse" role="navigation">
<div class="navbar-header">
<p class="navbar-text">Welcome to <b>Art Store</b>,
Login or Create new account
</p>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse pull-right">
<ul class="nav navbar-nav">
<li><span class="glyphicon glyphicon-user">My Account</span></li>
<li><span class="glyphicon glyphicon-gift">Wish List</span></li>
<li><span class="glyphicon glyphicon-shopping-cart">Shopping Cart</span></li>
<li><span class="glyphicon glyphicon-arrow-right">Checkout</span></li>
</ul>
</div>
</nav>
</div>
</div>
<div id="logoRow">
<div class="container">
<div class="row">
<div class="col-sm-8">
<h1>Art Store</h1>
</div>
<div class="col-sm-4">
<form class="form-inline" role="search">
<div class="input-group">
<label class="sr-only" for="search">Search</label>
<input type="text" placeholder="Search.." class="form-control" />
<span class="input-group-btn">
<button class="btn btn-default" type="submit"><span class="glyphicon glyphicon-search"></span> </button>
</span>
</div>
</form>
</div>
</div>
</div>
</div>
<div id="mainNavigationRow">
<div class="container">
<nav class="navbar navbar-default" role="navigation">
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About Us</li>
<li>Art Work</li>
<li>Artists</li>
</ul>
</div>
</nav>
</div>
</div>
</header>
<div class="container">
<div class="info">
<div class="row">
<div class="col-md-10">
<h2>Self-portait in a Straw Hat</h2>
<p>By Elisabeth Louise Vigée Le Brun</p>
</div>
</div>
<div class="row">
<div class="col-md-4">
<img src="http://via.placeholder.com/300" class="img-thumbnail img-responsive" />
</div>
<div class="col-md-6">
<p>The painting appears, after cleaning, to be an authograph replica of a picture, the original of which was painted in Brusseles in 1782 in free imitation of Rubens's 'Chapeau de Paile', which LeBrun had seen in Antwerp. It was exhibited in Paris in 1782 at the Salon de la Correspondance. LeBrun's original is recorded in a private collection in France.</p>
<p class="price">$700</p>
<div class="btn-group btn-group-lg">
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-gift"></span> Add to Wish List
</button>
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-shopping-cart"></span> Add to Shopping Cart
</button>
<p> </p>
</div>
<div class="panel panel-default">
<div class="panel-heading">Product Details</div>
<table class="table">
<tr>
<th>Date:</th>
<td>1782</td>
</tr>
<tr>
<th>Medium:</th>
<td>Oil on canvas</td>
</tr>
<tr>
<th>Dimentions:</th>
<td>98cm x 71cm</td>
</tr>
<tr>
<th>Home:</th>
<td>National Gallery, London</td>
</tr>
<tr>
<th>Genres:</th>
<td>Realism, Rococo</td>
</tr>
<tr>
<th>Subjects:</th>
<td>People, Arts</td>
</tr>
</table>
</div>
</div>
<div class="col-md-2">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Cart</h3>
</div>
<div class="panel-body">
<div class="media">
<a class="pull-left" href="#"><img class="media-object" src="http://via.placeholder.com/300" width="41"></a>
<div class="media-body">
<p class="cartText">Artist Holding a Thistle</p>
</div>
</div>
<div class="media">
<a class="pull-left" href="#"><img class="media-object" src="http://via.placeholder.com/300" width="41"></a>
<div class="media-body">
<p class="cartText">Self-portrait in a Straw Hat</p>
</div>
</div>
<strong class="cartText">Subtotal: <span class="text-warning">$1200</span></strong>
<div>
<button type="button" class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-info-sign"></span>Edit</button>
<button type="button" class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-arrow-right"></span>Checkout</button>
</div>
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">Popular Artists</h3>
</div>
<div class="panel-body">
<ul class="nav nav-pills nav-stacked">
<li>Caravaggio</li>
<li>Cezanne</li>
<li>Matisse</li>
<li>Michelangelo</li>
<li>Picasso</li>
<li>Raphael</li>
<li>Van Gogh</li>
</ul>
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">Popular Genres</h3>
</div>
<div class="panel-body">
<ul class="nav nav-pills nav-stacked">
<li>Baroque</li>
<li>Cubism</li>
<li>Impressionism</li>
<li>Renaissance</li>
</ul>
</div>
</div>
</div>
</div>
<p> </p>
<h3>Similar Products</h3>
<div class="row">
<div class="col-md-3">
<div class="thumbnail">
<img src="http://via.placeholder.com/300" class="img-thumbnail img-responsive" />
<div class="caption">
<p class="similarTitle">Artist Holding a Thistle</p>
<button type="button" class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-info-sign"></span>View</button>
<button type="button" class="btn btn-success btn-xs"><span class="glyphicon glyphicon-gift"></span>Wish</button>
<button type="button" class="btn btn-info btn-xs"><span class="glyphicon glyphicon-shopping-cart"></span>Cart</button>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="http://via.placeholder.com/300" class="img-thumbnail img-responsive" />
<div class="caption">
<p class="similarTitle">Portrait of Eleanor of Toledo</p>
<button type="button" class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-info-sign"></span>View</button>
<button type="button" class="btn btn-success btn-xs"><span class="glyphicon glyphicon-gift"></span>Wish</button>
<button type="button" class="btn btn-info btn-xs"><span class="glyphicon glyphicon-shopping-cart"></span>Cart</button>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="http://via.placeholder.com/300" class="img-thumbnail img-responsive" />
<div class="caption">
<p class="similarTitle">Madame de Pompadour</p>
<button type="button" class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-info-sign"></span>View</button>
<button type="button" class="btn btn-success btn-xs"><span class="glyphicon glyphicon-gift"></span>Wish</button>
<button type="button" class="btn btn-info btn-xs"><span class="glyphicon glyphicon-shopping-cart"></span>Cart</button>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="http://via.placeholder.com/300" class="img-thumbnail img-responsive" />
<div class="caption">
<p class="similarTitle">Girl with a Pearl Earring</p>
<button type="button" class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-info-sign"></span>View</button>
<button type="button" class="btn btn-success btn-xs"><span class="glyphicon glyphicon-gift"></span>Wish</button>
<button type="button" class="btn btn-info btn-xs"><span class="glyphicon glyphicon-shopping-cart"></span>Cart</button>
</div>
</div>
</div>
</div>
</div>
</div>
<footer>
<div class="container">
<div class="row">
<div class="col-md-3">
<h4><span class="glyphicon glyphicon-info-sign">About Us</span></h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
</div>
<div class="col-md-3">
<h4><span class="glyphicon glyphicon-earphone">Customer Service</span></h4>
<ul class="nav nav-stacked">
<li>Delivery Inforomation</li>
<li>Privacy Policy</li>
<li>Shipping</li>
<li>Terms and Conditions</li>
</ul>
</div>
<div class="col-md-3">
<h4><span class="glyphicon glyphicon-shopping-cart">Just Ordered</span></h4>
<div class="media">
<a class="pull-left" href="#"><img class="media-object" src="images/art/tiny/13030.jpg" /></a>
<div class="media-body">
<p class="media-heading similarTitle">Arrangement in Grey and Black</p>
<em>5 minutes ago</em>
</div>
<div class="media">
<a class="pull-left" href="#"><img class="media-object" src="images/art/tiny/116010.jpg" /></a>
<div class="media-body">
<p class="media-heading similarTitle">Artist Holding a Thistle</p>
<em>5 minutes ago</em>
</div>
</div>
<div class="media">
<a class="pull-left" href="#"><img class="media-object" src="images/art/tiny/113010.jpg" /></a>
<div class="media-body">
<p class="media-heading similarTitle">Self-portrait in a Straw Hat</p>
<em>5 minutes ago</em>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<h4><span class="glyphicon glyphicon-envelope">Contact Us</span></h4>
<form role="form">
<div class="form-group tight-form-group">
<label class="sr-only" for="name">Name</label>
<input type="text" class="form-control" placeholder="Enter name ..." />
</div>
<div class="form-group tight-form-group">
<label class="sr-only" for="email">Email</label>
<input type="email" class="form-control" placeholder="Enter email ..." />
</div>
<div class="form-group tight-form-group">
<label class="sr-only" for="message">Message</label>
<textarea class="form-control" placeholder="Enter message ..."></textarea>
</div>
<button type="submit" class="btn btn-primary btn-block">Submit</button>
</form>
</div>
</div>
</div>
<div id="copyrightRow">
<div class="container">
<div class="row">
<p class="text-muted">All images are copyright to their owners. This is just a hypothetical sitemuted"<span class="pull-right">Ⓒ2014 Copyright Art Store</span></p>
</div>
</div>
</div>
</footer>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</body>
</html>
I'm using this bootstrap template here to create a page for my app.
In the center column (col-sm-7), where I will have a form, I want to create a footer/navbar/area at the bottom, that's fixed to the bottom, so that I can add buttons (ex. save, next, back).
I'm trying different things like a footer element, a bootstrap navbar with 'navbar-fixed-bottom' and a plain row with a div in it with a style where the bootom is 0 and the position is fixed, but none seem to be working correctly.
The problem is when I add any of these styles mentioned above, the width of the element fixed at the bottom doesn't stay within the center (col-sm-7) column. It ends up spanning the entire page or not enough. I just can't get it to be contained within the centered column
Any advice here to get something, anything, fixed at the bottom of just the center column so I can put buttons in it would be helpful!
Here is a sample of stuff I've tried so far
This one is with a footer.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="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>
<style>
/* Set black background color, white text and some padding */
footer {
background-color: #555;
color: white;
padding: 15px;
}
</style>
</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="#">Logo</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Messages</li>
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="form-group input-group">
<input type="text" class="form-control" placeholder="Search..">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</form>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> My Account</li>
</ul>
</div>
</div>
</nav>
<div class="container text-center">
<div class="row">
<div class="col-sm-3 well">
<div class="well">
<p>My Profile</p>
<img src="bird.jpg" class="img-circle" height="65" width="65" alt="Avatar">
</div>
<div class="well">
<p>Interests</p>
<p>
<span class="label label-default">News</span>
<span class="label label-primary">W3Schools</span>
<span class="label label-success">Labels</span>
<span class="label label-info">Football</span>
<span class="label label-warning">Gaming</span>
<span class="label label-danger">Friends</span>
</p>
</div>
<div class="alert alert-success fade in">
×
<p><strong>Ey!</strong></p>
People are looking at your profile. Find out who.
</div>
<p>Link</p>
<p>Link</p>
<p>Link</p>
</div>
<div class="col-sm-7">
<div class="row">
<div class="col-sm-12">
<div class="panel panel-default text-left">
<div class="panel-body">
<p contenteditable="true">Status: Feeling Blue</p>
<button type="button" class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-thumbs-up"></span> Like
</button>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<div class="well">
<p>John</p>
<img src="bird.jpg" class="img-circle" height="55" width="55" alt="Avatar">
</div>
</div>
<div class="col-sm-9">
<div class="well">
<p>Just Forgot that I had to mention something about someone to someone about how I forgot something, but now I forgot it. Ahh, forget it! Or wait. I remember.... no I don't.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<div class="well">
<p>Bo</p>
<img src="bandmember.jpg" class="img-circle" height="55" width="55" alt="Avatar">
</div>
</div>
<div class="col-sm-9">
<div class="well">
<p>Just Forgot that I had to mention something about someone to someone about how I forgot something, but now I forgot it. Ahh, forget it! Or wait. I remember.... no I don't.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<div class="well">
<p>Jane</p>
<img src="bandmember.jpg" class="img-circle" height="55" width="55" alt="Avatar">
</div>
</div>
<div class="col-sm-9">
<div class="well">
<p>Just Forgot that I had to mention something about someone to someone about how I forgot something, but now I forgot it. Ahh, forget it! Or wait. I remember.... no I don't.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<div class="well">
<p>Anja</p>
<img src="bird.jpg" class="img-circle" height="55" width="55" alt="Avatar">
</div>
</div>
<div class="col-sm-9">
<div class="well">
<p>Just Forgot that I had to mention something about someone to someone about how I forgot something, but now I forgot it. Ahh, forget it! Or wait. I remember.... no I don't.</p>
</div>
</div>
</div>
<footer style="bottom: 0; position: fixed" class="container-fluid text-center">
<p>Footer Text</p>
</footer>
</div>
<div class="col-sm-2 well">
<div class="thumbnail">
<p>Upcoming Events:</p>
<img src="paris.jpg" alt="Paris" width="400" height="300">
<p><strong>Paris</strong></p>
<p>Fri. 27 November 2015</p>
<button class="btn btn-primary">Info</button>
</div>
<div class="well">
<p>ADS</p>
</div>
<div class="well">
<p>ADS</p>
</div>
</div>
</div>
</div>
</body>
</html>
this one is with a navbar, but it spans the entire width of the page. Not jsut the center column.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="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>
<style>
/* Set black background color, white text and some padding */
footer {
background-color: #555;
color: white;
padding: 15px;
}
</style>
</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="#">Logo</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Messages</li>
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="form-group input-group">
<input type="text" class="form-control" placeholder="Search..">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</form>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> My Account</li>
</ul>
</div>
</div>
</nav>
<div class="container text-center">
<div class="row">
<div class="col-sm-3 well">
<div class="well">
<p>My Profile</p>
<img src="bird.jpg" class="img-circle" height="65" width="65" alt="Avatar">
</div>
<div class="well">
<p>Interests</p>
<p>
<span class="label label-default">News</span>
<span class="label label-primary">W3Schools</span>
<span class="label label-success">Labels</span>
<span class="label label-info">Football</span>
<span class="label label-warning">Gaming</span>
<span class="label label-danger">Friends</span>
</p>
</div>
<div class="alert alert-success fade in">
×
<p><strong>Ey!</strong></p>
People are looking at your profile. Find out who.
</div>
<p>Link</p>
<p>Link</p>
<p>Link</p>
</div>
<div class="col-sm-7">
<div class="row">
<div class="col-sm-12">
<div class="panel panel-default text-left">
<div class="panel-body">
<p contenteditable="true">Status: Feeling Blue</p>
<button type="button" class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-thumbs-up"></span> Like
</button>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<div class="well">
<p>John</p>
<img src="bird.jpg" class="img-circle" height="55" width="55" alt="Avatar">
</div>
</div>
<div class="col-sm-9">
<div class="well">
<p>Just Forgot that I had to mention something about someone to someone about how I forgot something, but now I forgot it. Ahh, forget it! Or wait. I remember.... no I don't.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<div class="well">
<p>Bo</p>
<img src="bandmember.jpg" class="img-circle" height="55" width="55" alt="Avatar">
</div>
</div>
<div class="col-sm-9">
<div class="well">
<p>Just Forgot that I had to mention something about someone to someone about how I forgot something, but now I forgot it. Ahh, forget it! Or wait. I remember.... no I don't.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<div class="well">
<p>Jane</p>
<img src="bandmember.jpg" class="img-circle" height="55" width="55" alt="Avatar">
</div>
</div>
<div class="col-sm-9">
<div class="well">
<p>Just Forgot that I had to mention something about someone to someone about how I forgot something, but now I forgot it. Ahh, forget it! Or wait. I remember.... no I don't.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<div class="well">
<p>Anja</p>
<img src="bird.jpg" class="img-circle" height="55" width="55" alt="Avatar">
</div>
</div>
<div class="col-sm-9">
<div class="well">
<p>Just Forgot that I had to mention something about someone to someone about how I forgot something, but now I forgot it. Ahh, forget it! Or wait. I remember.... no I don't.</p>
</div>
</div>
</div>
<div style="border: 1px solid black;" class="navbar navbar-fixed-bottom"><button>save</button></div>
</div>
<div class="col-sm-2 well">
<div class="thumbnail">
<p>Upcoming Events:</p>
<img src="paris.jpg" alt="Paris" width="400" height="300">
<p><strong>Paris</strong></p>
<p>Fri. 27 November 2015</p>
<button class="btn btn-primary">Info</button>
</div>
<div class="well">
<p>ADS</p>
</div>
<div class="well">
<p>ADS</p>
</div>
</div>
</div>
</div>
</body>
</html>
First you need to understand the Basic structure , you don't need to put the footer in -col classes , take look at the structure
In standard case you can add your code like this way
<header>
<nav>
<!-- Put the navbar here -->
</nav>
</header><!-- Header -->
<section>
<div class="container">
<div class="row">
<div class="col-sm-3">
</div><!-- .left items like my profile etc.. -->
<div class="col-sm-7">
</div><!-- . main content section here-->
<div class="col-sm-2">
</div><!-- /. upcomming section will be here -->
</div><!-- /.row -->
</div><!-- /.container -->
</section> <!-- /.content section -->
<footer>
</footer><!-- footer always stay at bottom -->
i have change your code like the way
header,
.full-width {
float: left;
width: 100%;
}
footer {
background-color: #555;
color: white;
padding: 15px;
border: 1px solid black;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="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>
</head>
<body>
<header>
<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="#">Logo</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home
</li>
<li>Messages
</li>
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="form-group input-group">
<input type="text" class="form-control" placeholder="Search..">
<span class="input-group-btn">
<button class="btn btn-default" type="button"> <span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</form>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> My Account
</li>
</ul>
</div>
</div>
</nav>
</header>
<section class="full-width">
<div class="container text-center">
<div class="row">
<div class="col-sm-3 well">
<div class="well">
<p>My Profile
</p>
<img src="bird.jpg" class="img-circle" height="65" width="65" alt="Avatar">
</div>
<div class="well">
<p>Interests
</p>
<p> <span class="label label-default">News</span> <span class="label label-primary">W3Schools</span> <span class="label label-success">Labels</span> <span class="label label-info">Football</span> <span class="label label-warning">Gaming</span>
<span class="label label-danger">Friends</span>
</p>
</div>
<div class="alert alert-success fade in"> ×
<p><strong>Ey!</strong>
</p>
People are looking at your profile. Find out who.</div>
<p>Link
</p>
<p>Link
</p>
<p>Link
</p>
</div>
<div class="col-sm-7">
<div class="row">
<div class="col-sm-12">
<div class="panel panel-default text-left">
<div class="panel-body">
<p contenteditable="true">Status: Feeling Blue</p>
<button type="button" class="btn btn-default btn-sm"> <span class="glyphicon glyphicon-thumbs-up"></span> Like</button>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<div class="well">
<p>John</p>
<img src="bird.jpg" class="img-circle" height="55" width="55" alt="Avatar">
</div>
</div>
<div class="col-sm-9">
<div class="well">
<p>Just Forgot that I had to mention something about someone to someone about how I forgot something, but now I forgot it. Ahh, forget it! Or wait. I remember.... no I don't.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<div class="well">
<p>Bo</p>
<img src="bandmember.jpg" class="img-circle" height="55" width="55" alt="Avatar">
</div>
</div>
<div class="col-sm-9">
<div class="well">
<p>Just Forgot that I had to mention something about someone to someone about how I forgot something, but now I forgot it. Ahh, forget it! Or wait. I remember.... no I don't.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<div class="well">
<p>Jane</p>
<img src="bandmember.jpg" class="img-circle" height="55" width="55" alt="Avatar">
</div>
</div>
<div class="col-sm-9">
<div class="well">
<p>Just Forgot that I had to mention something about someone to someone about how I forgot something, but now I forgot it. Ahh, forget it! Or wait. I remember.... no I don't.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<div class="well">
<p>Anja</p>
<img src="bird.jpg" class="img-circle" height="55" width="55" alt="Avatar">
</div>
</div>
<div class="col-sm-9">
<div class="well">
<p>Just Forgot that I had to mention something about someone to someone about how I forgot something, but now I forgot it. Ahh, forget it! Or wait. I remember.... no I don't.</p>
</div>
</div>
</div>
</div>
<div class="col-sm-2 well">
<div class="thumbnail">
<p>Upcoming Events:</p>
<img src="paris.jpg" alt="Paris" width="400" height="300">
<p><strong>Paris</strong>
</p>
<p>Fri. 27 November 2015</p>
<button class="btn btn-primary">Info</button>
</div>
<div class="well">
<p>ADS</p>
</div>
<div class="well">
<p>ADS</p>
</div>
</div>
</div>
</div>
</section>
<footer>
<button>save</button>
</footer>
</body>
</html>
add 2 styles to footer tag
<style>
footer {
width: 95%;
z-index: 100;
}
</style>
Here I modified your code may be it can help you.
Go through this link
CODE
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="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>
<style>
/* Set black background color, white text and some padding */
footer {
background-color: #555;
color: white;
padding: 15px;
}
</style>
</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="#">Logo</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Messages</li>
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="form-group input-group">
<input type="text" class="form-control" placeholder="Search..">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</form>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> My Account</li>
</ul>
</div>
</div>
</nav>
<div class="container text-center">
<div class="row">
<div class="col-sm-3 well">
<div class="well">
<p>My Profile</p>
<img src="bird.jpg" class="img-circle" height="65" width="65" alt="Avatar">
</div>
<div class="well">
<p>Interests</p>
<p>
<span class="label label-default">News</span>
<span class="label label-primary">W3Schools</span>
<span class="label label-success">Labels</span>
<span class="label label-info">Football</span>
<span class="label label-warning">Gaming</span>
<span class="label label-danger">Friends</span>
</p>
</div>
<div class="alert alert-success fade in">
×
<p><strong>Ey!</strong></p>
People are looking at your profile. Find out who.
</div>
<p>Link</p>
<p>Link</p>
<p>Link</p>
</div>
<div class="col-sm-7" style="position:relative;padding-bottom:10px;">
<div class="row">
<div class="col-sm-12">
<div class="panel panel-default text-left">
<div class="panel-body">
<p contenteditable="true">Status: Feeling Blue</p>
<button type="button" class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-thumbs-up"></span> Like
</button>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<div class="well">
<p>John</p>
<img src="bird.jpg" class="img-circle" height="55" width="55" alt="Avatar">
</div>
</div>
<div class="col-sm-9">
<div class="well">
<p>Just Forgot that I had to mention something about someone to someone about how I forgot something, but now I forgot it. Ahh, forget it! Or wait. I remember.... no I don't.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<div class="well">
<p>Bo</p>
<img src="bandmember.jpg" class="img-circle" height="55" width="55" alt="Avatar">
</div>
</div>
<div class="col-sm-9">
<div class="well">
<p>Just Forgot that I had to mention something about someone to someone about how I forgot something, but now I forgot it. Ahh, forget it! Or wait. I remember.... no I don't.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<div class="well">
<p>Jane</p>
<img src="bandmember.jpg" class="img-circle" height="55" width="55" alt="Avatar">
</div>
</div>
<div class="col-sm-9">
<div class="well">
<p>Just Forgot that I had to mention something about someone to someone about how I forgot something, but now I forgot it. Ahh, forget it! Or wait. I remember.... no I don't.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<div class="well">
<p>Anja</p>
<img src="bird.jpg" class="img-circle" height="55" width="55" alt="Avatar">
</div>
</div>
<div class="col-sm-9">
<div class="well">
<p>Just Forgot that I had to mention something about someone to someone about how I forgot something, but now I forgot it. Ahh, forget it! Or wait. I remember.... no I don't.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 text-center" style="background-color:#404040;color:#fff;position:absolute;bottom:0px;">
Footer
</div>
</div>
</div>
<div class="col-sm-2 well">
<div class="thumbnail">
<p>Upcoming Events:</p>
<img src="paris.jpg" alt="Paris" width="400" height="300">
<p><strong>Paris</strong></p>
<p>Fri. 27 November 2015</p>
<button class="btn btn-primary">Info</button>
</div>
<div class="well">
<p>ADS</p>
</div>
<div class="well">
<p>ADS</p>
</div>
</div>
</div>
</div>
</body>
</html>
You just need to change position of your centered div to relative and make a div with position absolute inside of that and fixed it to bottom.
it's too complicated when i copy your snippet this is the simple code i wrote, maybe you like it.
section{
height:700px;
background:#ccc;
position:relative;
z-index:20;
margin-bottom:100px;
}
footer {
background-color: #555;
color: white;
width:100%;
height:100px;
display:flex;
align-items:center;
justify-content:center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="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>
<style>
.navbar{
margin-bottom:0;}
</style>
</head>
<body>
<header>
<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="#">Logo</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Messages</li>
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="form-group input-group">
<input type="text" class="form-control" placeholder="Search..">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</form>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> My Account</li>
</ul>
</div>
</div>
</nav>
</header>
<section class="container">
your content here, it's along content i believe
</section>
<footer style="bottom: 0; position: fixed" class="container-fluid text-center">
Footer Text
</footer>
</body>
I think the easiest way for you to achieve that is to add the below to your footers style.
left: 0;
width: 100%;
Use bootstrap's affix and scrollspy. Remember to pass your custom CSS to affix class to set the style you want.
.affix {
bottom: 0;
margin: 0 auto;
background-color:#000;
z-index:9999;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="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>
<style>
/* Set black background color, white text and some padding */
footer {
background-color: #555;
color: white;
padding: 15px;
}
</style>
</head>
<body data-spy="scroll" data-target=".save">
<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="#">Logo</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Messages</li>
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="form-group input-group">
<input type="text" class="form-control" placeholder="Search..">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</form>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> My Account</li>
</ul>
</div>
</div>
</nav>
<div class="container text-center">
<div class="row">
<div class="col-sm-3 well">
<div class="well">
<p>My Profile</p>
<img src="bird.jpg" class="img-circle" height="65" width="65" alt="Avatar">
</div>
<div class="well">
<p>Interests</p>
<p>
<span class="label label-default">News</span>
<span class="label label-primary">W3Schools</span>
<span class="label label-success">Labels</span>
<span class="label label-info">Football</span>
<span class="label label-warning">Gaming</span>
<span class="label label-danger">Friends</span>
</p>
</div>
<div class="alert alert-success fade in">
×
<p><strong>Ey!</strong></p>
People are looking at your profile. Find out who.
</div>
<p>Link</p>
<p>Link</p>
<p>Link</p>
</div>
<div class="col-sm-7">
<div class="row">
<div class="col-sm-12">
<div class="panel panel-default text-left">
<div class="panel-body">
<p contenteditable="true">Status: Feeling Blue</p>
<button type="button" class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-thumbs-up"></span> Like
</button>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<div class="well">
<p>John</p>
<img src="bird.jpg" class="img-circle" height="55" width="55" alt="Avatar">
</div>
</div>
<div class="col-sm-9">
<div class="well">
<p>Just Forgot that I had to mention something about someone to someone about how I forgot something, but now I forgot it. Ahh, forget it! Or wait. I remember.... no I don't.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<div class="well">
<p>Bo</p>
<img src="bandmember.jpg" class="img-circle" height="55" width="55" alt="Avatar">
</div>
</div>
<div class="col-sm-9">
<div class="well">
<p>Just Forgot that I had to mention something about someone to someone about how I forgot something, but now I forgot it. Ahh, forget it! Or wait. I remember.... no I don't.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<div class="well">
<p>Jane</p>
<img src="bandmember.jpg" class="img-circle" height="55" width="55" alt="Avatar">
</div>
</div>
<div class="col-sm-9">
<div class="well">
<p>Just Forgot that I had to mention something about someone to someone about how I forgot something, but now I forgot it. Ahh, forget it! Or wait. I remember.... no I don't.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<div class="well">
<p>Anja</p>
<img src="bird.jpg" class="img-circle" height="55" width="55" alt="Avatar">
</div>
</div>
<div class="col-sm-9">
<div class="well">
<p>Just Forgot that I had to mention something about someone to someone about how I forgot something, but now I forgot it. Ahh, forget it! Or wait. I remember.... no I don't.</p>
</div>
</div>
</div>
<div data-spy="affix" data-offset-top="150"><button>save</button><button>edit</button><button>delete</button></div>
</div>
<div class="col-sm-2 well">
<div class="thumbnail">
<p>Upcoming Events:</p>
<img src="paris.jpg" alt="Paris" width="400" height="300">
<p><strong>Paris</strong></p>
<p>Fri. 27 November 2015</p>
<button class="btn btn-primary">Info</button>
</div>
<div class="well">
<p>ADS</p>
</div>
<div class="well">
<p>ADS</p>
</div>
</div>
</div>
</div>
</body>
</html>
As far as I understand you need fixed footer that always visible in the bottom of window and has width as the central column has.
My idea is to use predefined bootstrap class navbar-fixed-bottom with footer inside:
<nav class="navbar-fixed-bottom">
<div class="container">
<div class="row">
<div class="col-sm-7 col-sm-offset-3">
<footer>
<p>Footer Text</p>
</footer>
</div>
</div>
</div>
</nav>
here is a snippet:
footer {
background-color: #555;
color: white;
padding: 15px;
margin: 0 -15px;
border-radius: 5px;
}
<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>
<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="#">Logo</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Messages</li>
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="form-group input-group">
<input type="text" class="form-control" placeholder="Search..">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</form>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> My Account</li>
</ul>
</div>
</div>
</nav>
<nav class="navbar-fixed-bottom">
<div class="container">
<div class="row">
<div class="col-sm-7 col-sm-offset-3">
<footer class="text-center">
<p>Footer Text</p>
</footer>
</div>
</div>
</div>
</nav>
<div class="container text-center">
<div class="row">
<div class="col-sm-3 well">
<div class="well">
<p>My Profile</p>
<img src="bird.jpg" class="img-circle" height="65" width="65" alt="Avatar">
</div>
<div class="well">
<p>Interests</p>
<p>
<span class="label label-default">News</span>
<span class="label label-primary">W3Schools</span>
<span class="label label-success">Labels</span>
<span class="label label-info">Football</span>
<span class="label label-warning">Gaming</span>
<span class="label label-danger">Friends</span>
</p>
</div>
<div class="alert alert-success fade in">
×
<p><strong>Ey!</strong></p>
People are looking at your profile. Find out who.
</div>
<p>Link</p>
<p>Link</p>
<p>Link</p>
</div>
<div class="col-sm-7">
<div class="row">
<div class="col-sm-12">
<div class="panel panel-default text-left">
<div class="panel-body">
<p contenteditable="true">Status: Feeling Blue</p>
<button type="button" class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-thumbs-up"></span> Like
</button>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<div class="well">
<p>John</p>
<img src="bird.jpg" class="img-circle" height="55" width="55" alt="Avatar">
</div>
</div>
<div class="col-sm-9">
<div class="well">
<p>Just Forgot that I had to mention something about someone to someone about how I forgot something, but now I forgot it. Ahh, forget it! Or wait. I remember.... no I don't.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<div class="well">
<p>Bo</p>
<img src="bandmember.jpg" class="img-circle" height="55" width="55" alt="Avatar">
</div>
</div>
<div class="col-sm-9">
<div class="well">
<p>Just Forgot that I had to mention something about someone to someone about how I forgot something, but now I forgot it. Ahh, forget it! Or wait. I remember.... no I don't.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<div class="well">
<p>Jane</p>
<img src="bandmember.jpg" class="img-circle" height="55" width="55" alt="Avatar">
</div>
</div>
<div class="col-sm-9">
<div class="well">
<p>Just Forgot that I had to mention something about someone to someone about how I forgot something, but now I forgot it. Ahh, forget it! Or wait. I remember.... no I don't.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<div class="well">
<p>Anja</p>
<img src="bird.jpg" class="img-circle" height="55" width="55" alt="Avatar">
</div>
</div>
<div class="col-sm-9">
<div class="well">
<p>Just Forgot that I had to mention something about someone to someone about how I forgot something, but now I forgot it. Ahh, forget it! Or wait. I remember.... no I don't.</p>
</div>
</div>
</div>
</div>
<div class="col-sm-2 well">
<div class="thumbnail">
<p>Upcoming Events:</p>
<img src="paris.jpg" alt="Paris" width="400" height="300">
<p><strong>Paris</strong></p>
<p>Fri. 27 November 2015</p>
<button class="btn btn-primary">Info</button>
</div>
<div class="well">
<p>ADS</p>
</div>
<div class="well">
<p>ADS</p>
</div>
</div>
</div>
</div>
You can fix whole section at the bottom then footer will remain in the column.
CSS:
.footer-outer{
width:100%;
position:fixed;
bottom:0;
left:0;
z-index:1000;
}
<section class="footer-outer">
<div class="container">
<div class="row">
<div class="col-sm-5">
</div>
<div class="col-sm-7">
<footer>
</footer>
</div>
</div>
</div>
</section>
Just add the following code for your second template, one with the navbar.
<style>
.navbar.navbar-fixed-bottom {
width: 95%;
margin: auto;
}
</style>
In an web application, i am displaying posts from other users in an individual user's homepage. Each post will contain the thumbnail profile picture of the person the post is from, their name on a paragraph, text contents and then a reply box and button. I am trying to do this by bootstrap's grid system but not achieving the desired effect. I want to mimic the tweets in twitter home page, but in my case there is a big gap in between the profile picture and the other column.
<div class="container" >
<ul id="newsfeed">
<li>
<div class="row">
<div class="col-sm-2">
<img src="someimage.png" class="img-thumbnail" alt="Some Image" width="60" height="60">
</div>
<div class="col-sm-4">
<p>9gag#9gag</p>
<p>This is me</p>
<p>twitted at 12:30pm GMT6+</p>
</div>
</div>
</li>
</ul>
</div>
Your .col-sm-2 is wider than your thumbnail image you can do two things.
1) You can can use .col-sm-1 for the image container.
<div class="container" >
<ul id="newsfeed">
<li>
<div class="row">
<div class="col-sm-1 narrow">
<img src="someimage.png" class="img-thumbnail" alt="Some Image" width="60" height="60">
</div>
<div class="col-sm-4 narrow">
<p>9gag#9gag</p>
<p>This is me</p>
<p>twitted at 12:30pm GMT6+</p>
</div>
</div>
</li>
</ul>
</div>
2) You can leave it as is but add bootstraps helper class pull-right to your img tag.
<div class="container" >
<ul id="newsfeed">
<li>
<div class="row">
<div class="col-sm-2">
<img src="someimage.png" class="img-thumbnail pull-right" alt="Some Image" width="60" height="60">
</div>
<div class="col-sm-4 narrow">
<p>9gag#9gag</p>
<p>This is me</p>
<p>twitted at 12:30pm GMT6+</p>
</div>
</div>
</li>
</ul>
</div>
CODEPEN DEMO
You could use the Media Object component for this (and possibly without any additional CSS as far as structure is concerned).
See working example Snippet.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="jumbotron">
<div class="container">
<h1>Posts</h1>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-offset-3 col-sm-6">
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="http://placehold.it/75x75/000/fff" alt="...">
</a>
</div>
<div class="media-body">
<p>tweet#tweet</p>
<p>Some Tweet</p>
<p>twetted at 12:30pm GMT6+</p>
</div>
<form>
<div class="input-group input-group-sm">
<input type="text" class="form-control" placeholder="Reply..."> <span class="input-group-btn">
<button class="btn btn-default" type="button">Reply</button>
</span>
</div>
</form>
</div>
<div class="media">
<div class="media-body">
<p>tweet#tweet</p>
<p>Some Tweet</p>
<p>twetted at 12:30pm GMT6+</p>
</div>
<div class="media-right">
<a href="#">
<img class="media-object" src="http://placehold.it/75x75/f00/fff" alt="...">
</a>
</div>
<form>
<div class="input-group input-group-sm">
<input type="text" class="form-control" placeholder="Reply..."> <span class="input-group-btn">
<button class="btn btn-default" type="button">Reply</button>
</span>
</div>
</form>
</div>
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="http://placehold.it/75x75/ff0/fff" alt="...">
</a>
</div>
<div class="media-body">
<p>tweet#tweet</p>
<p>Some Tweet</p>
<p>twetted at 12:30pm GMT6+</p>
</div>
<form>
<div class="input-group input-group-sm">
<input type="text" class="form-control" placeholder="Reply..."> <span class="input-group-btn">
<button class="btn btn-default" type="button">Reply</button>
</span>
</div>
</form>
</div>
</div>
</div>
</div>
I have a carousel in container-fluid. I am trying to decrease the height of the carousel but I am not able to do so. I tried style it dont work as well. Currently, the carousel takes up the width and height of the whole web page.
How can I go about doing it?
Below is my code:
CSS
header {
background: #f16251;
color:#000000;
}
header h1,header h2,header h3 a,header a,header a:hover {
color:#101010;
font-weight:800;
text-decoration:none;
}
header h3 {
font-family: 'Kreon', serif;
background: #ffcc33;
padding:10px;
border-radius:3px;
font-size:34px;
padding:12px 10px 6px 10px;
}
header .dropdown-menu {
top:74px;
background: #ffcc33;
border-width:0;
}
HTML
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/custom.css" rel="stylesheet">
</head>
<body>
<!-- Wrap all page content here -->
<div id="wrap">
<header class="masterhead">
<!-- <div class="container">-->
<div class="container-fluid">
<div class="row">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<!-- item 1 -->
<div class="item active">
<img src="img/Nielsen.png" alt="">
<div class="carousel-caption">
<h4>Testing </h4>
<p>Testing Testing</p>
</br>
</div>
</div>
<!-- item 2 -->
<div class="item">
<img src="img/UIParade.png" alt="">
<div class="carousel-caption">
<h4>Testing Image 2</h4>
<p>Testing Testing</p>
</br>
<a class="btn btn-primary" target="_blank" href="http://www.uiparade.com/">Learn
more</a>
</div>
</div>
</div>
</div>
</div>
<!--<div class="col-sm-6">
<h1>Evon Chong
<p class="lead">{A Bootstrap Template}</p></h1>
</div>-->
<!--<div class="col-sm-6">
<div class="pull-right hidden-xs">
<h3><i class="glyphicon glyphicon-cog"></i></h3>
<ul class="dropdown-menu">
<li><i class="glyphicon glyphicon-chevron-right"></i> Link
</li>
<li><i class="glyphicon glyphicon-user"></i> Link
</li>
<li><i class="glyphicon glyphicon-lock"></i> Link
</li>
<li><i class="glyphicon glyphicon-cog"></i> Link
</li>
</ul>
</div>
</div>-->
</div>
</div>
<!--</header>-->
<!-- Fixed navbar -->
<div class="navbar navbar-custom navbar-inverse navbar-static-top" id="nav">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav nav-justified">
<li>Home
</li>
<li>About
</li>
<li>My Skills
</li>
<li class="active"><strong>Education</strong>
</li>
<li>Portfolio
</li>
<li>Contact
</li>
<!--<li class="dropdown">
More <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li>Separated link
</li>
<li>One more separated link
</li>
</ul>
</li>-->
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container -->
</div>
<!--/.navbar -->
<!-- Begin page content -->
<div class="divider" id="section1"></div>
<div class="container">
<div class="col-sm-10 col-sm-offset-1">
<div class="page-header text-center">
<h1>Sticky Footer with Fly-in Navbar</h1>
</div>
<p class="lead text-center">
Twitter Bootstrap is a front-end toolkit to rapidly build web applications.
</p>
<p class="text-center">
Bootstrap is a framework that uses some of the latest browser techniques to provide you with stylish typography, navigation, buttons, tables, etc. One of the primary changes in Bootstrap 3 is an emphasis on Mobile-First responsive design. The goal is to elevate the mobile experience to a first-class citizen of the design process, because several billion mobile users is quite a large market to tap into. So, sites built with the current Bootstrap version target mobile devices and scale for larger screens depending on screen size.
</p>
</div>
</div>
<div class="divider" id="section2"></div>
<section class="bg-1">
<div class="col-sm-6 col-sm-offset-3 text-center">
<h2 style="padding:20px;background-color:rgba(5,5,5,.8)">Try and Tweak Different Layouts</h2>
</div>
</section>
<div class="divider"></div>
<div class="container" id="section3">
<div class="col-sm-8 col-sm-offset-2 text-center">
<h1>Mobile-first + Responsive</h1>
<p>
Instead of creating a unique version of the webpage for each desktop, mobile & tablet, you can now create one design that works on all devices, browsers & resolutions. Your designs will be future ready when a new table or phone size comes in the market, your designs will adapt itself and fit to the new screen size.
</p>
<hr>
<img src="/assets/example/bg_smartphones.jpg" class="img-responsive">
<hr>
</div>
<!--/col-->
</div>
<!--/container-->
<div class="divider"></div>
<section class="bg-3" id="section4">
<div class="col-sm-6 col-sm-offset-3 text-center">
<h2 style="padding:20px;background-color:rgba(5,5,5,.8)">Leverage Snippets & Examples</h2>
</div>
</section>
<div class="continer bg-4">
<div class="row">
<div class="col-sm-4 col-xs-6">
<div class="panel panel-default">
<div>
<img src="//placehold.it/450X250/565656/eee" class="img-responsive">
</div>
<div class="panel-body">
<p class="lead">Hacker News</p>
<p>120k Followers, 900 Posts</p>
<p>
<img src="https://lh4.googleusercontent.com/-9Yw2jNffJlE/AAAAAAAAAAI/AAAAAAAAAAA/u3WcFXvK-g8/s28-c-k-no/photo.jpg" width="28px" height="28px">
</p>
</div>
</div>
<!--/panel-->
</div>
<!--/col-->
<div class="col-sm-4 col-xs-6">
<div class="panel panel-default">
<div class="panel-thumbnail">
<img src="//placehold.it/450X250/ffcc33/444" class="img-responsive">
</div>
<div class="panel-body">
<p class="lead">Bootstrap Templates</p>
<p>902 Followers, 88 Posts</p>
<p>
<img src="https://lh5.googleusercontent.com/-AQznZjgfM3E/AAAAAAAAAAI/AAAAAAAAABA/WEPOnkQS_20/s28-c-k-no/photo.jpg" width="28px" height="28px">
</p>
</div>
</div>
<!--/panel-->
</div>
<!--/col-->
<div class="col-sm-4 col-xs-6">
<div class="panel panel-default">
<div class="panel-thumbnail">
<img src="//placehold.it/450X250/f16251/444" class="img-responsive">
</div>
<div class="panel-body">
<p class="lead">Social Media</p>
<p>19k Followers, 789 Posts</p>
<p>
<img src="https://lh4.googleusercontent.com/-eSs1F2O7N1A/AAAAAAAAAAI/AAAAAAAAAAA/caHwQFv2RqI/s28-c-k-no/photo.jpg" width="28px" height="28px">
<img src="https://lh4.googleusercontent.com/-9Yw2jNffJlE/AAAAAAAAAAI/AAAAAAAAAAA/u3WcFXvK-g8/s28-c-k-no/photo.jpg" width="28px" height="28px">
</p>
</div>
</div>
<!--/panel-->
</div>
<!--/col-->
</div>
<!--/row-->
</div>
<!--/container-->
<div class="divider" id="section5"></div>
<div class="row">
<h1 class="text-center">Where In The World?</h1>
<div id="map-canvas"></div>
<hr>
<div class="col-sm-8">
<div class="row form-group">
<div class="col-xs-3">
<input type="text" class="form-control" id="firstName" name="firstName" placeholder="First Name" required="">
</div>
<div class="col-xs-3">
<input type="text" class="form-control" id="middleName" name="firstName" placeholder="Middle Name" required="">
</div>
<div class="col-xs-4">
<input type="text" class="form-control" id="lastName" name="lastName" placeholder="Last Name" required="">
</div>
</div>
<div class="row form-group">
<div class="col-xs-5">
<input type="email" class="form-control" name="email" placeholder="Email" required="">
</div>
<div class="col-xs-5">
<input type="email" class="form-control" name="phone" placeholder="Phone" required="">
</div>
</div>
<div class="row form-group">
<div class="col-xs-10">
<input type="homepage" class="form-control" placeholder="Website URL" required="">
</div>
</div>
<div class="row form-group">
<div class="col-xs-10">
<button class="btn btn-default pull-right">Contact Us</button>
</div>
</div>
</div>
<div class="col-sm-3 pull-right">
<address>
<strong>Iatek, LLC.</strong><br>
795 Folsom Ave, Suite 600<br>
Newport, RI 94107<br>
P: (123) 456-7890
</address>
<address>
<strong>Email Us</strong><br>
first.last#example.com
</address>
</div>
</div>
<!--/row-->
<div class="container">
<div class="col-sm-8 col-sm-offset-2 text-center">
<h2>Beautiful Bootstrap Templates</h2>
<hr>
<h4>
We love templates. We love Bootstrap.
</h4>
<p>Get more free templates like this at the Bootstrap Playground, Bootply.</p>
<hr>
<ul class="list-inline center-block">
<li>
<a href="http://facebook.com/bootply">
<img src="/assets/example/soc_fb.png">
</a>
</li>
<li>
<a href="http://twitter.com/bootply">
<img src="/assets/example/soc_tw.png">
</a>
</li>
<li>
<a href="http://google.com/+bootply">
<img src="/assets/example/soc_gplus.png">
</a>
</li>
<li>
<a href="http://pinterest.com/in1">
<img src="/assets/example/soc_pin.png">
</a>
</li>
</ul>
</div>
<!--/col-->
</div>
<!--/container-->
</div>
<!--/wrap-->
<div id="footer">
<div class="container">
<p class="text-muted">This Bootstrap Example courtesy Bootply.com
</p>
</div>
</div>
<ul class="nav pull-right scroll-top">
<li><i class="glyphicon glyphicon-chevron-up"></i>
</li>
</ul>
<!-- JavaScript placed at the end of the document so the pages load faster -->
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>
Try this:
style="height:500px" in the carousel tag
HTML:
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" style="height:500px">