<div class="parent">
<div class="child">
</div>
<div class="child">
</div>
<div class="child">
</div>
<div class="child">
</div>
<div class="child">
</div>
</div>
The height of the child class is 20% and the width 200px.
What I'm wondering is how to make it so that when I have, for example, 20 parent divs it is set up so that they are all displayed horizontally, beyond the width of the page, so that I have to scroll left or right to view the data. At the moment it fills the width of the page and starts the next parent div underneath the first one so that I have to scroll vertically and I can't fathom how to rectify this problem.
Thanks in advance.
To do this you need to create a parent container, and then assign a overflow-x: scroll css rule to it. You will also need to assign a display: inline-block rule to your parent class. You also need to apply white-space: nowrap;.
DEMO http://jsfiddle.net/qujyunn4/
.wrapper {
overflow-x: scroll;
white-space: nowrap;
}
.parent {
display: inline-block;
width: 200px;
height: 300px;
border: red solid thin;
margin-right: 5px;
white-space: nowrap;
}
<div class="wrapper">
<div class="parent">
<div class="child">
</div>
<div class="child">
</div>
<div class="child">
</div>
<div class="child">
</div>
<div class="child">
</div>
</div>
<div class="parent">
<div class="child">
</div>
<div class="child">
</div>
<div class="child">
</div>
<div class="child">
</div>
<div class="child">
</div>
</div>
<div class="parent">
<div class="child">
</div>
<div class="child">
</div>
<div class="child">
</div>
<div class="child">
</div>
<div class="child">
</div>
</div>
<div class="parent">
<div class="child">
</div>
<div class="child">
</div>
<div class="child">
</div>
<div class="child">
</div>
<div class="child">
</div>
</div>
</div>
Related
I used the for loop to get the data dynamically from the database and displayed ,Now I have to display those cards in different colors using Php No javascript is needed
<div class="row gutter-xs">
<?php
foreach($dispcnt as $object)
{
?><div class="col-xs-3 col-md-3">
<div class="card bg-info"> // card
<div class="card-values">
<div class="p-x">
<small><?php echo $object->qa;?> </small>
<h3 class="card-title-l"><?php echo $object->cnt;?> Counts</h3>
</div>
</div>
</div>
</div> // code of card ends here
<?php }?>
</div>
I want to change the color of the cards in PHP
I am excepting the cards to look like this
Solution A with CSS only
Actually, you don't need any PHP to do that, you could do it only with some CSS rules with the help of the :nth-child() selector.
Here's a little snippet for demo if you have 4 colors always repeating:
.container {
display: flex;
flex-wrap: wrap;
}
.card {
width: 10em;
height: 4em;
margin: .5em;
padding: .5em;
color: white;
background: #0298cf;
}
.card:nth-child(4n + 1) {
background: #0298cf;
}
.card:nth-child(4n + 2) {
background: #9b479f;
}
.card:nth-child(4n + 3) {
background: #4e484e;
}
.card:nth-child(4n + 4) {
background: #f70d1a;
}
<div class="container">
<div class="card bg-info">
<div class="card-values">
<div class="p-x">
<small>Small 1</small>
<h3>1 Counts</h3>
</div>
</div>
</div>
<div class="card bg-info">
<div class="card-values">
<div class="p-x">
<small>Small 2</small>
<h3>2 Counts</h3>
</div>
</div>
</div>
<div class="card bg-info">
<div class="card-values">
<div class="p-x">
<small>Small 3</small>
<h3>3 Counts</h3>
</div>
</div>
</div>
<div class="card bg-info">
<div class="card-values">
<div class="p-x">
<small>Small 4</small>
<h3>4 Counts</h3>
</div>
</div>
</div>
<div class="card bg-info">
<div class="card-values">
<div class="p-x">
<small>Small 5</small>
<h3>5 Counts</h3>
</div>
</div>
</div>
<div class="card bg-info">
<div class="card-values">
<div class="p-x">
<small>Small 6</small>
<h3>6 Counts</h3>
</div>
</div>
</div>
<div class="card bg-info">
<div class="card-values">
<div class="p-x">
<small>Small 7</small>
<h3>7 Counts</h3>
</div>
</div>
</div>
<div class="card bg-info">
<div class="card-values">
<div class="p-x">
<small>Small 8</small>
<h3>8 Counts</h3>
</div>
</div>
</div>
<div class="card bg-info">
<div class="card-values">
<div class="p-x">
<small>Small 9</small>
<h3>9 Counts</h3>
</div>
</div>
</div>
</div>
If you want 6 colors then you would replace 4n by 6n and add the 2 other colors.
In your case, you'll have to put it on the first <div> which is in the loop, so the div directly child of the row:
.row > :nth-child(4n + 1) {
background: #0298cf;
}
.row > :nth-child(4n + 2) {
background: #9b479f;
}
.row > :nth-child(4n + 3) {
background: #4e484e;
}
.row > :nth-child(4n + 4) {
background: #f70d1a;
}
Solution B with PHP to generate a CSS class
By the way, your PHP should be in lowercase. You could also print a color class and increment it like this:
<div class="row gutter-XS">
<?php
$color = 1;
foreach ($dispcnt as $object) {
$color_class = "bg-color-$color";
if ($color < 4) {
$color++;
} else {
$color = 1;
}
?>
<div class="col-xs-3 col-md-3">
<div class="card <?php echo $color_class; ?>">
<div class="card-values">
<div class="p-x">
<small><?php echo $object->QA; ?></small>
<h3 class="card-title-l"><?php echo $object->CNT; ?> Counts</h3>
</div>
</div>
</div>
</div>
<?php } ?>
</div>
You'll then have the possibility to have CSS rules such as:
.card.bg-color-1 {
background: #0298cf;
}
.card.bg-color-2 {
background: #9b479f;
}
.card.bg-color-3 {
background: #4e484e;
}
.card.bg-color-4 {
background: #f70d1a;
}
Here is a PHP-only solution. Just set an array with the desired colors and use modulo to cycle through them as you iterate over the cards. Put a style attribute on the card to set the background color.
<div class="row gutter-XS">
<?php
$colors = [
'#0298cf',
'#9b479f',
'#4e484e',
'#f70d1a',
];
$count = count($colors);
$i = 0; // increment this counter at the end of the foreach loop
foreach ($dispcnt as $object)
{
?><div class="col-xs-3 col-md-3">
<div class="card BG-info" style="background:<?php echo $colors[($i % $count)]; ?>"> <!-- card -->
<div class="card-values">
<div class="p-x">
<small><?php echo $object->QA;?> </small>
<h3 class="card-title-l"><?php echo $object->CNT;?> Counts</h3>
</div>
</div>
</div>
</div> <!-- code of card ends here -->
<?php $i++;}?>
</div>
When i am listing products i want them to have fixed height according to its step by step div's max height. For example below there is a screenshot from amazon that has what i want. All 4 elements' height are same.
and i'm using the code below to list products
<div class="shop-product-wrap">
<div class="row row-8">
<?php foreach ($products as $product): ?>
<div class="product-col col-lg-3 col-md-4 col-sm-6">
<!-- Single Product Start -->
<div class="single-product-wrap mt-10">
<div class="product-image">
<a href="<?= $product['url'] ?>"><img class="lazy"
src="<?= public_url('images/other/thumbnail.jpg') ?>"
data-src="<?= image_url($product['image_small']) ?>"
alt=""></a>
</div>
<div class="product-button">
<a onclick="wishlist.add(<?= $product['product_id'] ?>)"
class="add-to-wishlist">
<i class="icon-heart"></i></a>
</div>
<div class="product-content">
<h6 class="product-name"><?= $product['product_name'] ?>
</h6>
<div class="starts-icon-box">
<i class="stars-icon"></i>
</div>
<div class="price-box">
<div class="single-product-discount-and-price">
<?php if ($product['product_discount_price']): ?>
<span class="onsale"><?= (100 - (round(($product['product_price'] * 100) / $product['product_discount_price']))) . '%' ?></span>
<?php endif; ?>
<div class="old-and-new-price">
<span class="old-price"><?= $product['product_discount_price'] ?> TL</span>
<span class="new-price"><?= number_format($product['product_price'], 2) ?> TL</span>
</div>
</div>
</div>
<div class="product-button-action">
<a onclick="cart.add(<?= $product['product_id'] ?>,1)"
class="add-to-cart">Add to cart</a>
</div>
</div>
</div>
<!-- Single Product End -->
</div>
<?php endforeach; ?>
</div>
</div>
and when i listing products they all take the height they can according to their content such as its name and so that they don't have the same height. How can i make them have same height step-by-step.
Sorry for my bad english.
You have to use div tag with same class name for every product item and add a parent div like this...
<div class="parent">
<div class="child">Item 1</div>
<div class="child">Item 2</div>
<div class="child">Item 3</div>
<div class="child">Item 4</div>
</div>
Then use flex box for parent and child element...
.parent{
display: flex;
flex-wrap: wrap;
align-content: stretch;
height: 600px; /*or something*/
}
.child{
background-color: #f1f1f1;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
Please visit those links for more information about flex box...
https://www.w3schools.com/css/css3_flexbox.asp
https://www.w3schools.com/css/tryit.asp?filename=trycss3_flexbox_align-content_stretch
Home.php(file in controller)
<?php
class Home extends CI_Controller {
public function index() {
$this->load->helper('url');
//display home page
$this->load->view('home.html');
}
}
?>
home.html(file in view page)
<!DOCTYPE html>
<html lang="en">
<head>
<title>PortFolio Website</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
/* Remove the navbar's default margin-bottom and rounded borders */
.navbar {
margin-bottom: 0;
border-radius: 0;
}
body, html {
height: 100%;
margin: 0;
}
/* First Container */
.bg {
/* The image used */
background-image: url("1.jpg");
/* Full height */
height: 60%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
#media (max-width: 800px) {
.bg {
height:80%;
}
}
/* Second container */
.bg1 {
background-color: #f77a55;
height:45%;
}
#media (max-width: 800px) {
.bg1 {
height:70%;
}
}
/* Third container */
.bg2 {
height:40%;
}
#media (max-width: 800px) {
.bg2 {
height:100%;
}
}
/* Fourth container */
.bg3 {
background-color: #404040;
height:60%;
}
#media (max-width: 800px) {
.bg3 {
height:190%;
}
}
/* Add a gray background color and some padding to the footer */
footer {
background-color: #404040;
padding: 25px;
}
</style>
</head>
<body>
<!--Navigation Bar-->
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Full-stack Developer</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<!--li class="active">Home</li-->
<li>About Me</li>
<li>Services</li>
<li>Portfolio</li>
<li>Contact</li>
<li>Register</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</div>
</nav>
<!--First Container-->
<div class="bg">
<div class="container text-center">
<br><br><br><br><br><br>
<h1 style="color:White"><strong>Ready For? Engaging Website||</strong></h1>
<h2 style="color:White">Inventive Web design, Development & Android Application!</h2>
</div>
</div>
<!--Second Container-->
<div id="AboutMe" class="bg1">
<div class="container text-center">
<br><br><br>
<h1 style="color:White"><strong>About Me</strong></h1>
<br>
<p style="color:White; font-size: 15px"><b>I'm a Full stack developer providing complete Web solutions to the clients. I have a deep technical knowledge combined with the broad digital media work, website designing and development experience means I can provide you with honest suggestions on what can be delivered with your available resource. My aim is to out perform expectations at every possible chance.</b></p>
</div>
</div>
<!--Third Container-->
<div id="Services" class="bg2">
<div class="container text-center">
<br><br><br>
<h1 style="color:#f77a55"><strong>Services</strong></h1>
</div><br><br><br>
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-6 col-xs-12 col-sm-12 text-center">
<i class="fa fa-4x fa-desktop text-primary mb-3 sr-icons"></i>
<h4 class="mb-3">Responsive Web App Development</h4>
</div>
<div class="col-lg-3 col-md-6 col-xs-12 col-sm-12 text-center">
<i class="fa fa-4x fa-tablet text-primary mb-3 sr-icons"></i>
<h4 class="mb-3">Mobile App Development</h4>
</div>
<div class="col-lg-3 col-md-6 col-xs-12 col-sm-12 text-center">
<i class="fa fa-4x fa-television text-primary mb-3 sr-icons"></i>
<h4 class="mb-3">UI/UX Development</h4>
</div>
<div class="col-lg-3 col-md-6 col-xs-12 col-sm-12 text-center">
<i class="fa fa-4x fa-cloud text-primary mb-3 sr-icons"></i>
<h4 class="mb-3">Hosting & Support service</h4>
</div>
</div>
</div>
</div><br><br><br>
<!--Fourth Container-->
<div id="Portfolio" class="bg3">
<div class="container text-center">
<br><br>
<h1 style="color:#f77a55"><strong>Portfolio</strong></h1>
</div><br><br>
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-6 col-xs-12 col-sm-12 text-center">
<img src="<?php echo base_url('image/5.jpg'); ?>" class="img-responsive img-rounded" alt="image" >
<h4 class="mb-3" style="color:orange">Blue Star Power</h4>
<p style="color:white">Blue Star Power Solutions Private Limited are specialists in Diesel Generator Sales and Service, Annual Maintenance.</p>
</div>
<div class="col-lg-3 col-md-6 col-xs-12 col-sm-12 text-center">
<img src="6.jpg" class="img-responsive img-rounded" alt="image" >
<h4 class="mb-3" style="color:orange">Cavotec Inspired Engineering</h4>
<p style="color:white">Global-Airport Solutions is the global industry’s number one meeting place for Airport Operators/Owners,Managers.</p>
</div>
<div class="col-lg-3 col-md-6 col-xs-12 col-sm-12 text-center">
<img src="10.jpg" class="img-responsive img-rounded" alt="image" >
<h4 class="mb-3" style="color:orange">Gemalto Security Free</h4>
<p style="color:white">You will find our identity authentication and data protection technologies at the heart of modern life, Annual Maintenance.</p>
</div>
<div class="col-lg-3 col-md-6 col-xs-12 col-sm-12 text-center">
<img src="11.jpg" class="img-responsive img-rounded" alt="image" >
<h4 class="mb-3" style="color:orange">Singularity University</h4>
<p style="color:white">Our programs and events equip you with the mindset, tools, and resources to successfully journey to the future. </p>
</div>
</div>
</div>
</div><br><br><br>
<!--fiveth container-->
<div id="Contact" class="container">
<h2 class="container text-center" style="color:orange"><b>Let's Get In Touch!</b></h2>
<p class="container text-center" style="color:orange"><span style="font-size: 18px;">Submit the form and we will get back to you as soon as possible!</span></p><br><br>
<form class="form-horizontal" action="">
<div class="form-group">
<label class="control-label col-sm-2" style="color:red">Name:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="name" placeholder="Enter Name" name="name">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" style="color:red">Email:</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email" placeholder="Enter Email" name="email">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" style="color:red">Contact Number:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="contact_number" placeholder="Enter Contact Number" name="contact_number">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" style="color:red">Subject:</label>
<div class="col-sm-10">
<textarea rows="5" class="form-control" id="subject" placeholder="Enter Reason For Contacting..." name="subject"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-success">Submit</button>
</div>
</div>
</form>
</div><br>
<!--Footer-->
<footer class="container-fluid text-center">
<h4 style="color:white">2018 # Full-Stack Developer</h4>
<p style="color:white">All Rights Reserved</p>
</footer>
</body>
</html>
I have done a simple design with bootstrap, which is working fine in local host but when i try to enter it in my codeignitor folder its not working, i mean to say the images
which are their in the page are not getting displayed when i tried it to open via codeignitor, i have saved all my images in view folder itself, i know this is really
a stupid question.
i tried with this but its not working
<img src="<?php echo base_url('image/5.jpg'); ?>" class="img-responsive img-rounded" alt="image" >
you can't use .html file, because in html file you can't write php code.
helper 'url' must be loaded in autoload.php, either in view page you have to load again helper url.
You should not store images in view folder.
You should check some following step-
1) first fix your project base_url which is set in application/config/config.php
2) create a folder(e.g: image) on application location for save all images. then you can
save any img(e.g:5.jpg) in this folder which you are want.
3) on final step where you want to display image use code like this-
<img src="<?php echo base_url();?>/image/5.jpg">
If your images are in public/images directory and your
Base URL is
(you can check/set your base URL in /application/config/config.php
$config['base_url'] = 'enter your base path here';
)
if your basepath is
www.yoururl.com/
then use path
<img src="<?php echo base_url();?>public/image/5.jpg">
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I am trying to set up a layout to display a fantasy league team, originally I had it with player names in a table view but I want to change that to a graphical representation that looks a bit like a team line up.
Although I can get it similar to what I want I'm not very experienced in writing css, the site is written in PHP so I'm thinking that I will have to have a few styles based on how many players are in a position and then use php to swap these dynamically, unless there is a better way.
My question is how do I go about getting the positions central like I have done with the goal keeper position and get them inline, I am using float: left to get the positions inline but cant get them central with that.
.section-heading{
border-bottom: 1px solid #c8c8c8;
}
.section-heading-text{
text-align: center;
}
.section-content{
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#009b29+0,009b29+20,61bf7a+20,61bf7a+40,009b29+40,009b29+60,61bf7a+60,61bf7a+80,009b29+80 */
background: #009b29; /* Old browsers */
background: -moz-linear-gradient(left, #009b29 0%, #009b29 20%, #61bf7a 20%, #61bf7a 40%, #009b29 40%, #009b29 60%, #61bf7a 60%, #61bf7a 80%, #009b29 80%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #009b29 0%,#009b29 20%,#61bf7a 20%,#61bf7a 40%,#009b29 40%,#009b29 60%,#61bf7a 60%,#61bf7a 80%,#009b29 80%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #009b29 0%,#009b29 20%,#61bf7a 20%,#61bf7a 40%,#009b29 40%,#009b29 60%,#61bf7a 60%,#61bf7a 80%,#009b29 80%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#009b29', endColorstr='#009b29',GradientType=1 ); /* IE6-9 */
padding-left: 30px;
padding-right: 30px;
height: 300px;
}
.gk{
text-align: center;
}
.kit-image{
height: 40px;
width: 35px;
}
.defender{
padding-left: 30px;
padding-right: 30px;
padding-top: 10px;
float: left;
text-align: center;
}
<div class="section-box">
<div class="section-heading">
<h2 class="section-heading-text">Team Name</h2>
</div>
<div class="section-content">
<div class="row">
<div class="col-sm-12">
<div class="gk">
<img src="www.gamingcentury.com/img/keeperKit.png" class="kit-image">
<div>
Goal keeper
</div>
</div>
</div>
</div>
<div class="row">
<div class="defender">
<img src="www.gamingcentury.com/img/outKit.png" class="kit-image">
<div>
Defender
</div>
</div>
<div class="defender">
<img src="www.gamingcentury.com/img/outKit.png" class="kit-image">
<div>
Defender
</div>
</div>
<div class="defender">
<img src="www.gamingcentury.com/img/outKit.png" class="kit-image">
<div>
Defender
</div>
</div>
<div class="defender">
<img src="www.gamingcentury.com/img/outKit.png" class="kit-image">
<div>
Defender
</div>
</div>
</div>
</div>
You can do this just by using bootstrap columns and adding offset to the first one, and then adding to all columns text-align: center attribute.
<div class="row">
<div class="col-sm-12">
<div class="gk">
<img src="www.gamingcentury.com/img/keeperKit.png" class="kit-image">
<div>
Goal keeper
</div>
</div>
</div>
</div>
<div class="row">
<div class="defender col-sm-1 col-sm-offset-4">
<img src="www.gamingcentury.com/img/outKit.png" class="kit-image">
<div>
Defender
</div>
</div>
<div class="defender col-sm-1">
<img src="www.gamingcentury.com/img/outKit.png" class="kit-image">
<div>
Defender
</div>
</div>
<div class="defender col-sm-1">
<img src="www.gamingcentury.com/img/outKit.png" class="kit-image">
<div>
Defender
</div>
</div>
<div class="defender col-sm-1">
<img src="www.gamingcentury.com/img/outKit.png" class="kit-image">
<div>
Defender
</div>
</div>
</div>
And in css:
.defender{
text-align: center;
}
This is my solution proposal, that provides the creation of col-centered and row-centered css classes, and apply them as follows:
css:
.row-centered {
text-align:center;
}
.col-centered {
display:inline-block;
float:none;
}
html:
<div class="section-box">
<div class="section-heading">
<h2 class="section-heading-text">Team Name</h2>
</div>
<div class="section-content">
<div class="row">
<div class="col-sm-12">
<div class="gk">
<img src="www.gamingcentury.com/img/keeperKit.png" class="kit-image">
<div>
Goal keeper
</div>
</div>
</div>
</div>
<div class="row row-centered">
<div class="defender col-centered">
<img src="www.gamingcentury.com/img/outKit.png" class="kit-image">
<div>
Defender
</div>
</div>
<div class="defender col-centered">
<img src="www.gamingcentury.com/img/outKit.png" class="kit-image">
<div>
Defender
</div>
</div>
<div class="defender col-centered">
<img src="www.gamingcentury.com/img/outKit.png" class="kit-image">
<div>
Defender
</div>
</div>
<div class="defender col-centered">
<img src="www.gamingcentury.com/img/outKit.png" class="kit-image">
<div>
Defender
</div>
</div>
</div>
</div>
Currently I have three col-md-4 columns displaying an image in each. If a user only has say 1 or 2 images uploaded it will float the content left as normal but leave the third with wasted space.
Is it possible with CSS to centre the 1-2 columns until a 3rd has been added?
<div class="container>
<div class="row">
<div class="col-md-4 image-1">
<img>
</div>
<div class="col-md-4 image-2">
<img>
</div>
<div class="col-md-4 image-3">
<img>
</div>
</div>
</div>
I think you should not mix left-aligned items (when 3 or more) with center aligned items. What happens when a group of 2 items follows a group of 4 or 5?
If you want them all centered, just add a custom class (.centerRows in my case) to the container and use the CSS below:
.centerRows>.row {
text-align: center;
}
.centerRows>.row>[class^="col-"] {
text-align: initial;
float: none;
margin: 0 auto;
display: inline-block;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div class="container centerRows">
<div class="row">
<div class="col-md-4 image-1">
<img src="http://placehold.it/350x150">
</div>
<div class="col-md-4 image-2">
<img src="http://placehold.it/350x150">
</div>
</div>
<div class="row">
<div class="col-md-4 image-1">
<img src="http://placehold.it/350x150">
</div>
<div class="col-md-4 image-2">
<img src="http://placehold.it/350x150">
</div>
<div class="col-md-4 image-3">
<img src="http://placehold.it/350x150">
</div>
</div>
<div class="row">
<div class="col-md-4 image-1">
<img src="http://placehold.it/350x150">
</div>
<div class="col-md-4 image-1">
<img src="http://placehold.it/350x150">
</div>
<div class="col-md-4 image-2">
<img src="http://placehold.it/350x150">
</div>
<div class="col-md-4 image-3">
<img src="http://placehold.it/350x150">
</div>
</div>
<div class="row">
<div class="col-md-4 image-1">
<img src="http://placehold.it/350x150">
</div>
<div class="col-md-4 image-2">
<img src="http://placehold.it/350x150">
</div>
</div>
</div>
If you only want to center the rows with 2 or less children, add a custom class to the rows you want centered, after counting their children via js. Proof of concept:
$('.container>.row').each(function(){
if($(this).children().size() < 3) $(this).addClass('centerMe');
})
.centerMe {
text-align: center;
}
.centerMe>[class^="col-"] {
text-align: initial;
float: none;
margin: 0 auto;
display: inline-block;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-4 image-1">
<img src="http://placehold.it/350x150">
</div>
<div class="col-md-4 image-2">
<img src="http://placehold.it/350x150">
</div>
</div>
<div class="row">
<div class="col-md-4 image-1">
<img src="http://placehold.it/350x150">
</div>
<div class="col-md-4 image-2">
<img src="http://placehold.it/350x150">
</div>
<div class="col-md-4 image-3">
<img src="http://placehold.it/350x150">
</div>
</div>
<div class="row">
<div class="col-md-4 image-1">
<img src="http://placehold.it/350x150">
</div>
<div class="col-md-4 image-1">
<img src="http://placehold.it/350x150">
</div>
<div class="col-md-4 image-2">
<img src="http://placehold.it/350x150">
</div>
<div class="col-md-4 image-3">
<img src="http://placehold.it/350x150">
</div>
</div>
<div class="row">
<div class="col-md-4 image-1">
<img src="http://placehold.it/350x150">
</div>
<div class="col-md-4 image-2">
<img src="http://placehold.it/350x150">
</div>
</div>
</div>
IMHO you can't do this with css. It can be done
using JS. Something like this:
if($('.image-3').length === 0){
$('.row').find('div').RemoveClass('col-md-4');
$('.row').find('div').AddClass('col-md-6');
}
But if you'll add more statement to the algorithm, i mean
"if it will be only one div, or only 4(with one on next row)"
you'll have to get more complicated code.