Content not aligns properly - 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>

Related

How to make bootstrap columns automatically resize when element overflows them

I have a BootStrap 5 row, the columns of which will always remain the same, even if the content inside of them overflows the column. How do I make it so that when content is larger than the column, the column expands in size?
As you can see, the columns (purple) let the cards inside of them overflow, therefore causing them to collide with other cards. What I want is for the columns to expand when the content inside of them is bound to overflow.
HTML for rows and columns:
<div class="row">
<div class="col">
<h1 class="header">User</h1>
<div class="card card-large border-0 me-1">
<div class="card-body shadow">
<div class="row row-cols-2">
<div class="col" style="text-align: left; margin-left: 15px; margin-top: 16px; width: 50px">
<i class="fa-solid fa-user-pen" style="font-size: 50px;"></i>
</div>
<div class="right-column">
<a class="header row pt-2">Username: </a>
<a class="header row pt-2">Plan: </a>
<a class="header row pt-2">Discord: </a>
<a class="header row pt-2">Date of registration: </a>
<a class="header row pt-2">Used searches: /</a>
</div>
</div>
<div class="mt-2">
<a class="btn shadow text-white me-1" style="background-color: #7289da">Link Discord</a>
<a class="btn btn-secondary shadow text-white me-1">Change password</a>
<a class="btn btn-danger shadow text-white" data-bs-toggle="modal" data-bs-target="#logout">Log out</a>
<div class="modal fade" id="logout" data-bs-backdrop="logout" data-bs-keyboard="false" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" style=" width: 25rem">
<div class="modal-content text-white">
<div class="modal-body" style="background-color: #0e0e0e">
<div class="container">
<div class="row justify-content-center">
<div class="col-1" style="text-align: left; margin-left: 15px; margin-top: 16px; width: 50px">
<i class="fa-solid fa-triangle-exclamation" style="font-size: 50px;"></i>
</div>
<div class="col-8 mt-4">
Are you sure you wish to log out?
</div>
</div>
</div>
</div>
<div class="modal-footer border-0 justify-content-center" style="background-color: #0e0e0e">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
<button data-bs-dismiss="modal" type="button" class="btn btn-danger" #click="deleteCookie()">Log out</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col">
<h1 class="header">Plan</h1>
<div class="card card-large border-0 me-1">
<div class="card-body shadow">
<div class="row row-cols-2">
<div class="col" style="text-align: left; margin-left: 15px; margin-top: 16px; width: 50px">
<i class="fa-solid fa-tag" style="font-size: 50px;"></i>
</div>
<div class="right-column">
<a class="header row pt-2">Plan: </a>
<a class="header row pt-2">Date of Purchase: </a>
<a class="header row pt-2">Date of Expiration: </a>
</div>
</div>
<div class="mt-2">
<a class="btn btn-primary shadow text-white me-1" #click="">Upgrade</a>
<a class="btn btn-danger shadow text-white">Cancel</a>
</div>
</div>
</div>
</div>
<div class="col">
<h1 class="header">API</h1>
<div class="card card-large border-0 me-3">
<div class="card-body shadow">
<div class="row row-cols-2">
<div class="col" style="text-align: left; margin-left: 15px; margin-top: 16px; width: 50px">
<i class="fa-solid fa-code" style="font-size: 50px;"></i>
</div>
<div class="right-column">
<a class="header row pt-2">Used searches: /</a>
</div>
</div>
<div class="mt-2">
<a class="btn btn-secondary shadow text-white me-1 disabled">API docs</a>
<a class="btn btn-secondary shadow text-white me-1" onclick="">Copy API key</a>
<a class="btn btn-secondary shadow text-white">Regenerate API key</a>
</div>
</div>
</div>
</div>
</div>

Add col-lg-4 in column row like this
<div class="row">
<div class="col-lg-4">
//content
</div>
<div class="col-lg-4">
//content
</div>
<div class="col-lg-4">
//content
</div>
</div>
For more information, please visit this link : https://getbootstrap.com/docs/5.2/layout/columns/#how-they-work

put component on side of search field

I am developing a web application and would like my EntreCadastre-se|Carrinho menu to be next to the text field, but it is getting underneath
<div class="row">
<div class="col-6 col-md-4 col-xs-4">
<img src="imagens/eccomerce.JPG" alt="principal" id="imagem_principal">
</div>
<div class="col-6 col-md-4">
<div class="busca"><input type="text" id="campo_busca" placeholder="O que você procura?"><button type="submit" onclick="" class="buscar_produto "><i class="fa fa-search" action="" ></i></button> </div>
</div>
<div class="col-6 col-md-4">
<ul class="menu_2">
<div class="btn-group" role="group">
<div class="btn-group" role="group">
Entre/Cadastre-se <span class="caret"></span>
</div>
<button type="button" class="carrinho btn btn-default">Carrinho <i class="fa fa-shopping-cart"></i> ( )</button>
</div>
</ul>
</div>
</div>

What you are doing wrong here is your math. Like #efkin said you have only 12 columns. But you have defined three divs with col-6. That means 3*6 = 18.
When you want 3 columns with equal size on one row you have to use col-4 for each, because 3*4 = 12.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-4 col-md-4 col-xs-4">
<img src="imagens/eccomerce.JPG" alt="principal" id="imagem_principal" >
</div>
<div class="col-4 col-md-4">
<div class="busca"><input type="text" id="campo_busca" placeholder="O que você procura?"><button type="submit" onclick="" class="buscar_produto "><i class="fa fa-search" action="" ></i></button> </div>
</div>
<div class="col-4 col-md-4">
<ul class="menu_2">
<div class="btn-group" role="group">
<div class="btn-group" role="group">
Entre/Cadastre-se <span class="caret"></span>
</div>
<button type="button" class="carrinho btn btn-default">Carrinho <i class="fa fa-shopping-cart"></i> ( )</button>
</div>
</ul>
</div>
</div>

