I'm trying to use Bootstrap' grid for blog posts. I want them to be aligned under each other - but I can't seem to figure out how. I have my col-md placed inside a container, then a row. I have Googled my way around, but there doesn't seem to be a straight answer, or I cant find it.
How it looks now
How I want it to look
The code
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="blogpost">
<div class="pad">
<h2>Designed by Apple - Intention</h2>
<p>Here, simple phrases paired with elegant visuals describe the thoughts and emotions that go into creating each Apple product.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="blogpost">
<img src="assets/img/1.jpg" alt="">
<div class="pad">
<h2>Official launch today</h2>
<p>Duis id sagittis ipsum. Proin gravida libero augue. Vivamus dignissim ipsum blandit magna tempus, porta porta nisi pellentesque. Sed ligula lorem, semper non sem maximus, suscipit tincidunt nisi. Etiam pulvinar quam purus, at fringilla erat ultricies ac. Aenean vitae laoreet ligula.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="blogpost">
<img src="assets/img/1.jpg" alt="">
<div class="pad">
<h2>Official launch today</h2>
<p>Duis id sagittis ipsum. Proin gravida libero augue. Vivamus dignissim ipsum blandit magna tempus, porta porta nisi pellentesque. Sed ligula lorem, semper non sem maximus, suscipit tincidunt nisi. Etiam pulvinar quam purus, at fringilla erat ultricies ac. Aenean vitae laoreet ligula.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="blogpost">
<div class="pad">
asdasd
</div>
</div>
</div>
</div>
To get what you want your template does not have to be arranged in rows but only for columns in this way the elements within each column will be in place under each other without space constraint imposed by the line. For do this remove the external
Try a look a this sample
Related
I am trying to achieve the following layout:
I have been able to do this more or less with two issues:
The columns overlap with the image
The circles are not centered. Moreover when I see this on the mobile, amongst other issues, the two circles stack on top of each other.
Here's my HTML:
<div class="container"> <!-- can't change this -->
<div class="col-md-8 column"> <!-- can't change this -->
<!-- can change anything below this -->
<div class="row">
<div class="col-md-3">
<img alt="Some Image" src="http://lorempixel.com/340/340/" />
</div>
<div class="col-md-9">
<div class="row">
<div class="col-md-12">
<p>
Lorem ipsum dolor sit amet
</p>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="circle">450
<br> reviews </div>
<div class="circle">4.2 million
<br> readers </div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p>
Lorem ipsum dolor sit amet
</p>
</div>
</div>
</div>
</div>
Live Demo
Please help resolve these issues.
It doesn't necessarily overlaps, in this particular case, simply give the image img-responsive class so the width of the image is always at max 100%.
To solve the circle issues, you can put them inside a col-xs-6 so they don't stack on top of each other.
Here is a demo: https://codepen.io/anon/pen/WMEMbW
<div class="container">
<!-- can't change this -->
<div class="col-md-8 column">
<!-- can't change this -->
<!-- can change anything below this -->
<div class="row">
<div class="col-md-3">
<img alt="Some Image" src="http://lorempixel.com/340/340/" class="img-responsive" />
</div>
<div class="col-md-9">
<div class="row">
<div class="col-md-12">
<p>
Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Aliquam eget sapien sapien. Curabitur in metus urna. In hac habitasse platea dictumst. Phasellus eu sem sapien, sed vestibulum velit. Nam purus nibh, lacinia non faucibus et, pharetra in dolor. Sed iaculis posuere diam ut cursus. <em>Morbi commodo sodales nisi id sodales. Proin consectetur, nisi id commodo imperdiet, metus nunc consequat lectus, id bibendum diam velit et dui.</em> Proin massa magna, vulputate nec bibendum nec, posuere nec lacus. <small>Aliquam mi erat, aliquam vel luctus eu, pharetra quis elit. Nulla euismod ultrices massa, et feugiat ipsum consequat eu.</small>
</p>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="center-block">
<div class="col-xs-6">
<div class="circle">450
<br> reviews
</div>
</div>
<div class="col-xs-6">
<div class="circle">4.2 million
<br> readers
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p>
Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Aliquam eget sapien sapien. Curabitur in metus urna. In hac habitasse platea dictumst. Phasellus eu sem sapien, sed vestibulum velit. Nam purus nibh, lacinia non faucibus et, pharetra in dolor. Sed iaculis posuere diam ut cursus. <em>Morbi commodo sodales nisi id sodales. Proin consectetur, nisi id commodo imperdiet, metus nunc consequat lectus, id bibendum diam velit et dui.</em> Proin massa magna, vulputate nec bibendum nec, posuere nec lacus. <small>Aliquam mi erat, aliquam vel luctus eu, pharetra quis elit. Nulla euismod ultrices massa, et feugiat ipsum consequat eu.</small>
</p>
</div>
</div>
</div>
</div>
I guess you should be using the help of some media queries as well.
Have made some changes to the demo you shared.
Updated Demo
CSS
.circle {
display: inline-flex;
justify-content: center;
align-items: center;
text-align: center;
margin-right: 10px;
width: 200px;
height: 200px;
font-size: 35px;
border-radius: 50%;
color: #fef;
background: #000
}
.img-left {
max-width: 100%;
}
.circle-wrapper {
text-align: center;
}
#media (max-width:500px) {
.circle-wrapper .circle{
width: 150px;
height: 150px;
font-size: 25px;
}
}
HTML:
<div class="container"> <!-- can't change this -->
<div class="col-md-8 column"> <!-- can't change this -->
<!-- can change anything below this -->
<div class="row">
<div class="col-md-3">
<img class="img-left" alt="Some Image" src="http://lorempixel.com/340/340/" />
</div>
<div class="col-md-9">
<div class="row">
<div class="col-md-12">
<p>
Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Aliquam eget sapien sapien. Curabitur in metus urna. In hac habitasse platea dictumst. Phasellus eu sem sapien, sed vestibulum velit. Nam purus nibh, lacinia non faucibus et, pharetra in dolor. Sed iaculis posuere diam ut cursus. <em>Morbi commodo sodales nisi id sodales. Proin consectetur, nisi id commodo imperdiet, metus nunc consequat lectus, id bibendum diam velit et dui.</em> Proin massa magna, vulputate nec bibendum nec, posuere nec lacus. <small>Aliquam mi erat, aliquam vel luctus eu, pharetra quis elit. Nulla euismod ultrices massa, et feugiat ipsum consequat eu.</small>
</p>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="row circle-wrapper">
<div class="circle">450
<br> reviews </div>
<div class="circle">4.2 million
<br> readers </div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p>
Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Aliquam eget sapien sapien. Curabitur in metus urna. In hac habitasse platea dictumst. Phasellus eu sem sapien, sed vestibulum velit. Nam purus nibh, lacinia non faucibus et, pharetra in dolor. Sed iaculis posuere diam ut cursus. <em>Morbi commodo sodales nisi id sodales. Proin consectetur, nisi id commodo imperdiet, metus nunc consequat lectus, id bibendum diam velit et dui.</em> Proin massa magna, vulputate nec bibendum nec, posuere nec lacus. <small>Aliquam mi erat, aliquam vel luctus eu, pharetra quis elit. Nulla euismod ultrices massa, et feugiat ipsum consequat eu.</small>
</p>
</div>
</div>
</div>
</div>
I want to create a bootstrap based WordPress. But the out put doesn't give me the same. Attached screenshot.
The code for wordpress is below:
<div class="container">
<img src="<?php echo get_template_directory_uri(); ?>/images/security-and-surveillance-banner.jpg" class="img-fluid" alt="Responsive image" style="width:100%;display:block">
<!-- Main component for a primary marketing message or call to action -->
<div class="jumbotron">
<div class="row">
<?php query_posts('showposts=3');?>
<?php if(have_posts()) :?><?php while(have_posts()) : the_post(); ?>
<div class="col-md-4">
<h2><?php the_title(); ?></h2>
<?php the_content(); ?>
</div>
<?php endwhile;?>
<?php endif; ?>
</div>
</div>
</div>
and the cited code is below, check the code, and seems to be the same for HTML, not sure why giving me different view?
<div class="container">
<img src="images/sample1.png" class="img-fluid" alt="Responsive image" style="width:100%;display:block">
<!-- Main component for a primary marketing message or call to action -->
<div class="jumbotron">
<div class="row">
<div class="col-md-4">
<h2>Heading</h2>
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.
</div>
<div class="col-md-4">
<h2>Heading</h2>
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.
</div>
<div class="col-md-4">
<h2>Heading</h2>
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.
</div>
</div>
</div>
</div>
What I want to output is that same paragraph font style and background color. If I remove jumbotron, then it would be the same as I wish, but background color will be removed, which is not my expected.
Regarding the input-groups-buttons bootstrap 3 feature :
https://getbootstrap.com/components/#input-groups-buttons
I would like to know how can I create a CSS that reproduced the same feature for panel-heading.
At this time, I have a button inside the panel heading (which I had to change a little CSS so it can fit in the panel-heading).
http://www.bootply.com/TjI7cyaYIu (without my little CSS hack)
So I want this button to be displayed the same way an input-group-button is.
A similar question may have been posted here : Bootstrap input-group-addon icons for non-inputs but without any relevant answers.
I know this is not a bootstrap feature and my CSS skills are pretty low so I hope someone can help me !
Try something like this :) should work for u.
<div class="panel panel-default">
<div class="panel-heading">
<div style="display: flex;">
<div style="width: 80%;"> Title goes Here </div>
<div style="width: 20%;" class="text-right"> ICON </div>
</div>
</div>
<div class="panel-body">
Panel content
</div>
</div>
http://www.bootply.com/RR1vUVQh97
If you want to learn easily some CSS-Basics and how to use bootstrap, try codecademy ;)
------------------------------------------------------------------ EDIT:
Here is the solution including your button:
<div class="panel panel-default">
<div class="panel-heading" style="display: flex;">
<div style="width: 80%">
<h4 class="panel-title" style="margin-top: 7px;">MY TITLE</h4>
</div>
<div style="width: 30%" class="text-right">
<button class="btn btn-sm btn-danger pull-right">
<i class="fa fa-trash"></i>
</button>
</div>
</div>
<div class="panel-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nibh lorem, ultricies a luctus ac, congue et dui. Suspendisse a neque augue. Ut laoreet elit pretium dolor ullamcorper feugiat. Curabitur scelerisque, diam in tristique consequat, lacus quam sagittis lorem, ut gravida enim arcu ultricies mauris. Maecenas convallis pretium diam sed malesuada. Donec eget nunc id ligula elementum interdum vel vitae est. Morbi ut magna vulputate dui condimentum lobortis. Curabitur commodo eget lectus a mollis. Vestibulum eget fermentum enim, id commodo diam.
</div>
</div>
http://www.bootply.com/RltWAo76Bq
With edited border-radius: http://www.bootply.com/eYpYJz9BcW
I've been trying to recreate a list like the one below (the checkbox and the x are just png images) but I can't seem to figure it out.
I have tried using two texted cols but I can't for the life of me figure out how to get the alignment and the text breaks correct.
Any help would be very much appreciated.
Right now, my code looks like this:
<div class="row">
<div class="col-md-6 col-md-6-offset-2">
<h4 style="text-align: center;">THEY LOVE</h4>
<div class="row ">
<div class="col-xs-1">
<img src="http://d26mw3lpqa99qj.cloudfront.net/prod-fool/sell/yes-15d4ba569f9f4beb7d8cfd8adc8ed886.png">
</div>
<div class="col-xs-11">
<p style="padding-top: 8px;">Stuff</p>
</div>
</div>
</div>
<div class="col-md-6" style="text-align: center;"><h4>THEY DON'T LOVE</h4></div>
<div class="row ">
<div class="col-xs-1">
<img src="http://d26mw3lpqa99qj.cloudfront.net/prod-fool/sell/yes-15d4ba569f9f4beb7d8cfd8adc8ed886.png">
</div>
<div class="col-xs-10">
<p style="padding-top: 8px;">Stuff</p>
</div>
</div>
</div>
DEMO: http://jsbin.com/faboze/1/
http://jsbin.com/faboze/1/edit?html,css,output
Look carefully at the html and the css so you can understand how to adjust the spacing and how a hanging indent is done with an un-ordered list. Also look at the grid classes used.
<div class="container">
<div class="row">
<div class="col-sm-offset-2 col-sm-4">
<h4 class="text-center">THEY LOVE</h4>
<ul class="list-unstyled love">
<li>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.</li>
<li>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</li>
<li>Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.</li>
<li>Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</li>
</ul>
</div>
<div class="col-sm-4">
<h4 class="text-center">THEY DON’T LOVE</h4>
<ul class="list-unstyled no-love">
<li>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.</li>
<li>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</li>
<li>Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.</li>
<li>Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</li>
</ul>
</div>
</div>
</div>
CSS
.list-unstyled.love li,
.list-unstyled.no-love li {
background: url('http://d26mw3lpqa99qj.cloudfront.net/prod-fool/sell/yes-15d4ba569f9f4beb7d8cfd8adc8ed886.png') no-repeat;
padding:0 0 5% 45px;
}
/* ======= change the no-love image ========== */
.list-unstyled.no-love li {
background: url('http://d26mw3lpqa99qj.cloudfront.net/prod-fool/sell/yes-15d4ba569f9f4beb7d8cfd8adc8ed886.png') no-repeat;
}
You didnt close your tags properly. Check below code.
You can use text-center class from bootstrap for centering the stuff.
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row text-center">
<div class="col-md-6 col-md-6-offset-2">
<h4>THEY LOVE</h4>
<div class="row ">
<div class="col-xs-1">
<img src="http://d26mw3lpqa99qj.cloudfront.net/prod-fool/sell/yes-15d4ba569f9f4beb7d8cfd8adc8ed886.png"/>
</div>
<div class="col-xs-11">
<p style="padding-top: 8px;">Stuff</p>
</div>
</div>
</div>
<div class="col-md-6"><h4>THEY DON'T LOVE</h4>
<div class="row ">
<div class="col-xs-1">
<img src="http://d26mw3lpqa99qj.cloudfront.net/prod-fool/sell/yes-15d4ba569f9f4beb7d8cfd8adc8ed886.png"/>
</div>
<div class="col-xs-11">
<p style="padding-top: 8px;">Stuff</p>
</div>
</div>
</div>
I am creating mockup where the content will look like a board, a little like Pinterest. I am using Twitters-Bootstrap, and are having some issues with the layout.
I have a dynamic amount of elements, so I thought I could just have one row, and the items would then just wrap to the next line. This, however, creates som wierd space between the content-spans (see image below).
I am not a designer, so my question is, if there is a way to use one single row to display all the content blocks, still using the fluid design?
Another way would be to programmatically add the rows, but it seems like a problem which the stylesheet and not business logic should solve.
The code looks like this:
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<li class="span3 pdt10">
<div class="thumbnail">
<img src="http://placehold.it/260x180" alt="">
<div class="caption">
<h5>
Thumbnail label</h5>
<p>
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi
porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p>
Action Action</p>
</div>
</div>
</li>
<li class="span3 pdt10">
<div class="thumbnail">
<img src="http://placehold.it/260x180" alt="">
<div class="caption">
<h5>
Thumbnail label</h5>
<p>
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi
porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p>
Action Action</p>
</div>
</div>
</li>
<li class="span3 pdt10">
<div class="thumbnail">
<img src="http://placehold.it/260x180" alt="">
<div class="caption">
<h5>
Thumbnail label</h5>
<p>
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi
porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p>
Action Action</p>
</div>
</div>
</li>
<li class="span3 pdt10">
<div class="thumbnail">
<img src="http://placehold.it/260x180" alt="">
<div class="caption">
<h5>
Thumbnail label</h5>
<p>
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi
porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p>
Action Action</p>
</div>
</div>
</li>
<li class="span3 pdt10">
<div class="thumbnail">
<img src="http://placehold.it/260x180" alt="">
<div class="caption">
<h5>
Thumbnail label</h5>
<p>
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi
porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p>
Action Action</p>
</div>
</div>
</li>
</div>
</div>
Use the CSS property nth-child with media queries to remove the left margin on the first element of each line -
.myclass > li:nth-child(4n+1) {
margin-left: 0px;
}
Media queries are explained here http://twitter.github.com/bootstrap/scaffolding.html
And nth-child is used in Twitter Bootstrap as well.