Related
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 trying to create something like image on left and content on right and alternate order. As you can see my picture below the second one of the image is not on the right side. And is not responsive on smaller screen size. Please help!
Here is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<title>Example</title>
<style>
body {
margin-top: 50px;
}
.img-1 {
height: 250px;
width: 350px;
margin: 10px 50px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-6" >
<img class="img-1" src="img-1.jpg">
</div>
<div class="col-md-4 col-sm-4">
<h3>h3 title</h3>
<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Nulla vitae elit libero, a pharetra augue. Nulla vitae elit libero, a pharetra
augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dapibus,
tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum
massa justo sit amet risus. Nullam quis risus eget urna mollis ornare vel
eu leo. Cras mattis consectetur purus sit amet fermentum.</p>
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-6" >
<img class="img-1" src="img-1.jpg">
</div>
<div class="col-md-4 col-sm-4">
<h3 class="">h3 title</h3>
<p class="">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Nulla vitae elit libero, a pharetra augue. Nulla vitae elit libero, a pharetra
augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dapibus,
tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum
massa justo sit amet risus. Nullam quis risus eget urna mollis ornare vel
eu leo. Cras mattis consectetur purus sit amet fermentum.</p>
</div>
</div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</body>
</html>
And this is not responsive on smaller screen size, How can I fix it?
Your help much appriciate!
To switch the order so the picture is on the right, in your second row the first div with the class="col-md-6 col-sm-6" should have the h3 and p in it, and then the second div in that row with class="col-md-4 col-sm-4" should have the img in it. To make the images responsive, add the "img-responsive" class in the img tags, and make the height and width you defined in the CSS a max-height or max-width so the images can scale down to a smaller height/width to fit in smaller screens.
Use can use .col-sm-push-* and .col-sm-pull-* to switch the ordering of grid columns. Here is reference:http://getbootstrap.com/css/#grid-column-ordering.
To make the images responsive, add the "img-responsive" class in the img tags.
.img-1{
margin-bottom:20px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-sm-6" >
<img class="img-1 img-responsive" src="https://pioneerwoman.files.wordpress.com/2010/11/springy-flower-pot-desserts1.jpg">
</div>
<div class="col-sm-4">
<h3>h3 title</h3>
<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Nulla vitae elit libero, a pharetra augue. Nulla vitae elit libero, a pharetra
augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dapibus,
tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum
massa justo sit amet risus. Nullam quis risus eget urna mollis ornare vel
eu leo. Cras mattis consectetur purus sit amet fermentum.</p>
</div>
</div>
<div class="row">
<div class="col-sm-6 col-sm-push-4" >
<img class="img-1 img-responsive" src="http://www.blog.designsquish.com/images/uploads/jason-whatever-flower-pots.jpg">
</div>
<div class="col-sm-4 col-sm-pull-6">
<h3 class="">h3 title</h3>
<p class="">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Nulla vitae elit libero, a pharetra augue. Nulla vitae elit libero, a pharetra
augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dapibus,
tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum
massa justo sit amet risus. Nullam quis risus eget urna mollis ornare vel
eu leo. Cras mattis consectetur purus sit amet fermentum.</p>
</div>
</div>
</div>
See if this helps.
Please click the link to see how it works. https://jsfiddle.net/2d7vab0t/
HTML:
<img class="img-1" src="img-1.jpg" width="350px" height="250px">
<div id="container">
<h3>h3 title</h3>
<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Nulla vitae elit libero, a pharetra augue. Nulla vitae elit libero, a pharetra
augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dapibus,
tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum
massa justo sit amet risus. Nullam quis risus eget urna mollis ornare vel
eu leo. Cras mattis consectetur purus sit amet fermentum.</p>
</div>
<div id="container2">
<img class="img-1" src="img-1.jpg" width="350px" height="250px">
<h3 class="">h3 title</h3>
<p class="">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Nulla vitae elit libero, a pharetra augue. Nulla vitae elit libero, a pharetra
augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dapibus,
tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum
massa justo sit amet risus. Nullam quis risus eget urna mollis ornare vel
eu leo. Cras mattis consectetur purus sit amet fermentum.</p>
</div>
CSS:
body {
margin-top: 50px;
}
.img-1 {
border: 1px solid black;
max-width: 50%;
margin: 10px 50px;
}
#media only screen and (min-width:768px) {
img {float: left;}
#container2 {clear: left;}
}
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>
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