This question already has answers here:
Five equal columns in twitter bootstrap
(47 answers)
Bootstrap - 5 column layout
(20 answers)
Closed 1 year ago.
I would like to put 5 columns next to each other in a .row div.
If i delete the col-sm-6 col-md-3 classes from the divs, and just give a simple .col class, nothing happens also.
I show you a photo of my source code.
If i put a .clearfix div after every 5. col div, why doesnt it works?
echo '<div class="row">';
$otodik = "";
include_once("files/show_products.php");
echo '</div>';
In a while loop:
<?php while($item = mysqli_fetch_assoc($get_items)){ if($otodik%5 == 0) { echo '<div class="clearfix"></div>'; } ?>
<div class="col-sm-6 col-md-3 text-center mb-5">
<a href="<?php echo $host; ?>/webshop/<?php echo $seolink_kat ."/". html($item['termek_seo']); ?>" class="" title="<?php echo html($item['termek_nev']); ?>">
<img data-src="https://gras.hu/images/item/<?php echo html($item['termek_thumb']).t2(); ?>" alt="<?php echo html($item['termek_nev']); ?>" class="img-fluid main_product_thumb lazyload">
</a>
<h2 class="main_item_title">
<?php echo html($item['termek_nev']); ?>
</h2>
</div>
<?php $otodik++; } ?>
<div class="clearfix"></div>
Its much simpler with bootstrap 4 as grid system now supports flexbox. You just need to add class col to every column in a row.
<div class="container">
<div class="row">
<div class="col mx-1">1</div>
<div class="col mx-1">2</div>
<div class="col mx-1">3</div>
<div class="col mx-1">4</div>
<div class="col mx-1">5</div>
</div>
</div>
Related
Why is my code displaying multiple rows instead of 1?
I can upload any number of photos to my site, but it only displays 4 photos across, the 4 most recently uploaded, on the website. I want it to display 4 rows of photos, instead of 1 row.
<div class="profile_box_body">
<?php
if(!empty($RecentPhotos)){
?>
<div class="profile_photos_list row">
<?php
foreach($RecentPhotos as $value){ ?>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 media_item block-center">
<div class="profile_photo ">
<!--<a href="javascript:void();" class="clickable" data-toggle="modal" data-target="#myModal">-->
<a href="<?=WATERMARK_FILE!=''?DisplayImageWithWatermark($value):DB_DOMAIN.'uploads/images/'. $value['bigimage']; ?>" data-fancybox="gallery<?php echo $value["aid"] ?>" >
<div class="img-container-large">
<div class="img-responsive-container img-responsive-container--border">
<img src="<?=$value['image']; ?>" class="pImageBorder img-responsive-container__img">
</div>
</div>
<div class="pImageUsername"><b><?=$value['title']; ?></b><br/><?=$value['description']; ?></div>
</a>
</div>
</div>
<?php
}
?>
</div>
<?php
}
else {
?>
<a class="" style="float: none; text-align: center" href='<?=getThePermalink('account/&dll=gallery')?>'><p> <?=$lang_register_page['a14'] ?></p></a>
<?php
}
?>
</div>
This is not a problem with your HTML or CSS. The problem is into your PHP query. You should check first that, is there a limit = 1 called into your query?
EDIT: I realized I was putting dots in front of classes. Please stop downvoting.
I'm trying to create columns in my search results. I want the results to appear in columns of 3.
This is my code:
<div class=".container">
<div class=".row">
<div class=".col-xs-3">
<h2><?php the_title(); ?></h2>
<?php
if ( has_post_thumbnail() ) {
echo '<p>';
the_post_thumbnail("small");
echo '</p>';
}
?>
<p><br /><?php the_excerpt(); ?><p>
</div>
</div>
</div>
Nothing happening.
Classes found at: http://tomasjanecek.cz/en/clanky/post/list-of-bootstrap-3-css-classes-with-description
CSS class selectors begin with a . character.
HTML class names do not (well, they can, but it is more trouble than it is worth and the Bootstrap CSS doesn't expect them to).
<div class="container">
<div class="row">
<div class="col-xs-3">
Don't use . character inside HTML tags classes
Try this code:
<div class="container">
<div class="row">
<div class="col-xs-3">
<h2><?php the_title(); ?></h2>
<?php
if ( has_post_thumbnail() ) {
echo '<p>';
the_post_thumbnail("small");
echo '</p>';
}
?>
<p><br /><?php the_excerpt(); ?><p>
</div>
</div>
This is how my code looks like. I removed some parts. So, don't worry if you see some syntax error or something like that.
<?php for($i = 0; $i < $num; $i++){ ?>
<div id="my-ads-block">
<div id="my-ads-name">
<?php echo $title[$i]; ?>
</div>
<div id="my-ads-content">
<div id="my-ads-picture">
<a href="<?php echo $picture[$i] ?>">
<img src="/<?php echo $picture[$i] ?>">
</a>
</div>
<div id="my-ads-menu">
<div class="my-ads-buttons"><span>Posted Date: </span><?php echo date_format($date[$i],"F j, Y") ?></div>
<div class="my-ads-buttons"><span>Price: </span><?php setlocale(LC_MONETARY, 'en_CA'); echo money_format('$%!i', $price[$i]); ?></div>
<div class="my-ads-buttons">Edit This Ad</div>
<div class="my-ads-buttons">Delete This Ad</div>
<div class="my-ads-buttons">Open This Ad</div>
</div>
</div>
</div>
<?php } ?>
This is the css
#my-ads-block{
width: 250px;
margin-right: 7px;
float: left;
}
#my-ads-block:nth-child(3n){
margin-right: 0;
}
I print small boxes which contains some informations and one page can have 3 boxes next to each other. So, I would like to explain with some examples.
The code above, should print columns like this
1 2 3
4 5 6
7 8 9
But the problem is, it prints like this:
1 2 3
4 5 6
7
8 9 10
So, after 6th element, something goes wrong and I cannot figure out why. Thank you for your help.
I really hope there is an easy fix for this. Basically on full screen I want two months to show in a colum, on smaller devices it shifts to 1 column (i am using .col-md-6 for this), with 3 rows total showing 6 months. This works if each div is the same size. The issue arrises when there is a month with less "blocks of days"
see here: https://www.dropbox.com/s/1rrryqzzppql858/months.png?dl=0
is there some sort of vertical-align css that can be used in bootstrap to fix this???
Here is my code:
<?php
$date = date_create("2015-01-01");
$date_end = date_create("2015-07-01");
while ($date < $date_end):?>
<div class="col-md-6 month_border">
<?php echo "<h2>".date_format($date,'F')."<small>".date_format($date,'Y')."</small></h2>"; ?>
<div class="row">
<?php
//date_format($date,'w') Day of week: 0 = Sunday
//date_format($date,'t') Number of days in current month
$weekday = date_format($date,'w');
$total_days = date_format($date,'t');
$days28 = 0;
if ($total_days == 28) {$days28 = 1;}
for ($day_block = 0 - $weekday + 1; $day_block <= $total_days + $days28; $day_block ++):?>
<?php if($day_block > 0 AND $day_block <= $total_days):?>
<div class="col-7split day_block" id="day_block-<?php echo date_format($date,'n')."-".$day_block; ?> "
data-toggle="modal" data-target="#myModal" data-whatever="#mdo">
<div class="row border bg-info">
<?php echo $day_block; ?>
</div>
<div class="row border">
<div class="col-sm-6 shift_text">
<?php if($day_block != 3) { echo "N"; } ?>
</div>
<div class="col-sm-6 compliment_text nopadding hidden-print">
</div>
</div>
<?php else:?>
<div class="col-7split day_block">
<?php endif; ?>
</div>
<?php endfor; ?>
</div>
</div>
<?php date_modify($date,"+1 months"); endwhile; ?>
I'm running a query that outputs a span4 element in a row-fluid. I added code in my css to remove the margin-left on the third span4 in a row-fluid. This has also worked so far, but suddenly the one of the span4 jumps a line. Any suggestions why this suddenly stopped working?
You can see the page here:
http://dtm-auto.ch/home/
My css:
.row-fluid [class*="span"]:nth-child(3n+1) {
margin-left: 0!important;
}
My code:
<div id="content" class="clearfix row-fluid">
<div id="main" class="span12 clearfix" role="main">
<h2 class="text-left">Neue Fahrzeuge</h2>
<div class="clearfix row-fluid">
<?php
global $wp_query;
query_posts( array(
'post_type' => 'acme_product',
'posts_per_page' => 6
));
while ( $wp_query->have_posts() ) :
$wp_query->the_post();
?><?php $url = wp_get_attachment_url( get_post_thumbnail_id($post->ID) );?>
<div id="front-new-video" class="span4">
<h3 id="car-title"><?php the_title(); ?></h3>
<div class="thumbnail wrapper">
<div class="ribbon-wrapper-green"><div class="ribbon-green">Neu</div></div>
<?php the_post_thumbnail('medium');?>
<p>Preis: <span style="color:#FEF158"><?php the_field('preis'); ?> CHF</span></p>
<p>Jahr: <span style="color:#FEF158"><?php the_field('jahr'); ?></span></p>
<p>Farbe: <span style="color:#FEF158"><?php the_field('farbe'); ?></span></p>
<p>KM: <span style="color:#FEF158"><?php the_field('km'); ?> KM</span></p>
<h4> <i class="icon-chevron-sign-right"></i> Zum Fahrzeug </h4>
</div>
</div>
<?php
endwhile;
?>
</div>
</div> <!-- end #main -->
</div> <!-- end #content -->
It's because you're using height: 100% on #front-new-video which doesn't really do anything because the parents height(row-fluid) needs to be defiend for height: 100% to work.
Use a fixed height or min-height instead and your problem will be solved. e.g height: 419px;