How can i make a 4 x 2 Column Div in bootstrap responsive on mobile devices?
Preferably so they all collapse below one another at a certain breakpoint.
<div class="row">
<div class="col-lg-12">
<div class="services-col-1">
<div class="col-xs-3" id="p1"><strong>Heading One</strong><p>Mauris tristique pharetra luctus. Curabitur fermentum orci at sapien sollicitudin, maximus viverra sem tincidunt. sem tincidunt.Mauris tristique pharetra luctus. Curabitur fermentum orci at sapien sollicitudin, maximus viverra sem tincidunt. sem tincidunt.</p></div>
<div class="col-xs-3 col-half-offset" id="p2"><strong>Heading Two</strong><p>Mauris tristique pharetra luctus. Curabitur fermentum orci at sapien sollicitudin, maximus viverra sem tincidunt. sem tincidunt.Mauris tristique pharetra luctus. Curabitur fermentum orci at sapien sollicitudin, maximus viverra sem tincidunt. sem tincidunt.</p></div>
<div class="col-xs-3 col-half-offset" id="p3"><strong>Heading Three</strong><p>Mauris tristique pharetra luctus. Curabitur fermentum orci at sapien sollicitudin, maximus viverra sem tincidunt. sem tincidunt.Mauris tristique pharetra luctus. Curabitur fermentum orci at sapien sollicitudin, maximus viverra sem tincidunt. sem tincidunt.</p></div>
<div class="col-xs-3 col-half-offset" id="p4"><strong>Heading Four</strong><p>Mauris tristique pharetra luctus. Curabitur fermentum orci at sapien sollicitudin, maximus viverra sem tincidunt. sem tincidunt.Mauris tristique pharetra luctus. Curabitur fermentum orci at sapien sollicitudin, maximus viverra sem tincidunt. sem tincidunt.</p></div>
<div class="col-xs-3 col-half-offset" id="p5"><strong>Heading Five</strong><p>Mauris tristique pharetra luctus. Curabitur fermentum orci at sapien sollicitudin, maximus viverra sem tincidunt. sem tincidunt.Mauris tristique pharetra luctus. Curabitur fermentum orci at sapien sollicitudin, maximus viverra sem tincidunt. sem tincidunt.</p></div>
<div class="col-xs-3 col-half-offset" id="p6"><strong>Heading Six</strong><p>Mauris tristique pharetra luctus. Curabitur fermentum orci at sapien sollicitudin, maximus viverra sem tincidunt. sem tincidunt.Mauris tristique pharetra luctus. Curabitur fermentum orci at sapien sollicitudin, maximus viverra sem tincidunt. sem tincidunt.</p></div>
</div>
If I understand correctly you need two rows with 4 columns, if yes. There is a solution with Bootstrap as you mentioned.
In one row there must be max 12 col in total. 12 total / 4 columns = 3 (col-*-3)
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-xs-3 col-sm-3">
One of four columns
</div>
<div class="col-xs-3 col-sm-3">
One of four columns
</div>
<div class="col-xs-3 col-sm-3">
One of four columns
</div>
<div class="col-xs-3 col-sm-3">
One of four columns
</div>
</div>
<div class="row">
<div class="col-xs-3 col-sm-3">
One of four columns
</div>
<div class="col-xs-3 col-sm-3">
One of four columns
</div>
<div class="col-xs-3 col-sm-3">
One of four columns
</div>
<div class="col-xs-3 col-sm-3">
One of four columns
</div>
</div>
</div>
One possible way to do it is to use .col-xs-12 class for targetting mobile devices.
Checkout this Codepen
Or look at the snippet below:
<!-- 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">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-3">
One of four columns
</div>
<div class="col-xs-12 col-sm-3">
One of four columns
</div>
<div class="col-xs-12 col-sm-3">
One of four columns
</div>
<div class="col-xs-12 col-sm-3">
One of four columns
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-3">
One of four columns
</div>
<div class="col-xs-12 col-sm-3">
One of four columns
</div>
<div class="col-xs-12 col-sm-3">
One of four columns
</div>
<div class="col-xs-12 col-sm-3">
One of four columns
</div>
</div>
</div>
Hope this helps!
Related
I have this simple bootstrap content and I wanted to make the second column fill up the space
Code
<div id="app">
<nav class="navbar navbar-dark bg-dark">
<a class="navbar-brand" href="#">Navbar</a>
</nav>
<div class="content">
<div class="container">
<div class="row">
<div class="col-sm-6">
<div class="card">
<h5 class="card-header">Featured</h5>
<div class="card-body">
<h5 class="card-title">First Column</h5>
<p class="card-text">Curabitur accumsan turpis pharetra accumsan turpis pharetra augue tincidunt blandit. Quisque condimentum maximusaugue tincidunt blandit. Quisque condimentum maximus mi, sit amet commodo arcu rutrum id. Proin pretium urna vel cursus venenatis. Suspendisse potenti. Etiam mattis sem rhoncus lacus dapibus facilisis. Donec at dignissim dui. Ut et neque nisl.Curabitur accumsan turpis pharetra accumsan turpis pharetra augue tincidunt blandit. Quisque condimentum maximusaugue tincidunt blandit. Quisque condimentum maximus mi, sit amet commodo arcu rutrum id. Proin pretium urna vel cursus venenatis. Suspendisse potenti</p>
</div>
</div>
</div>
<div class="col-sm-6 ">
<div class="card">
<h5 class="card-header">Featured</h5>
<div class="card-body">
<h5 class="card-title">Second Column needs to take up the remaining space</h5>
<p class="card-text">additional content.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
https://codepen.io/anon/pen/mQPdLj/
So how do I make it without using a specific height for second column? The first column can take up any space and the other needs to fill it even if the content is less. I tried flex-grow and flex-fill but didn't work for me.
You can make the column flex and make the card flex-grow:1:
.col-sm-6 {
display:flex;
flex-direction:column;
}
.card {
margin: 1rem 0;
background: #eff2fb;
flex-grow:1;
}
Updated pen
There's also a ready bootstrap solution.
Add d-flex align-items-stretch classes to elements having col-sm-6.
<div class="content">
<div class="container">
<div class="row">
<div class="col-sm-6 d-flex align-items-stretch">
// ...
</div>
<div class="col-sm-6 d-flex align-items-stretch">
// ...
</div>
</div>
</div>
</div>
See working code here: https://codepen.io/anon/pen/mQPyWY
This also work add class "d-flex align-items-stretch" both column.
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
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>
What am I doing wrong again? The Placeholder column should align with the container div but it isn't. Here's the code
<div class="container">
<!--Content Area-->
<div id="content" class="row-fluid">
<!--Main Content Area-->
<div class="span6" id="main">
<h2>PLACEHOLDER</h2>
<div class="hero-unit">
<h1>Marketing stuff!</h1>
<br />
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. <br />Fusce dapibus, tellus ac cursus commodo, tortor mauris<br /> condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<br />
<br />
Get Started
</div>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
</div>
<!--Right Sidebar-->
<div class="span3" id="right-sidebar">
</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.