I want to get the column on the right marked in red (see attached image) to be cable of expanding further down the page without affecting the layout of the row at the bottom other stories. I'm using bootstrap and every time I put more text into this the entire grid moves down. Should I be using span instead of columns?
Heres the code I got so far.
<div class="container">
<div class="row">
<div class="span1">
<h6 class="text-center" style='font-family: "DroidSerif",serif;'>Here's Why 9/11 Conspiracy</h6>
</div>
<div class="text-center">
<h9 class="span10">Newspaper</h9>
</div>
<div class="span1">
<h6 class="text-center">Here's Why 9/11 Conspiracy</h6>
</div>
</div>
<hr style="height:0.3em;" color= '#000000' />
<hr>
<div class="row">
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<div class="span4">
<h4 class="text-center">Here's Why 9/11 Conspiracy Theories Still Thrive In America</h4>
<h5 class="text-center" style='font-family: "DroidSerif",serif;'><i>Mr.Man</i></h5>
<hr>
<p style='font-family: "DroidSerif",serif;'><span class="firstcharacter">D</span>ublin, It was a sunny and clear Tuesday morning in Knoxville, Tennessee. Sitting in the kitchen of my girlfriend's apartment, I was eating a bowl of cereal -- Honey Nut Cheerios, I still remember -- and browsing the web before making the 15-minute drive to campus for class.
</p>
</div>
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<div class="span6">
<h1 style='font-family: "DroidSerif",serif;'>Terrorists are plotting to blow up five planes</h1>
<p><b>The threat has been taken so seriously it came close to leading to an outright ban on all hand luggage, a senior insider has revealed.
</b></p>
</div>
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<div class="span2">
<h4 style='font-family: "DroidSerif",serif;'>Trending Stories</h4>
<hr>
<h5 style='font-family: "DroidSerif",serif;'><i>Other Story</i></h5>
<story>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit <b> amet risus.</b></story>
<h5 style='font-family: "DroidSerif",serif;'><i>Other Story</i></h5>
<story>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. <b> amet risus.</b></story>
<h5 style='font-family: "DroidSerif",serif;'><i>Other Story</i></h5>
<story>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper.<b> amet risus.</b></story>
</div>
</div>
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!-- Fav and touch icons -->
<div class="row">
<hr class="span10" style="height:0.3em;" color= '#3090C7' />
</div>
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<div class="row" class="span10">
<div class="span2">
<h5 class="text-center" style='font-family: "DroidSerif",serif;'><i>Other Story</i></h5>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. Donec id elit non </p>
</div>
<div class="span2">
<h5 class="text-center" style='font-family: "DroidSerif",serif;'><i>Other Story</i></h5>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. Donec id elit non </p>
</div>
<div class="span2">
<h5 class="text-center" style='font-family: "DroidSerif",serif;'><i>Other Story</i></h5>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. Donec id elit non </p>
</div>
<div class="span2">
<h5 class="text-center" style='font-family: "DroidSerif",serif;'><i>Other Story</i></h5>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. Donec id elit non </p>
</div>
<div class="span2">
<h5 class="text-center" style='font-family: "DroidSerif",serif;'><i>Other Story</i></h5>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. Donec id elit non </p>
</div>
</div>
</div>
Bootstrap's pretty simple to use, don't worry you'll get it.
All you need to do is to create a row with 2 columns (.col-sm-10), one as to fill in the left content of the image and the second is for the red box of yours (.col-sm-2). The main motive here is to create a 12 column grid system.
Then in the first columns make another row and add 2 Columns again, one for the 9/11 Conspiracy news and the other for the terrorists are plotting news
And now comes your blue <hr> seperator and after that create another row and add 4 columns for other stories section
I've used the most popular bootstrap version 3.3.1 to demonstrate your solution.
Fiddle Demo : http://jsfiddle.net/auy5y8e1/
Resize the fiddle window to see if its working fine...
HTML:
<div class="container">
<div class="row">
<div class="col-sm-10">
<div class="row">
<div class="span1">
<h6 class="text-center" style='font-family: "DroidSerif",serif;'>Here's Why 9/11 Conspiracy</h6>
</div>
<div class="text-center">
<h9 class="span10">Newspaper</h9>
</div>
<div class="span1">
<h6 class="text-center">Here's Why 9/11 Conspiracy</h6>
</div>
</div>
<hr style="height:0.3em;" color='#000000' />
<div class="row">
<div class="col-sm-6">
<h4 class="text-center">Here's Why 9/11 Conspiracy Theories Still Thrive In America</h4>
<h5 class="text-center" style='font-family: "DroidSerif",serif;'><i>Mr.Man</i></h5>
<hr>
<p style='font-family: "DroidSerif",serif;'><span class="firstcharacter">D</span>ublin, It was a sunny and clear Tuesday morning in Knoxville, Tennessee. Sitting in the kitchen of my girlfriend's apartment, I was eating a bowl of cereal -- Honey Nut Cheerios, I still remember -- and browsing the web before making the 15-minute drive to campus for class.</p>
</div>
<div class="col-sm-6">
<h1 style='font-family: "DroidSerif",serif;'>Terrorists are plotting to blow up five planes</h1>
<p><b>The threat has been taken so seriously it came close to leading to an outright ban on all hand luggage, a senior insider has revealed.</b></p>
</div>
</div>
<div class="row">
<hr class="span10" style="height:0.3em;" color='#3090C7' />
</div>
<div class="row">
<div class="col-sm-3">
<h5 class="text-center" style='font-family: "DroidSerif",serif;'><i>Other Story</i></h5>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. Donec id elit non</p>
</div>
<div class="col-sm-3">
<h5 class="text-center" style='font-family: "DroidSerif",serif;'><i>Other Story</i></h5>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. Donec id elit non</p>
</div>
<div class="col-sm-3">
<h5 class="text-center" style='font-family: "DroidSerif",serif;'><i>Other Story</i></h5>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. Donec id elit non</p>
</div>
<div class="col-sm-3">
<h5 class="text-center" style='font-family: "DroidSerif",serif;'><i>Other Story</i></h5>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. Donec id elit non</p>
</div>
</div>
</div>
<div class="col-sm-2">
<div>
<h4 style='font-family: "DroidSerif",serif;'>Trending Stories</h4>
<hr>
</div>
<h5 style='font-family: "DroidSerif",serif;'><i>Other Story</i></h5>
<story>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit <b> amet risus.</b></story> <h5 style='font-family: "DroidSerif",serif;'><i>Other Story</i></h5>
<story>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. <b> amet risus.</b></story>
<h5 style='font-family: "DroidSerif",serif;'><i>Other Story</i></h5>
<story>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper.<b> amet risus.</b></story>
</div>
</div>
</div>
Related
Deleted all the extra stuff, all I want is the row to float left so there is some text next to the image, but it only moves over one line. Using bootstrap if that helps, along with my own CSS file.
example
<!--main body container -->
<div class="container">
<div class="col-sm-6">
<div class="row">
<h1>About Me</h1>
</div>
<div id="bio" class="row">
<img src= "assets/images/linkedin-logo.png" alt="default photo">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dapibus orci nisl, ut maximus eros congue commodo. Vivamus fermentum dictum erat. Fusce feugiat maximus nulla, eget scelerisque eros sodales vel. Ut vehicula velit nisl, et tempor justo blandit in. Morbi a elit eleifend, efficitur felis sed, pellentesque risus. Praesent quis ante et massa vehicula efficitur. Cras id tortor et elit ornare bibendum non non arcu. Sed lectus enim, consectetur eget pretium in, tempus et quam. Suspendisse elementum porttitor elementum. Donec egestas lectus gravida risus convallis consectetur.
</div>
</div>
<!--Main Container End-->
</div>
css code:
#bio {
float: left;
}
Float your image to the left
#bio img {
float: left;
}
Example: https://jsfiddle.net/L75dhtny/
you can try this one:
<!--main body container -->
<div class="container">
<div class="col-sm-6">
<div class="row">
<h1>About Me</h1>
</div>
<div id="bio" class="row">
<img src= "assets/images/linkedin-logo.png" alt="default photo">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br> Etiam dapibus orci nisl, ut maximus eros congue commodo. Vivamus fermentum dictum erat. Fusce feugiat maximus nulla, eget scelerisque eros sodales vel. Ut vehicula velit nisl, et tempor justo blandit in. Morbi a elit eleifend, efficitur felis sed, pellentesque risus. Praesent quis ante et massa vehicula efficitur. Cras id tortor et elit ornare bibendum non non arcu. Sed lectus enim, consectetur eget pretium in, tempus et quam. Suspendisse elementum porttitor elementum. Donec egestas lectus gravida risus convallis consectetur.
</div>
</div>
<!--Main Container End-->
</div>
DEMO HERE
You can try this -
/* css code */
img {
float: left;
padding:2px;
margin-right:4px;
}
<!--main body container -->
<div class="container">
<div class="col-sm-6">
<div class="row">
<h1>About Me</h1>
</div>
<div id="bio" class="row">
<img src="http://placehold.it/350x150">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dapibus orci nisl, ut maximus eros congue commodo. Vivamus fermentum dictum erat. Fusce feugiat maximus nulla, eget scelerisque eros sodales vel. Ut vehicula velit nisl, et tempor justo blandit in. Morbi a elit eleifend, efficitur felis sed, pellentesque risus. Praesent quis ante et massa vehicula efficitur. Cras id tortor et elit ornare bibendum non non arcu. Sed lectus enim, consectetur eget pretium in, tempus et quam. Suspendisse elementum porttitor elementum. Donec egestas lectus gravida risus convallis consectetur.
</div>
</div>
<!--Main Container End-->
</div>
Add
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
Im new to bootstrap and have not used their grid system before. I am trying to use the full 12 grid and have one div 1-5 and one 8-12 so each div col-lg-5.
Im trying not to override there CSS much to keep it clean, I seem to have a problem with float:left. As far as i can tell from the documentation I am using the system correctly, but its not working, the second div drops to the next line.
MY CODE
<div class="row">
<div class="col-xs-6 col-lg-5 well well-lg">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor
mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada
magna mollis euismod. Donec sed odio dui. </p>
</div>
<div class="col-xs-6 col-lg-5 col-lg-offset-7 well well-lg">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor
mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada
magna mollis euismod. Donec sed odio dui. </p>
</div>
</div>
Your mistake is that you have two different .col-lg-5 divs in one row, and you added .col-lg-offset-7 class to the second one (5 + 5 + 7 = 17). However, the offset class should be .col-lg-offset-2 not to exceed the 12 columns grid system.
<div class="row">
<div class="col-xs-6 col-lg-5 well well-lg">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor
mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada
magna mollis euismod. Donec sed odio dui. </p>
</div>
<div class="col-xs-6 col-lg-5 col-lg-offset-2 well well-lg">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor
mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada
magna mollis euismod. Donec sed odio dui. </p>
</div>
</div>
Here are the other examples for you to understand how the grid system works:
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>
I'm attempting to achieve the layout below using col-lg-4.
I just need to know how I can make the third column span all three rows and without creating enormous gaps of whitespace between the rows. Here's what it's currently looking like:
Is this possible to do in Bootstrap (without using the Bootstrap 2 span classes)?
Here's the code (generalized)
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row-fluid">
<div class="col-lg-4">
Praesent laoreet purus in elementum.
</div>
<div class="col-lg-4">
Praesent laoreet purus in elementum.
</div>
<div class="col-lg-4">
<!-- THIS NEEDS TO ROW SPAN -->
<p>Praesent posuere egestas sagittis. Sed feugiat nibh urna, egestas elementum ipsum facilisis et. Nullam elit nisi, tincidunt a turpis ac, fringilla pellentesque nibh. Suspendisse pulvinar orci sit amet metus laoreet, sed tincidunt quam semper. Vestibulum
ac nunc a justo vulputate venenatis vel sit amet augue. Vestibulum eu hendrerit sem. Aenean nec tempus ipsum. Integer nec lectus varius, venenatis orci vitae, efficitur mi. Curabitur at consectetur leo, sit amet consectetur nisi. Nam nec eros
facilisis, aliquam sem molestie, auctor elit. Vivamus quis hendrerit justo, vel molestie ligula.</p>
<p>Morbi leo magna, sollicitudin a sem ac, finibus facilisis ex. Nam ut enim commodo, venenatis augue nec, consectetur velit. Sed lobortis vitae lacus at pulvinar. Aliquam vel enim tristique, lacinia nibh ut, porta dui. Fusce efficitur volutpat lectus
maximus iaculis. Proin purus odio, auctor id sollicitudin nec, lacinia vel ligula. Sed luctus ipsum non sem tincidunt mollis.</p>
<p>Pellentesque congue mauris non tempor tincidunt. Phasellus pretium at lorem ut auctor. Donec rhoncus, nibh vitae aliquam tristique, leo quam elementum nisl, at porttitor massa diam venenatis diam. Suspendisse potenti. Sed gravida, mauris nec rhoncus
feugiat, augue velit facilisis mauris, et dapibus nisl augue non nunc. Nunc pretium quam eget tincidunt sollicitudin. Etiam maximus metus eget accumsan efficitur. Fusce a lorem vitae libero blandit condimentum.</p>
</div>
<div class="col-lg-4">
Praesent laoreet purus in elementum.
</div>
<div class="col-lg-4">
Praesent laoreet purus in elementum.
</div>
<div class="col-lg-4">
Praesent laoreet purus in elementum.
</div>
</div>
</div>
You need to use nested col-s, in this case, use col-lg-8 + col-lg-4
and inside col-lg-8 you create nested cols using row
added col-xs-* for demo.
[class*="col-"] {
border: red dashed 1px
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<div class="col-xs-8 col-lg-8">
<div class="row">
<div class="col-xs-6 col-lg-6">
Praesent laoreet purus in elementum.
</div>
<div class="col-xs-6 col-lg-6">
Praesent laoreet purus in elementum.
</div>
</div>
<div class="row">
<div class="col-xs-6 col-lg-6">
Praesent laoreet purus in elementum.
</div>
<div class="col-xs-6 col-lg-6">
Praesent laoreet purus in elementum.
</div>
</div>
<div class="row">
<div class="col-xs-6 col-lg-6">
Praesent laoreet purus in elementum.
</div>
<div class="col-xs-6 col-lg-6">
Praesent laoreet purus in elementum.
</div>
</div>
</div>
<div class="col-xs-4 col-lg-4">
Praesent laoreet purus in elementum.Praesent laoreet purus in elementum.Praesent laoreet purus in elementum. Praesent
</div>
</div>
</div>
I am having trouble with allignment of Column. Its not vertically alligned on the browser. I used grid system using bootstrap and tried to fulfill some requirements. Can anyone fix my code or help me fix my code?
![<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta][1] charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body style= " background-color:grey;">
<div class="container">
<!-- Example row of columns -->
<!-- outer row-->
<div class="row">
<div class ="col-md-3">
<div class="row" >
<div class="col-md-12" style= "border: 2px solid black; background-color:orange; ">
<h2>Heading 1</h2>
<p> left SIDE BAR </p>
</div>
<div class="col-md-12" style= "border: 2px solid black; background-color:orange;">
<h2>Heading 2 </h2>
<p> LEFT SIDE BAR CONTENT2</p>
</div>
</div>
</div>
<div class ="col-md-8 col-md-offset-1" >
<div class="row">
<div class="col-md-4" style="border: 2px solid black; background-color:Yellowgreen;">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
</div>
<div class="col-md-4" style="border: 2px solid black; background-color:Salmon;">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
</div>
<div class="col-md-4"style="border: 2px solid black; background-color:Coral;">
<h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
</div>
<div class="row">
<div class="col-md-4" style= "border: 2px solid black; background-color:orange;">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
</div>
<div class="col-md-4" style= "border: 2px solid black; background-color:purple;">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
</div>
<div class="col-md-4" style="border: 2px solid black; background-color:lightblue;">
<h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
</div>
</div>
<div class="row">
<div class="col-md-4" style="border: 2px solid black; background-color:green;">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
</div>
<div class="col-md-4" style="border: 2px solid black; background-color:red;">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
</div>
<div class="col-md-4" style="border: 2px solid black; background-color:lavender;">
<h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
The problem with your code is that your HTML is not not closing a div tag correctly. You've forgot to close the div of first row and closed it somewhere else. Here's your snippet fixed:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta
][1] charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body style=" background-color:grey;">
</div>
<div class="container">
<!-- Example row of columns -->
<!-- outer row-->
<div class="row">
<div class="col-md-3">
<div class="row">
<div class="col-md-12" style="border: 2px solid black; background-color:orange; ">
<h2>Heading 1</h2>
<p> left SIDE BAR </p>
</div>
<div class="col-md-12" style="border: 2px solid black; background-color:orange;">
<h2>Heading 2 </h2>
<p> LEFT SIDE BAR CONTENT2</p>
</div>
</div>
</div>
<div class="col-md-8 col-md-offset-1">
<div class="row">
<div class="col-md-4" style="border: 2px solid black; background-color:Yellowgreen;">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris
condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod.
Donec sed odio dui. </p>
</div>
<div class="col-md-4" style="border: 2px solid black; background-color:Salmon;">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris
condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod.
Donec sed odio dui. </p>
</div>
<div class="col-md-4" style="border: 2px solid black; background-color:Coral;">
<h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta
felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum
massa justo sit amet risus.</p>
</div>
</div>
<div class="row">
<div class="col-md-4" style="border: 2px solid black; background-color:orange;">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris
condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod.
Donec sed odio dui. </p>
</div>
<div class="col-md-4" style="border: 2px solid black; background-color:purple;">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris
condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod.
Donec sed odio dui. </p>
</div>
<div class="col-md-4" style="border: 2px solid black; background-color:lightblue;">
<h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula
porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut
fermentum massa justo sit amet risus.</p>
</div>
</div>
<div class="row">
<div class="col-md-4" style="border: 2px solid black; background-color:green;">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris
condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod.
Donec sed odio dui. </p>
</div>
<div class="col-md-4" style="border: 2px solid black; background-color:red;">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris
condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod.
Donec sed odio dui. </p>
</div>
<div class="col-md-4" style="border: 2px solid black; background-color:lavender;">
<h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula
porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut
fermentum massa justo sit amet risus.</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
This is my code: http://www.bootply.com/ZZw7dYczJD
<div class="container">
<!-- Example row of columns -->
<div class="row">
<div class="col-md-3">
<img src="..." class="img-responsive" alt="Responsive image">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div>
<div class="col-md-3">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div>
<div class="col-md-3">
<h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div>
<div class="col-md-3">
<h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div>
</div>
</div>
At the moment my image appears on the top of my row content but I want it to appear to the left. Can anyone tell me how I might implement it please, do I need another column for the image?
Wrap the image in its own col-md-2 or if it's smaller then its own col-md-1. For centering purposes you may want to add a col-md-offset-1 to the image.
You will have to adjust the width of the other columns so that you do not exceed 12 units across among all of the columns.
Bootply Example