Display text in two columns Bootstrap - html

Question

Hi i want to distribute a text column that i retrieve from an SQL Server(no problem retrieving) into two columns.
This jsfiddle
<div class="container-fluid" style="margin-top:170px;">
<div class="row">
<div class="col-sm-6"><img alt="Bootstrap Image Preview" src="http://placehold.it/300x205/3498db/fff" style="height:320px" class="img-thumbnail"></div>
<div class="col-lg-6">
<h1>John Doe</h1>
<h2><b>Director</b></h2>
<h5>
Education, title,
</h5>
</div>
</div>
<div class="row">
<div class="col-sm-5 col-lg-6">
<h3 style="margin-top:50px">
About
</h3>
<p class="pp">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae magna arcu. Aenean vulputate neque vitae libero malesuada auctor. Fusce sed congue sem. In ultrices, velit sed aliquam fringilla, massa quam posuere massa, ut viverra quam eros quis purus. Nulla tristique iaculis.
</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque auctor malesuada magna, in vulputate nunc eleifend quis. Fusce varius a erat nec faucibus. Aliquam velit ante, fringilla sed sem ac, congue.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id ipsum vulputate, laoreet metus at, mattis velit. Nullam diam sem, bibendum in odio et, tincidunt fringilla dolor. Etiam sit amet turpis laoreet, rhoncus magna eget, pharetra turpis. Pellentesque ut massa sit amet nibh ultricies efficitur. Proin.</p>
</div>
<div class="col-sm-5 col-lg-6" style="margin-top:90px">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt laoreet leo non porta. Duis quis blandit lacus. Mauris nec blandit arcu. Sed vulputate condimentum lorem, gravida imperdiet quam efficitur et. Praesent odio odio, convallis fermentum ante sed, semper molestie ipsum. Nulla rutrum tempus nunc quis cursus. Curabitur neque augue, tincidunt eu.<p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sit amet sem ullamcorper, aliquet ligula non, posuere nunc. Morbi vehicula ac sapien nec vehicula. Donec commodo, elit consequat consectetur suscipit, turpis urna aliquam odio, eget pulvinar ligula.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis volutpat dui, a mollis lorem. Quisque rutrum in ante id pretium. Curabitur nec turpis lobortis, facilisis..<p>
shows the desired layout. As you can see there is paragraph spaces and it looks good. I am only able to get this far using the column. I can't get it to format like above. Can someone help me get the desired formatting.

Answer 1

First take the h3 header out of the .newspaper element, place it above that one so the text starts on the same level in both columns. Then add corresponding bootstrap classes to both the h3 and the .newspaper DIV to avoid the negative margin and limit the width on smaller screens like in the example you quoted: class="col-sm-10 col-lg-12"
Here's the result: https://jsfiddle.net/sozeojgx/1/

Answer 2

change the class of div to col-xs-6 col-sm-6 col-md-6 col-lg-6
I made changes to HTML only and it works fine.
<div class="container-fluid" style="margin-top:170px;">
<div class="row">
<div class="col-sm-6"><img alt="Bootstrap Image Preview" src="http://placehold.it/300x205/3498db/fff" style="height:320px" class="img-thumbnail"></div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<h1>John Doe</h1>
<h2><b>Director</b></h2>
<h5>
Education, title,
</h5>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<h3 style="margin-top:50px">
About
</h3>
<p class="pp">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae magna arcu. Aenean vulputate neque vitae libero malesuada auctor. Fusce sed congue sem. In ultrices, velit sed aliquam fringilla, massa quam posuere massa, ut viverra quam eros quis purus. Nulla tristique iaculis.
</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque auctor malesuada magna, in vulputate nunc eleifend quis. Fusce varius a erat nec faucibus. Aliquam velit ante, fringilla sed sem ac, congue.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id ipsum vulputate, laoreet metus at, mattis velit. Nullam diam sem, bibendum in odio et, tincidunt fringilla dolor. Etiam sit amet turpis laoreet, rhoncus magna eget, pharetra turpis. Pellentesque ut massa sit amet nibh ultricies efficitur. Proin.</p>
</div>
<div class="col-sm-5 col-lg-6" style="margin-top:90px">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt laoreet leo non porta. Duis quis blandit lacus. Mauris nec blandit arcu. Sed vulputate condimentum lorem, gravida imperdiet quam efficitur et. Praesent odio odio, convallis fermentum ante sed, semper molestie ipsum. Nulla rutrum tempus nunc quis cursus. Curabitur neque augue, tincidunt eu.<p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sit amet sem ullamcorper, aliquet ligula non, posuere nunc. Morbi vehicula ac sapien nec vehicula. Donec commodo, elit consequat consectetur suscipit, turpis urna aliquam odio, eget pulvinar ligula.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis volutpat dui, a mollis lorem. Quisque rutrum in ante id pretium. Curabitur nec turpis lobortis, facilisis..<p>
</div>
</div>
</div>

Answer 3

You can achieve it by just 2 media queries:
#media only screen and (max-width: 768px) {
.margin{
margin-top: 0px;
}
}
#media only screen and (min-width: 769px) {
.margin{
margin-top: 85px;
}
}
Just added a class margin and added media query.
Check this CODEPEN
#media only screen and (max-width: 768px) {
.margin {
margin-top: 0px;
}
}
#media only screen and (min-width: 769px) {
.margin {
margin-top: 85px;
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid" style="margin-top:170px;">
<div class="row">
<div class="col-sm-6"><img alt="Bootstrap Image Preview" src="http://placehold.it/300x205/3498db/fff" style="height:320px" class="img-thumbnail"></div>
<div class="col-lg-6">
<h1>John Doe</h1>
<h2><b>Director</b></h2>
<h5>
Education, title,
</h5>
</div>
<div class="col-lg-6"></div>
</div>
<div class="row">
<div class="col-sm-5 col-lg-6">
<h3 style="margin-top:50px">
About
</h3>
<p class="pp">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae magna arcu. Aenean vulputate neque vitae libero malesuada auctor. Fusce sed congue sem. In ultrices, velit sed aliquam fringilla, massa quam posuere massa, ut viverra quam eros quis
purus. Nulla tristique iaculis.
</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque auctor malesuada magna, in vulputate nunc eleifend quis. Fusce varius a erat nec faucibus. Aliquam velit ante, fringilla sed sem ac, congue.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id ipsum vulputate, laoreet metus at, mattis velit. Nullam diam sem, bibendum in odio et, tincidunt fringilla dolor. Etiam sit amet turpis laoreet, rhoncus magna eget, pharetra turpis.
Pellentesque ut massa sit amet nibh ultricies efficitur. Proin.</p>
</div>
<div class="col-sm-6 col-lg-6 margin">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt laoreet leo non porta. Duis quis blandit lacus. Mauris nec blandit arcu. Sed vulputate condimentum lorem, gravida imperdiet quam efficitur et. Praesent odio odio, convallis
fermentum ante sed, semper molestie ipsum. Nulla rutrum tempus nunc quis cursus. Curabitur neque augue, tincidunt eu.
<p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sit amet sem ullamcorper, aliquet ligula n</p>
</div>
</div>
</div>