Creating a footer inside a bootstrap column

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>

Making a bootstrap navbar width of parent containing column

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

Bootstrap Inline dropdown menus do not have correct width

I have two simple dropdown menus with Bootstrap v3. I want it so that they are displayed side by side with a width and utilizing the grid.
But it seems that the width stays the same. HEre is what I mean:
.menuList > div.dropdownInline {
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div class="menuList">
<div class="dropdown dropdownInline">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu1" style="max-width:1200px; padding: 10px; border: 1px solid #dddddd;">
<div class="row">
<div class="col-md-3">
<input type="text" />
</div>
<div class="col-md-3">
<input type="text" />
</div>
<div class="col-md-3">
<input type="text" />
</div>
<div class="col-md-3">
<input type="text" />
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="alert alert-success" role="alert"><strong>Well done!</strong> You successfully read this important alert message.</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="alert alert-warning" role="alert">
Warning!
</div>
</div>
<div class="col-md-6">
<div class="alert alert-danger" role="alert">
Danger!
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="alert alert-info" role="alert">What an informatical message.</div>
</div>
</div>
</div>
</div>
<!-- SECOND DROPDOWN -->
<div class="dropdown dropdownInline">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<div class="dropdown-menu" style="max-width:850px; padding: 10px; border: 1px solid #dddddd;" aria-labelledby="dropdownMenu2">
<div class="row">
<div class="col-md-12">
<div class="alert alert-success" role="alert"><strong>Well done!</strong> You successfully read this important alert message.</div>
</div>
</div>
</div>
</div></div>
<hr />
<h1>Without inline... </h1>
<div class="menuList">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu1" style="max-width:1200px; padding: 10px; border: 1px solid #dddddd;">
<div class="row">
<div class="col-md-3">
<input type="text" />
</div>
<div class="col-md-3">
<input type="text" />
</div>
<div class="col-md-3">
<input type="text" />
</div>
<div class="col-md-3">
<input type="text" />
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="alert alert-success" role="alert"><strong>Well done!</strong> You successfully read this important alert message.</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="alert alert-warning" role="alert">
Warning!
</div>
</div>
<div class="col-md-6">
<div class="alert alert-danger" role="alert">
Danger!
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="alert alert-info" role="alert">What an informatical message.</div>
</div>
</div>
</div>
</div>
<!-- SECOND DROPDOWN -->
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<div class="dropdown-menu" style="max-width:850px; padding: 10px; border: 1px solid #dddddd;" aria-labelledby="dropdownMenu2">
<div class="row">
<div class="col-md-12">
<div class="alert alert-success" role="alert"><strong>Well done!</strong> You successfully read this important alert message.</div>
</div>
</div>
</div>
</div></div>
Do you see how without inline... the dropdown stretches fine into a nice width but ... with it.. (top menus)... it becomes squished? And one doesn't even show the blue panel.
What am I doing wrong?

you can just set width of menu
.dropdown-menu{
width:400px;//or whatever you want
}
check this out
Plunker
.dropdowm-menu is as small as it's content
so you can just fix it like above or set width of it's children element.

.menuList > div.dropdownInline {
display: inline-block;
}
.dropdown button{ margin-top:5px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div class="menuList">
<div class="dropdown dropdownInline">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu1" style="max-width:1200px; padding: 10px; border: 1px solid #dddddd;">
<div class="row">
<div class="col-md-3">
<input type="text" />
</div>
<div class="col-md-3">
<input type="text" />
</div>
<div class="col-md-3">
<input type="text" />
</div>
<div class="col-md-3">
<input type="text" />
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="alert alert-success" role="alert"><strong>Well done!</strong> You successfully read this important alert message.</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="alert alert-warning" role="alert">
Warning!
</div>
</div>
<div class="col-md-6">
<div class="alert alert-danger" role="alert">
Danger!
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="alert alert-info" role="alert">What an informatical message.</div>
</div>
</div>
</div>
</div>
<!-- SECOND DROPDOWN -->
<div class="dropdown dropdownInline">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<div class="dropdown-menu" style="max-width:850px; padding: 10px; border: 1px solid #dddddd;" aria-labelledby="dropdownMenu2">
<div class="row">
<div class="col-md-12">
<div class="alert alert-success" role="alert"><strong>Well done!</strong> You successfully read this important alert message.</div>
</div>
</div>
</div>
</div></div>
<hr />
<h1>Without inline... </h1>
<div class="menuList">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu1" style="max-width:1200px; padding: 10px; border: 1px solid #dddddd;">
<div class="row">
<div class="col-md-3">
<input type="text" />
</div>
<div class="col-md-3">
<input type="text" />
</div>
<div class="col-md-3">
<input type="text" />
</div>
<div class="col-md-3">
<input type="text" />
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="alert alert-success" role="alert"><strong>Well done!</strong> You successfully read this important alert message.</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="alert alert-warning" role="alert">
Warning!
</div>
</div>
<div class="col-md-6">
<div class="alert alert-danger" role="alert">
Danger!
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="alert alert-info" role="alert">What an informatical message.</div>
</div>
</div>
</div>
</div>
<!-- SECOND DROPDOWN -->
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<div class="dropdown-menu" style="max-width:850px; padding: 10px; border: 1px solid #dddddd;" aria-labelledby="dropdownMenu2">
<div class="row">
<div class="col-md-12">
<div class="alert alert-success" role="alert"><strong>Well done!</strong> You successfully read this important alert message.</div>
</div>
</div>
</div>
</div></div>
Just add it