I'd like to have a tumblr-like grid layout for my bootstrap website. (example) The code below shows what I have right now using the grid system of bootstrap (my guess is that it is not designed to do things like this). Too bad some do not line up.
<article class="col-md-6">
<blockquote class="panel panel-default">
<div class="panel-body">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean odio turpis, elementum ut
fermentum nec, pulvinar in lectus. Suspendisse potenti. Cras quis sem sit amet lectus consectetur
venenatis. Donec aliquam leovenenatis. Donec aliquam leo mi, vel fringilla purus commodo eget. Vivamus sit amet sapien sed
mauris sodales ultrices vitae eget nisl. Nulla malesuada rhoncus mauris. Praesent vestibulum
auctor lorem mollis ornare.venenatis. Donec aliquam leo mi, vel fringilla purus commodo eget. Vivamus sit amet sapien sed
mauris sodales ultrices vitae eget nisl. Nulla malesuada rhoncus mauris. Praesent vestibulum
auctor lorem mollis ornare. mi, vel fringilla purus commodo eget. Vivamus sit amet sapien sed
mauris sodales ultrices vitae eget nisl. Nulla malesuada rhoncus mauris. Praesent vestibulum
auctor lorem mollis ornare.
</p>
<footer class="text-right">
#1 — Maandag 20 januari 2014 — <cite>X</cite>
</footer>
</div>
</blockquote>
</article>
<article class="col-md-6">
<blockquote class="panel panel-default">
<div class="panel-body">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean odio turpis, elementum ut lor sit amet, consectetur adipiscing elit. Aenean odio turpis, elementum ut
fermentum nec, pulvinlor sit amet, consectetur adipiscing elit. Aenean odio turpis, elementum ut
fermentum nec, pulvinlor sit amet, consectetur adipiscing elit. Aenean odio turpis, elementum ut
fermentum nec, pulvin
fermentum nec, pulvinar in lectus. Suspendisse potenti. Cras quis sem sit amet lectus consectetur
venenatis. Donec
</p>
<footer class="text-right">
#1 — Maandag 20 januari 2014 — <cite>X</cite>
</footer>
</div>
</blockquote>
</article>
<article class="col-md-6">
<blockquote class="panel panel-default">
<div class="panel-body">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean odio turpis, elementum ut
fermentum nec, pulvinar in lectus. Suspendisse potenti. Cras quis sem sit amet lectus consectetur
venenatis. Donec um dolor sit amet, consectetur adipiscing elit. Aenean odio turpis, elementum ut
fermentum nec, pulvinar in lectus. Suspendisse potenti. Cras quis sem sit amet lectus consectetur
venenatis. Donec
</p>
<footer class="text-right">
#1 — Maandag 20 januari 2014 — <cite>X</cite>
</footer>
</div>
</blockquote>
</article>
<article class="col-md-6">
<blockquote class="panel panel-default">
<div class="panel-body">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean odio turpis, elementum ut
fermentum nec, pulvinar in lectus. Suspendisse potenti. Cras quis sem sit amet lectus consectetur
venenatis. Donec
</p>
<footer class="text-right">
#1 — Maandag 20 januari 2014 — <cite>X</cite>
</footer>
</div>
</blockquote>
</article>
<article class="col-md-6">
<blockquote class="panel panel-default">
<div class="panel-body">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean odio turpis, elementum ut
fermentum nec, pulvinar in lectus. Suspendisse potenti. Cras quis sem sit amet lectus consectetur
venenatis. Donec aliquam leo mi, vel fringilla purus commodo eget. Vivamus sit amet sapien sed
mauris sodales ultrices vitae eget nisl. Nulla malesuada rhoncus mauris. Praesent vestibulum
auctor lorem mollis ornare.venenatis. Donec aliquam leo mi, vel fringilla purus commodo eget. Vivamus sit amet sapien sed
mauris sodales ultrices vitae eget nisl. Nulla malesuada rhoncus mauris. Praesent vestibulum
auctor lorem mollis ornare.
</p>
<footer class="text-right">
#1 — Maandag 20 januari 2014 — <cite>X</cite>
</footer>
</div>
</blockquote>
</article>
<article class="col-md-6">
<blockquote class="panel panel-default">
<div class="panel-body">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean odio turpis, elementum ut
fermentum ne
</p>
<footer class="text-right">
#1 — Maandag 20 januari 2014 — <cite>X</cite>
</footer>
</div>
</blockquote>
</article>
JSfidle (you might have to enlarge the Result panel because the responsive design)
I wonder how I can make all columns show next or below the previous one without some massive gaps like there are now.
First add a parent layer of row and col and decide how many columns you want for the widest screen resolution (in this case 2 so we use col-md-6). Then for each column, add one other row with multiple columns in it.
<div class="row">
<div class="col-md-6">
<div class="row>
<article class=col-md-12>...</article>
<article class=col-md-12>...</article>
<article class=col-md-12>...</article>
</div>
</div>
<div class="col-md-6">
<div class="row>
<article class=col-md-12>...</article>
<article class=col-md-12>...</article>
<article class=col-md-12>...</article>
</div>
</div>
</div>
So basically you're using the child rows as columns of the parent. I hope this makes sense.
I've updated your jsfiddle
Also for reference, here's the Bootstrap documentation regarding grids.
EDIT:
If you want to do it like on Tumblr, then you will need to load Masonry. With Masonry your markup will work just fine.
You can try a CSS grid solution like this..
.container.page {
-moz-column-width: 39em;
-webkit-column-width: 39em;
-moz-column-gap: .75em;
-webkit-column-gap: .75em;
}
.col-sm-6 {
display: inline-block;
margin: 0.75rem;
padding: .5rem;
width: 100%;
float:none;
}
Demo: http://bootply.com/108441
Or, you can accomplish this with a jquery plugin like masonry or isotope: http://bootply.com/99910
Related
I have a simple markup in which I am looking to stack two columns when below medium screen size. I am using bootstrap to achieve this, however only one of the columns stacks and the other disappears. The div that disappears is #purple-div
Any ideas?
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div id="staff" class="row py-5">
<div class="col-md-6">
<div id="purple-div">
<div id="staff-img"></div>
</div>
</div>
<div class="col-md-6">
<h4>Staff</h4>
<p>Proin eget tortor risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rutrum congue leo
eget malesuada. Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla sit amet nisl tempus
convallis quis ac lectus.</p>
<p>Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Vivamus magna justo, lacinia eget
consectetur sed, convallis at tellus. Sed porttitor lectus nibh. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Sed porttitor lectus nibh.</p>
</div>
</div>
Below medium size is (xs-sm), so you must change col-md-6 to col-6
Need help on getting the labels to centre in the container, please.
I've added a URL link to the image because it's having issues uploading onto a website for some reason.
I've also made the width 50% as I don't want them to take up the full width of the container which is fluid.
I tried using text-center but when I changed the width to 50% the labels defaulted left.
image
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<section>
<div class="container-fluid text-center">
<div class="newsletter p-5">
<form>
<h2>Sign up to our newsletter</h2>
<p>Recieve the lastest news and offers by signing up today.</p>
<div class="form-group text-center">
<label for="input-name" class="sr-only">Your Name:</label>
<input type="text" class="form-control text-center" placeholder="firstname lastname" id="input-name">
</div>
<div class="form-group text-center">
<label for="input-email" class="sr-only">Your Email:</label>
<input type="email" class="form-control text-center" placeholder="mail#example.com" id="input-email">
</div>
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" id="input-terms" value="terms">
I have read and accept the terms and conditions.
</label>
</div>
<div>
<small class="form-text">You can unsubscribe from the mailing list at anytime</small>
<button type="submit" class="m-1 btn btn-dark">SIGN UP</button>
</div>
</form>
<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="modalTitle" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modalTitle">Terms and Conditions</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec metus mollis, maximus lacus in, laoreet ligula. Etiam metus nisl, eleifend et suscipit id, viverra et lacus. Aenean pulvinar purus leo, a posuere turpis tincidunt non. Etiam
blandit enim a mauris lobortis, at placerat quam egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer suscipit velit diam, ut dapibus tellus iaculis vel. Nunc dapibus gravida leo, sit amet mollis orci suscipit non.
</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec metus mollis, maximus lacus in, laoreet ligula. Etiam metus nisl, eleifend et suscipit id, viverra et lacus. Aenean pulvinar purus leo, a posuere turpis tincidunt non. Etiam
blandit enim a mauris lobortis, at placerat quam egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer suscipit velit diam, ut dapibus tellus iaculis vel. Nunc dapibus gravida leo, sit amet mollis orci suscipit non.
</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec metus mollis, maximus lacus in, laoreet ligula. Etiam metus nisl, eleifend et suscipit id, viverra et lacus. Aenean pulvinar purus leo, a posuere turpis tincidunt non. Etiam
blandit enim a mauris lobortis, at placerat quam egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer suscipit velit diam, ut dapibus tellus iaculis vel. Nunc dapibus gravida leo, sit amet mollis orci suscipit non.
</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec metus mollis, maximus lacus in, laoreet ligula. Etiam metus nisl, eleifend et suscipit id, viverra et lacus. Aenean pulvinar purus leo, a posuere turpis tincidunt non. Etiam
blandit enim a mauris lobortis, at placerat quam egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer suscipit velit diam, ut dapibus tellus iaculis vel. Nunc dapibus gravida leo, sit amet mollis orci suscipit non.
</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec metus mollis, maximus lacus in, laoreet ligula. Etiam metus nisl, eleifend et suscipit id, viverra et lacus. Aenean pulvinar purus leo, a posuere turpis tincidunt non. Etiam
blandit enim a mauris lobortis, at placerat quam egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer suscipit velit diam, ut dapibus tellus iaculis vel. Nunc dapibus gravida leo, sit amet mollis orci suscipit non.
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">close</button>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
Try this:
form-group {
width: 50%;
margin: 0 auto;
padding: 5px;
}
Try this:
<div class="newsletter p-5">
<div class="row">
<div class="col-12 col-sm-6 offset-sm-6">
<!-- Your form here --->
</div>
</div>
</div>
Also, remove the 50% width, bootstrap columns will take care of it.
Docs: https://getbootstrap.com/docs/4.1/layout/grid/#offsetting-columns
wrap your form content
<div class="d-flex justify-content-center">
<div class="col-md-6 col-lg-5 col-sm-8">
<form>Your Content Here
</form>
</div>
</div>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<section>
<div class="container-fluid text-center">
<div class="newsletter p-5">
<div class="d-flex justify-content-center">
<div class="col-md-6 col-lg-5 col-sm-8">
<form>
<h2>Sign up to our newsletter</h2>
<p>Recieve the lastest news and offers by signing up today.</p>
<div class="form-group text-center">
<label for="input-name" class="sr-only">Your Name:</label>
<input type="text" class="form-control text-center" placeholder="firstname lastname" id="input-name">
</div>
<div class="form-group text-center">
<label for="input-email" class="sr-only">Your Email:</label>
<input type="email" class="form-control text-center" placeholder="mail#example.com" id="input-email">
</div>
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" id="input-terms" value="terms">
I have read and accept the terms and conditions.
</label>
</div>
<div>
<small class="form-text">You can unsubscribe from the mailing list at anytime</small>
<button type="submit" class="m-1 btn btn-dark">SIGN UP</button>
</div>
</form>
</div>
</div>
<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="modalTitle" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modalTitle">Terms and Conditions</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec metus mollis, maximus lacus in, laoreet ligula. Etiam metus nisl, eleifend et suscipit id, viverra et lacus. Aenean pulvinar purus leo, a posuere turpis tincidunt non. Etiam
blandit enim a mauris lobortis, at placerat quam egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer suscipit velit diam, ut dapibus tellus iaculis vel. Nunc dapibus gravida leo, sit amet mollis orci suscipit non.
</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec metus mollis, maximus lacus in, laoreet ligula. Etiam metus nisl, eleifend et suscipit id, viverra et lacus. Aenean pulvinar purus leo, a posuere turpis tincidunt non. Etiam
blandit enim a mauris lobortis, at placerat quam egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer suscipit velit diam, ut dapibus tellus iaculis vel. Nunc dapibus gravida leo, sit amet mollis orci suscipit non.
</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec metus mollis, maximus lacus in, laoreet ligula. Etiam metus nisl, eleifend et suscipit id, viverra et lacus. Aenean pulvinar purus leo, a posuere turpis tincidunt non. Etiam
blandit enim a mauris lobortis, at placerat quam egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer suscipit velit diam, ut dapibus tellus iaculis vel. Nunc dapibus gravida leo, sit amet mollis orci suscipit non.
</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec metus mollis, maximus lacus in, laoreet ligula. Etiam metus nisl, eleifend et suscipit id, viverra et lacus. Aenean pulvinar purus leo, a posuere turpis tincidunt non. Etiam
blandit enim a mauris lobortis, at placerat quam egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer suscipit velit diam, ut dapibus tellus iaculis vel. Nunc dapibus gravida leo, sit amet mollis orci suscipit non.
</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec metus mollis, maximus lacus in, laoreet ligula. Etiam metus nisl, eleifend et suscipit id, viverra et lacus. Aenean pulvinar purus leo, a posuere turpis tincidunt non. Etiam
blandit enim a mauris lobortis, at placerat quam egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer suscipit velit diam, ut dapibus tellus iaculis vel. Nunc dapibus gravida leo, sit amet mollis orci suscipit non.
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">close</button>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
Just add CSS for placeholder like below
input::placeholder{text-align:center;}
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.
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/
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>
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>
I am using Bootstrap 3. I have text on the left of the page and an image on the right. I am trying to get the text to wrap around an image. I've seen example of this for left aligned images, but I can't seem to get the opposite to work.
To show the error, I have created an example on JSFiddle.
There is a TITLE, then a banner, that should be half the page. They hockey player image should be to the right of the banner and the tops of the 2 images should be aligned, the text should start immediately under the banner, then wrap under the hockey player image. Like a newspaper layout.
<div class="row">
<div class="col-xs-12 col-sm-7">
<h2>My Title</span></h2><!-- should be left aligned-->
<img src="/img/title_image.png" class="img-responsive"/><!--Should be left aligned-->
</div>
<div class="col-xs-12 col-sm-5 pull-right">
<h2> </h2>
<img src="/image_on_right_text_to_wrap_around.png" class="img-responsive"/>
</div>
<div class="col-xs-12">
<!-- This text should be under the title image and wrap underneath the larger image on the right-->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque leo leo, id congue massa blandit eget. Donec euismod a purus ut rhoncus. Integer commodo lectus nec bibendum eleifend. Pellentesque vestibulum tellus sed massa consequat lacinia. Integer ipsum lectus, pulvinar id arcu id, tristique luctus arcu. Maecenas non nibh sit amet risus tincidunt aliquam. Aenean ac auctor sem. Vestibulum ultrices finibus sapien sit amet condimentum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque leo leo, id congue massa blandit eget. Donec euismod a purus ut rhoncus. Integer commodo lectus nec bibendum eleifend. Pellentesque vestibulum tellus sed massa consequat lacinia. Integer ipsum lectus, pulvinar id arcu id, tristique luctus arcu. Maecenas non nibh sit amet risus tincidunt aliquam. Aenean ac auctor sem. Vestibulum ultrices finibus sapien sit amet condimentum.
</p>
</div>
<div class="col-xs-12">
MORE TEXT HERE
Example Layout here
This may be what you want:
<div class="media">
<div class="media-body">
<h4 class="media-heading">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque leo leo, id congue massa blandit eget. Donec euismod a purus ut rhoncus. Integer commodo lectus nec bibendum eleifend. Pellentesque vestibulum tellus sed massa consequat lacinia. Integer ipsum lectus, pulvinar id arcu id, tristique luctus arcu. Maecenas non nibh sit amet risus tincidunt aliquam. Aenean ac auctor sem. Vestibulum ultrices finibus sapien sit amet condimentum.</h4>
...
</div>
<div class="media-left media-middle">
<a href="#">
<img class="media-object" src="..." alt="...">
</a>
</div>
</div>
Is this what you want?I made couple of divs and made it looks simple, you haven't added specific row to your header image, becausse of that both images started to stack inline.And i changed the columns divs.
CODEPEN exapmle
<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>
<div class="container-fluid">
<div class="row">
<div class="row">
<div class="col-xs-12 col-sm-7">
<h2>My Title</span></h2><!-- should be left aligned-->
<img src="http://paradigmmedia.co.uk/wp-content/uploads/header-b88d930b520c523ef8a53abfb86d7523.png" class="img-responsive"/><!--Should be left aligned-->
</div>
</div>
<div class="row">
<div class="col-xs-5 col-sm-5 pull-right">
<img src="https://lh3.googleusercontent.com/nhzkOTPaoWAYfO-LeklB_kPd5bAqm43D87Q3eHlK3alIse8rgrYPE74epbbbZ2b4EsY=w300" class="img-responsive"/>
</div>
<div class="col-xs-7">
<!-- This text should be under the title image and wrap underneath the larger image on the right-->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque leo leo, id congue massa blandit eget. Donec euismod a purus ut rhoncus. Integer commodo lectus nec bibendum eleifend. Pellentesque vestibulum tellus sed massa consequat lacinia. Integer ipsum lectus, pulvinar id arcu id, tristique luctus arcu. Maecenas non nibh sit amet risus tincidunt aliquam. Aenean ac auctor sem. Vestibulum ultrices finibus sapien sit amet condimentum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque leo leo, id congue massa blandit eget. Donec euismod a purus ut rhoncus. Integer commodo lectus nec bibendum eleifend. Pellentesque vestibulum tellus sed massa consequat lacinia. Integer ipsum lectus, pulvinar id arcu id, tristique luctus arcu. Maecenas non nibh sit amet risus tincidunt aliquam. Aenean ac auctor sem. Vestibulum ultrices finibus sapien sit amet condimentum.
</p>
</div>
</div>
</div>
</div>
Basically, any UI Framework(Bootstrap) depend on a grid. So you have to do separation of each block and put text different column and image have to put in different column.
.bg-img{
height:200px;
background-image: url("https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRSZQsdLrY0gp9N9JoGJlQ-Bo4AELr4TKcNZGY-DB756oozHCFL");
background-repeat: no-repeat;
}
<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>
<div class="container">
<div class="row">
<div class="col-xs-5 col-sm-5">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque leo leo, id congue massa blandit eget. Donec euismod a purus ut rhoncus. Integer commodo lectus nec bibendum eleifend. Pellentesque vestibulum tellus sed massa consequat lacinia</p>
</div>
<div class="col-xs-7">
<p>
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRSZQsdLrY0gp9N9JoGJlQ-Bo4AELr4TKcNZGY-DB756oozHCFL" class="img-responsive"/>
</p>
</div>
</div>
<div class="row">
<div class="col-xs-5 col-sm-5">
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRSZQsdLrY0gp9N9JoGJlQ-Bo4AELr4TKcNZGY-DB756oozHCFL" class="img-responsive"/>
</div>
<div class="col-xs-7">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque leo leo, id congue massa blandit eget. Donec euismod a purus ut rhoncus. Integer commodo lectus nec bibendum eleifend. Pellentesque vestibulum tellus sed massa consequat lacinia.
</p>
</div>
</div>
<div class="row">
<div class=" col-sm-6">
<div class="bg-img">
<h4> Lorem ipsu6 dolor sit amet</h4>
</div>
</div>
<div class="col-sm-6">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
</div>
</div>
In above snippet I have taken 3 rows. In first row I am setting image in left side, In second row image set in right side and third row image set into first row with text on image. you can run my snippet. Good luck. happy to help.
I have solved with with bootstrap 3, it now behaves correctly:
https://jsfiddle.net/cec9086a/
<div class="container">
<div class="jumbotron">
<div class="row">
<h2>
My Title
</h2>
</div>
<div class="row">
<div class="col-xs-12 col-sm-6 pull-left">
<img src="http://cliparts.co/cliparts/piq/rGa/piqrGaGyT.png" class="img-responsive"/>
</div>
<div class="col-xs-12 col-sm-6 pull-right">
<img src="http://www.legendsofhockey.net/LegendsOfHockey/members/splash/P197702S.jpg" class="img-responsive pull right"/>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque leo leo, id congue massa blandit eget. Donec euismod a purus ut rhoncus. Integer commodo lectus nec bibendum eleifend. Pellentesque vestibulum tellus sed massa consequat lacinia. Integer ipsum lectus, pulvinar id arcu id, tristique luctus arcu. Maecenas non nibh sit amet risus tincidunt aliquam. Aenean ac auctor sem. Vestibulum ultrices finibus sapien sit amet condimentum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque leo leo, id congue massa blandit eget. Donec euismod a purus ut rhoncus. Integer commodo lectus nec bibendum eleifend. Pellentesque vestibulum tellus sed massa consequat lacinia. Integer ipsum lectus, pulvinar id arcu id, tristique luctus arcu. Maecenas non nibh sit amet risus tincidunt aliquam. Aenean ac auctor sem. Vestibulum ultrices finibus sapien sit amet condimentum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque leo leo, id congue massa blandit eget. Donec euismod a purus ut rhoncus. Integer commodo lectus nec bibendum eleifend. Pellentesque vestibulum tellus sed massa consequat lacinia. Integer ipsum lectus, pulvinar id arcu id, tristique luctus arcu. Maecenas non nibh sit amet risus tincidunt aliquam. Aenean ac auctor sem. Vestibulum ultrices finibus sapien sit amet condimentum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque leo leo, id congue massa blandit eget. Donec euismod a purus ut rhoncus. Integer commodo lectus nec bibendum eleifend. Pellentesque vestibulum tellus sed massa consequat lacinia. Integer ipsum lectus, pulvinar id arcu id, tristique luctus arcu. Maecenas non nibh sit amet risus tincidunt aliquam. Aenean ac auctor sem. Vestibulum ultrices finibus sapien sit amet condimentum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque leo leo, id congue massa blandit eget. Donec euismod a purus ut rhoncus. Integer commodo lectus nec bibendum eleifend. Pellentesque vestibulum tellus sed massa consequat lacinia. Integer ipsum lectus, pulvinar id arcu id, tristique luctus arcu. Maecenas non nibh sit amet risus tincidunt aliquam. Aenean ac auctor sem. Vestibulum ultrices finibus sapien sit amet condimentum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque leo leo, id congue massa blandit eget. Donec euismod a purus ut rhoncus. Integer commodo lectus nec bibendum eleifend. Pellentesque vestibulum tellus sed massa consequat lacinia. Integer ipsum lectus, pulvinar id arcu id, tristique luctus arcu. Maecenas non nibh sit amet risus tincidunt aliquam. Aenean ac auctor sem. Vestibulum ultrices finibus sapien sit amet condimentum.
</p>
</div>
</div>
</div>
I am using skeleton. I am using one-third column three times. But the third one is not on the same line and is breaking away from the row. It is in the next line.
Also there is a white space before the first column.
I am using following HTML code!
<link href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" rel="stylesheet" />
<div class="one-third column feature">
<h2>Feature</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing. Nam quis justo in augue auctor imperdiet. Curabitur aliquet orci sit amet est posuere consectetur.</p>
</div>
<div class="one-third column feature">
<h2>Perfomance</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing. Nam quis justo in augue auctor imperdiet. Curabitur aliquet orci sit amet est posuere consectetur.</p>
</div>
<div class="one-third column feature">
<h2>Trial</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing. Nam quis justo in augue auctor imperdiet. Curabitur aliquet orci sit amet est posuere consectetur.</p>
</div>
The default margin-left for .column is 4% and the width of each column is 30.6667%, so that adds up to (30.6667% + 4%) * 3 = 104.0001%. That is pushing the last column to the next line.
You need to overwrite the margin-left to 2.6%, which will add up to (30.6667% + 2.6%) * 3 = 99.8001%
.column {
margin-left: 2.6% !important;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" rel="stylesheet" />
<div class="one-third column feature">
<h2>Feature</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing. Nam quis justo in augue auctor imperdiet. Curabitur aliquet orci sit amet est posuere consectetur.</p>
</div>
<div class="one-third column feature">
<h2>Perfomance</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing. Nam quis justo in augue auctor imperdiet. Curabitur aliquet orci sit amet est posuere consectetur.</p>
</div>
<div class="one-third column feature">
<h2>Trial</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing. Nam quis justo in augue auctor imperdiet. Curabitur aliquet orci sit amet est posuere consectetur.</p>
</div>
I had the same problem. The solution is wrapping these 3 "one-third column" with ... columns here ..
#chipChocolate we use CSS frameworks for avoiding this kind of detailed calculations. adding row is framework's provided way.
I hope this helps
<link href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" rel="stylesheet" />
<div class="row"><!-- row for one-third -->
<div class="one-third column feature">
<h2>Feature</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing. Nam quis justo in augue auctor imperdiet. Curabitur aliquet orci sit amet est posuere consectetur.</p>
</div>
<div class="one-third column feature">
<h2>Perfomance</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing. Nam quis justo in augue auctor imperdiet. Curabitur aliquet orci sit amet est posuere consectetur.</p>
</div>
<div class="one-third column feature">
<h2>Trial</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing. Nam quis justo in augue auctor imperdiet. Curabitur aliquet orci sit amet est posuere consectetur.</p>
</div>
</div><!-- End of row -->
Just put your code between <div class="row"> and </div>