I'm Struggling adjusting my articles here :
https://cryptoranger.net/news
I'm using bootstrap 4.3.0, here's the code of the rows :
<div class="row bg-light">
<?php
foreach ($newsList as $news){?>
<article class="col-md-4 blogpost border rounded p-0">
<div class="imgBx">
<img src="/images/<?=$news['image'] ?>" alt="" class="img-fluid">
</div>
<div class="content">
<h2 class="itemrecent1"><?= $news['titre'] ?></h2>
<p class="float-left m-0"><i class="fas fa-clock"></i> <?= $news['dateAjout']->format('Y-m-d') ?></p><br>
<p class="itemrecent1"><?= nl2br($news['contenu']) ?></p>
<?php
if ($category === 'news'){?>
<div class="itemrecent1">Read</div>
<?php
}else {?>
<div class="itemrecent1 justify-self-end">Read</div>
<?php
}?>
<div class="clearfix"></div>
</div>
</article>
<?php } ?> <!-- End of news -->
</div>
So i want gutters between my articles...
Besides, if you know how to adjust the content (text inside the box because i tried some flexbox css but nothing is changing (i want at least all Read link at the same level (bottom))...
==> It's working if i put some height in pixel but cant do that because i need responsive design..
Thanks... :D
The gutters are there, they come from the padding on the col-* classes. Because you added the border class to your articles the padding is, naturally, surrounded by a border. Usually when using Bootstrap grid layouts, content is placed within a wrapper element that has the desired col-* class:
<div class="row bg-light">
<?php
foreach ($newsList as $news){?>
<div class="col-md-4">
<article class="blogpost border rounded p-0">
<div class="imgBx">
<img src="/images/<?=$news['image'] ?>" alt="" class="img-fluid">
</div>
<div class="content">
<h2 class="itemrecent1"><?= $news['titre'] ?></h2>
<p class="float-left m-0"><i class="fas fa-clock"></i> <?= $news['dateAjout']->format('Y-m-d') ?></p><br>
<p class="itemrecent1"><?= nl2br($news['contenu']) ?></p>
<?php
if ($category === 'news'){?>
<div class="itemrecent1">Read</div>
<?php
}else {?>
<div class="itemrecent1 justify-self-end">Read</div>
<?php
}?>
<div class="clearfix"></div>
</div>
</article>
</div>
<?php } ?> <!-- End of news -->
</div>
Looks like you actually have it correct on another page on your site
Related
I have two divs [one is upper | second is lower]. Both can fetch data from database and make accordingly number of divs. lower div is default hidden. I want to show lower div when I click upper div. jquery code that i make is here. Need your help.
Note. Show only current active lower div. All other lower divs must hidden. to do this
<!---upper div section--->
<?php
$id=1;
while ($comp_post_info=mysqli_fetch_array($query))
{
?>
<div class="container-fluid">
<div class="row">
<div class="upperdiv container-fluid mb-5">
<div class="row">
<div class="col-md-1 pdl-3">
<i class="fa fa-circle"></i>
</div>
<div class="col-md-11">
<div class="container-fluid">
<div class="row jlist" id="addbg">
<div class="col-md-4">
<img src="/my_brands/brand.png" alt="" class="cust-em">
<h6><?php echo $comp_post_info['title'] ?> <p><small><?php echo $comp_post_info['c_name'] ?></small></p></h6>
</div>
<div class="col-md-4">
<h6>
<?php echo $comp_post_info['state'] ?>,<?php echo $comp_post_info['coun'] ?>
<p><small>Location</small></p>
</h6>
</div>
<div class="col-md-4">
<h6>
<?php echo $comp_post_info['saly'] ?>
<p><small> Saly</small></p>
</h6>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!----lowerdiv--->
<div class="lowerdiv container-fluid hideme" id="mydiv" >
<div class="row pt-4 padl-5">
<h6>Other Prepositions <small>for gle</small></h6>
</div>
<div class="row">
<div class="col-md-11 offset-md-1">
<div class="container-fluid">
<div class="row sub_lowerdiv pt-2">
<div class="col-md-4">
<i class="fa fa-circle"></i>
<h6><?php echo $comp_post_info['title'] ?> <p><small><?php echo $comp_post_info['c_name'] ?></small></p></h6>
</div>
<div class="col-md-4">
<h6>
<?php echo $comp_post_info['state'] ?>,<?php echo $comp_post_info['count'] ?>
<p><small>Location</small></p>
</h6>
</div>
<div class="col-md-4">
<h6>
<?php echo $comp_post_info['saly'] ?>
<p><small>Saly</small></p>
</h6>
</div>
</div>
</div>
</div>
</div>
</div>
<?php
}
?>
** <script>
$(document).ready(function(){
$(".upperdiv").on("click",function(){
var currentselect = $(this).('.lowerdiv');
$(".lowerdiv").not(currentselect).hide();
currentselect.show();
});
});
</script> **
enter code here
Use closest to find the parent (I have added parent class .parent-div) and then use nextAll to find the first lowerdiv.
See the Snippet below:
$(document).ready(function(){
$(".upperdiv").on("click",function(){
var currentselect = $(this).closest(".parent-div").nextAll('.lowerdiv').first(); /* Look I've added find */
$(".lowerdiv").not(currentselect).hide();
currentselect.show();
});
});
.lowerdiv{
display: none;
margin-left: 15px;
}
.upperdiv{
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent-div container-fluid">
<div class="row">
<div class="upperdiv">
Upper 1
</div>
</div>
</div>
<div class="lowerdiv">
Lower 1
</div>
<div class="parent-div container-fluid">
<div class="row">
<div class="upperdiv">
Upper 2
</div>
</div>
</div>
<div class="lowerdiv">
Lower 2
</div>
<div class="parent-div container-fluid">
<div class="row">
<div class="upperdiv">
Upper 3
</div>
</div>
</div>
<div class="lowerdiv">
Lower 3
</div>
Card looks like this. i just want it to display to the side
Im trying to show data from my database in PHP codeigniter. the data shows fine. but the problem is that the card is going down istead to right. you can look at the image above.
i just want to make the card go to the right when i do foreach. and go down after 4/5 card.
i ve tried to move the foreach code but it looks just like that.
im using bootsrap 4
here's the code
<div class="row">
<div class="container">
<div class="card-body">
<?php
foreach ($user as $u) {?>
<div class="col-md-2 mt-4">
<div class="card mt-3" style="width:15rem;">
<img src="<?=base_url() . 'assets/img/' . $u->gambar_game;?>"
class="card-img-top img-responsive" alt="...">
<h5 class="card-title font-weight-bold "><?php echo $u->nama_game; ?></h5>
<p class="card-text"><?=$u->deskripsi_game;?></p>
<a href="<?=base_url() . 'assets/games/' . $u->link_game;?>"
class="btn btn-primary btn-block">Mainkan Game</a>
</div>
</div>
</div>
<?php }?>
</div>
</div>
you are repeating currently the whole container inside the row, but u want to repeat the cols inside the container.
Try this (loop over the col-md-2):
<div class="row">
<div class="container">
<div class="card-body">
<?php
foreach ($user as $u) {?>
<div class="col-md-2 mt-4">
<div class="card mt-3" style="width:15rem;">
<img src="<?=base_url() . 'assets/img/' . $u->gambar_game;?>"
class="card-img-top img-responsive" alt="...">
<h5 class="card-title font-weight-bold "><?php echo $u->nama_game; ?></h5>
<p class="card-text"><?=$u->deskripsi_game;?></p>
<a href="<?=base_url() . 'assets/games/' . $u->link_game;?>"
class="btn btn-primary btn-block">Mainkan Game</a>
</div>
</div>
</div>
<?php }?>
</div>
</div>
</div>
EDIT:
Your HTML structure was a little mixed up.
Try this. col-md-3 places 4 cols inside of your row, or col-md-2if you want 6 cols inside of your row. A row is max 12 cols bootstrap grid documentation
<div class="container">
<div class="row">
<?php foreach ($user as $u) {?>
<!-- col-md-2 -->
<div class="col-md-4 mt-4">
<div class="card">
<div class="card-body">
<img src="<?=base_url() . 'assets/img/' . $u->gambar_game;?>"class="card-img-top img-responsive" alt="...">
<h5 class="card-title font-weight-bold "><?php echo $u->nama_game; ?></h5>
<p class="card-text"><?=$u->deskripsi_game;?></p>
Mainkan Game
</div>
</div>
</div>
<!-- col-md-2 end -->
<?php }?>
</div>
</div>
I wanted to display posts order by left to right.I tried to use bootstrap raw however I wasn't able to reach my targer. Thus,posts are being displayed from top to bottom.Below is my code:
<div class="hl1"></div>
<h2>Yangiliklar</h2>
<div class="row">
<div class="span3">
<div class="thumb4"><?php foreach(\app\models\Posts::find()->all() as $model){?>
<div class="thumbnail clearfix">
<figure><img src="uploads/<?=$model->image?>" style="width:166px;height:110px" alt=""></figure>
<div class="caption">
<h5> <?=$model->title?>
</h5>
<p> <?= mb_substr($model->description, 0, 150); ?>
</div>
</div><?php }?>
</div>
</div>
</div>
</div>
I am trying to center the content but my content is going on the right side and goes off the screen
Here is my code:
<?php
/* Template Name: About Us
*/
$aboutheading = get_field('about_heading');
$aboutus = get_field('about_us');
get_header(); ?>
<section>
<div class="container">
<div class="row">
<div class="col-md-4">
<h2> <?php echo "$aboutheading"; ?></h2>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-4 col-md-6">
<p class="lead"><?php echo "$aboutus"; ?></p>
</div>
</div>
</div>
</section>
<?php get_footer(); ?>
Here is the live link:http://www.abiglittlebiz.com/trevelle/about-us/
what I'm trying to achieve that the div becomes responsive
You have in your $aboutus Non-Breaking Space
In this case, text can't be break and go to new line. Clear Non-Breaking Spaces from your content or try this:
<p class="lead"><?php echo str_replace(' ', ' ', $aboutus); ?></p>
As others have pointed out in the comments. The issue is not CSS. The issue is the content. All spaces have been replaced by in your content, which is keeping the browser from breaking lines.
Just to verify this you can add the rule word-break: break-word; to your div and notice that the lines will be forced to break mid-word and stay inside your div.
You need to use offset class.
<section>
<div class="container">
<div class="row">
<div class="col-md-offset-4 col-md-4">
<h2> <?php echo "$aboutheading"; ?></h2>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-offset-4 col-md-offset-3 col-sm-4 col-md-6">
<p class="lead"><?php echo "$aboutus"; ?></p>
</div>
</div>
</div>
</section>
I'm trying to have my columns take the complete width of the screen in small screens and divide their content in two columns.
The following structure does that in small screens, but the links on the nested columns don't work when there are more than one column.
note:
when on small screens the links on the last nested columns always work regardless of how many columns there are.
If the columns are filled with the same content of the first column, the links work on small screens.
I really appreciate your help.
Here are my nested columns:
<div class="container ">
<!-- Example row of columns -->
<div class="row reading-field">
<div class="col-md-4">
<div><h2 class="center">Recent<h2></div>
<?php
$postslist = get_posts('numberposts=2&category=-5');
foreach ($postslist as $post) :
setup_postdata($post);
?>
<div class="post col-sm-6 ">
<h3 class="center"><?php the_title(); ?>
</h3>
<p> <?php the_excerpt(); ?> <p>
</div>
<?php endforeach ?>
</div>
<div class="col-md-4">
<div>
<h2 class="center">Media<h2>
</div>
<?php
$postslist = get_posts('numberposts=2&offset=0&category=5');
foreach ($postslist as $post) :
setup_postdata($post);
?>
<div class="post col-sm-6 center">
<h3>
<?php the_title(); ?>
</h3>
<p> <?php the_excerpt(); ?> <p>
</div>
<?php endforeach ?>
</div>
</div>
</div>
This seems to be using Bootstrap (judging by the class names).
You are nesting your columns incorrectly. You can't directly nest a column inside a column. You need to nest a column inside a row inside a column:
<div class="container ">
<!-- Example row of columns -->
<div class="row reading-field">
<div class="col-md-4">
<div class="row"> <!-- ***** This was missing ***** -->
<div><h2 class="center">Recent<h2></div>
<?php
$postslist = get_posts('numberposts=2&category=-5');
foreach ($postslist as $post) :
setup_postdata($post);
?>
<div class="post col-sm-6 ">
<h3 class="center"><?php the_title(); ?>
</h3>
<p> <?php the_excerpt(); ?> <p>
</div>
<?php endforeach ?>
</div> <!-- ***** and don't forget the extra closing tag ***** -->
</div>
</div>
</div>