I am generating Bootstrap columns with a PHP for loop(from a repeater field in ACF for Wordpress). I need to find a way to center a row of columns when the columns within the row don't add up to 12. I saw some other questions regarding this issue, but most involved manually adding a different class to the uneven row. Hoping to avoid that solution since I am generating these columns with a for loop.
Here's an example of the outputted HTML:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-sm-3">
Lorem
</div>
<div class="col-sm-3">
Lorem
</div>
<div class="col-sm-3">
Lorem
</div>
<div class="col-sm-3">
Lorem
</div>
<div class="col-sm-3">
Lorem
</div>
<div class="col-sm-3">
Lorem
</div>
<div class="col-sm-3">
Lorem
</div>
</div>
</div>
So in this example, I would want the 3 last col-sm-3 elements to be centered below the 4 above them.
I recommend you to use Bootstrap 4. In this case, you can simply add the justify-content-center class to your row.
Heres the working snippet. (probably you won't see, cz you are using sm)
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
<div class="row justify-content-center">
<div class="col-sm-3">
Lorem
</div>
<div class="col-sm-3">
Lorem
</div>
<div class="col-sm-3">
Lorem
</div>
<div class="col-sm-3">
Lorem
</div>
<div class="col-sm-3">
Lorem
</div>
<div class="col-sm-3">
Lorem
</div>
<div class="col-sm-3">
Lorem
</div>
</div>
</div>
Related
I want to dynamically the following code written by Bootstrap 4 using the WordPress loop.
I want show the 5 last posts in the following code. like as the picture:
https://i.stack.imgur.com/n4fYa.jpg
<div class="container">
<div class="row">
<div class="col-md-6 d-flex align-items-md-stretch">
<div class="jumbotron ">
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-6">
<div class="jumbotron">
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs
</div>
</div>
<div class="col-md-6">
<div class="jumbotron">
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs
</div>
</div>
<div class="col-md-6">
<div class="jumbotron">
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs
</div>
</div>
<div class="col-md-6">
<div class="jumbotron">
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs
</div>
</div>
</div>
</div>
</div>
</div>
You could try:
<?php $posts = get_posts(array('posts_per_page' => 5)); ?>
<div class="container">
<div class="row">
<div class="col-md-6 d-flex align-items-md-stretch">
<div class="jumbotron">
<!-- Post 5 -->
<?php echo $posts[4]->post_title; ?>
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-6">
<div class="jumbotron">
<!-- Post 2 -->
<?php echo $posts[1]->post_title; ?>
</div>
</div>
<div class="col-md-6">
<div class="jumbotron">
<!-- Post 1 -->
<?php echo $posts[0]->post_title; ?>
</div>
</div>
<div class="col-md-6">
<div class="jumbotron">
<!-- Post 4 -->
<?php echo $posts[3]->post_title; ?>
</div>
</div>
<div class="col-md-6">
<div class="jumbotron">
<!-- Post 3 -->
<?php echo $posts[2]->post_title; ?>
</div>
</div>
</div>
</div>
</div>
</div>
Using Bootstrap 4 Grid system, I have the following structure:
https://i.imgur.com/Qa0xXAk.png
I have the content column and two blank columns inside each row.
Sometimes I need to apply CSS style to the whole row.
<div class="container">
<div class="row">
<div class="col-sm-3"></div>
<div class="col-sm-6">
Lorem ipsum
</div>
<div class="col-sm-3"></div>
</div>
<div class="row">
<div class="col-sm-3"></div>
<div class="col-sm-6">
dolor sit amet,
</div>
<div class="col-sm-3"></div>
</div>
....
<div class="row custom-background-color">
<div class="col-sm-3"></div>
<div class="col-sm-6">
consecteur adipiscing elit,
</div>
<div class="col-sm-3"></div>
</div>
</div>
But in the same time it becomes not handy to have multiple duplicate code. I want to regroup the code, to have column definition only once.
<div class="container">
<div class="row">
<div class="col-sm-3"></div>
<div class="col-sm-6">
<div class="row">Lorem ipsum</div>
<div class="row">dolor sit amet,</div>
...
<div class="row custom-background-color">consecteur adipiscing elit,</div>
</div>
<div class="col-sm-3"></div>
</div>
</div>
I expect to have the CSS style not for one column, but for the whole page width.
Is it possible to make a workaround or find solution to solve the problem?
Yes it is possible if you have the same amount of rows in each column.
Then, you can use the nth-child selector to pass styles to e.G. the fifth row in each column.
div[class^="col"] .row:nth-child(2) {
background: green;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-sm-3">
<div class="row">ipsum</div>
<div class="row"> amet,</div>
<div class="row"> elit,</div>
</div>
<div class="col-sm-6">
<div class="row">Lorem ipsum</div>
<div class="row">dolor sit amet,</div>
<div class="row">consecteur adipiscing elit,</div>
</div>
<div class="col-sm-3">
<div class="row">Lorem ipsum</div>
<div class="row">dolor</div>
<div class="row">consecteur</div></div>
</div>
</div>
I have a bit trouble with using row.
I have this:
<div class="row">
<div class="large-2 medium-12 small-12 columns">
<div class="callout">
<p>
Lorem Ipsum
</p>
</div>
</div>
<div class="large-8 medium-12 small-12 columns">
<div class="callout">
<p>
Lorem Ipsum
</p>
</div>
</div>
<div class="large-2 medium-12 small-12 columns">
<div class="callout">
<p>
Lorem Ipsum
</p>
</div>
</div>
</div>
But I get every Lorem ipsum under each other, not beside. How can I resolve this?
I suspect you might have been using mark-up suitable for either the legacy 'float' or 'flex' grid system whilst Foundation 6's default enabled is 'XY grid'. Thus, the mark-up is different and would cause your columns to stack.
Float/flex grid mark-up
<div class="row">
<div class="large-2 medium-12 small-12 columns">
<div class="callout">
<p>
Lorem Ipsum
</p>
</div>
</div>
<div class="large-8 medium-12 small-12 columns">
<div class="callout">
<p>
Lorem Ipsum
</p>
</div>
</div>
<div class="large-2 medium-12 small-12 columns">
<div class="callout">
<p>
Lorem Ipsum
</p>
</div>
</div>
</div>
You can continue to to use 'float' or 'flex' grids but need to specify which you're using in the project. Or, if you want to use the newer 'XY grid', you can modify your mark-up like so.
XY grid mark-up
<div class="grid-x grid-margin-x">
<div class="cell large-2 medium-12 small-12">
<div class="callout">
<p>
Lorem Ipsum
</p>
</div>
</div>
<div class="cell large-8 medium-12 small-12">
<div class="callout">
<p>
Lorem Ipsum
</p>
</div>
</div>
<div class="cell large-2 medium-12 small-12">
<div class="callout">
<p>
Lorem Ipsum
</p>
</div>
</div>
</div>
I'm working on amending a HTML5 template. The default setup of the Bootstrap parameters were:
col-sm-12 col-md-4 col-lg-4
col-sm-12 col-md-8 col-lg-8
This meant that the latin text took up 20% of screen width and pics 80%, but I want it the other way round... Text taking up 80% width, photo 20%.
Can someone please advise what the bootstrap parameters need to be for this for responsive to work? I've tried loads of options but can't get it right!
Is this possible or do I need to revise CSS?
Thanks
Full code below:
<section id="ourteam" class="wow fadeInUp">
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-4 col-lg-4">
<h2>Meet our Team</h2>
<div class="ourteamd">
<p>Lorem ipsum dolor sit eros. Pellentesque nec vulpe eros.</p>
</div>
</div>
<div class="col-sm-12 col-md-8 col-lg-8">
<div class="responsive">
<div>
<div class="third-effect">
<img src="http://www.placehold.it/384x444" class="img-responsive" alt="Our Team">
<div class="mask">
Facebook
Twitter
</div>
</div>
Just switch the size value of both columns, 4 becomes 8, and 8 becomes 4.
Try with below code.
<div class="row">
<div class="col-sm-12 col-md-8 col-lg-8">
<h2>Meet our Team</h2>
<div class="ourteamd">
<p>Lorem ipsum dolor sit eros. Pellentesque nec vulpe eros.</p>
</div>
</div>
<div class="col-sm-12 col-md-4 col-lg-4">
<div class="responsive">
<div class="third-effect">
<img src="http://www.placehold.it/384x444" class="img-responsive" alt="Our Team">
<div class="mask">
Facebook
Twitter
</div>
</div>
</div>
</div>
I am looking to create a page in my Joomla Template where I will have 2 columns that will take up 50% of the page showing an image and text underneath. My code is shown below:
<div id="services" class="span12">
<div id="services-img-new" class="span6"></div>
<div id="services-img-new" class="span6"></div>
</div>
<div id="services" class="span12">
<div id="services-text" class="span6">
<h4>Heading 1</h4>
<p>Lorem ipsum dolor</p>
</div>
<div id="services-text" class="span6">
<h4>Heading 2</h4>
<p>Lorem ipsum dolor</p>
</div>
</div>
The problem I have is that if the screen size is reduced then this doesnt show the correct text under the right image and from my code i can see this is obviously because i have grouped the 2 images together and the text together.
How am i able to group the image and text together as one?
If somebody could please advise, would really appreciate it.
Btw I am currently using Joomla 3.5.1 and Twitter Bootstrap 2.3.2 hence not using the col classes as it is in Bootstrap 3.
Ok, so if I understand correctly your looking for something like this:
<div id="services" class="span6">
<div id="services-img-new" class="span12"></div>
<div id="services-text" class="span12">
<h4>Heading 1</h4>
<p>Lorem ipsum dolor</p>
</div>
</div>
<div id="services" class="span6">
<div id="services-img-new" class="span12"></div>
<div id="services-text" class="span">
<h4>Heading 2</h4>
<p>Lorem ipsum dolor</p>
</div>
</div>
Link to jsbin example