I wanna show the projects in an horizontal alignment, but as you can see in the image below they are vertically.
This my code:
<section class="bg-light" id="portfolio">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading text-uppercase">Projects</h2>
<h3 class="section-subheading text-muted">Projects elaborated throughout the years</h3>
</div>
</div>
#foreach (\App\Project::all()->take(6) as $project)
<div class="row">
<div class="col-md-4 col-sm-6 portfolio-item">
<a class="portfolio-link" data-toggle="modal" href="#portfolioModal1">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<i class="fas fa-plus fa-3x"></i>
</div>
</div>
<img class="img-fluid" src="img/portfolio/project.jpg" alt="">
</a>
<div class="portfolio-caption">
<h5>Project ID: {{ $project->id }}</h5>
<p class="text-muted">{{ $project->title }}</p>
</div>
</div>
#endforeach
</div>
</div>
What am i missing here?
You start row in loop after every col- item.
Try this
<section class="bg-light" id="portfolio">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading text-uppercase">Projects</h2>
<h3 class="section-subheading text-muted">Projects elaborated throughout the years</h3>
</div>
</div>
<div class="row">
#foreach (\App\Project::all()->take(6) as $project)
<div class="col-md-4 col-sm-6 portfolio-item">
<a class="portfolio-link" data-toggle="modal" href="#portfolioModal1">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<i class="fas fa-plus fa-3x"></i>
</div>
</div>
<img class="img-fluid" src="img/portfolio/project.jpg" alt="">
</a>
<div class="portfolio-caption">
<h5>Project ID: {{ $project->id }}</h5>
<p class="text-muted">{{ $project->title }}</p>
</div>
</div>
#endforeach
</div>
</div>
</section>
Related
Hi guys I am trying to setup bottstrap carousel with multiple items (Display 4 items per slide).
I have read all questions and answers about this, but couldnt find a usefull answer.
I do it with 1 item at per slide as follow .
<div id="carousel-two" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner rounded-1">
<?php
$i = 0;
foreach($slider as $article){
$show = '';
$actives = '';
if($i == 0){
$actives = ' active';
}
?>
<div class="carousel-item <?php echo $actives; ?>" data-bs-interval="5000">
<a href="<?php echo $article['post_seo_url']; ?>-<?php echo $article['post_id']; ?>">
<img src="http://localhost/ilan/assets/images/1by1/01.webp" class="d-block w-100 rounded-1" alt="..." width="100%" height="100%">
</a>
<div class="carousel-caption px-2">
<h1 class="text-white"><?php echo $article['post_title']; ?></h1>
</div>
</div>
<?php $i++; } ?>
</div>
<ol class="carousel-indicators">
<?php
$i = 0;
foreach($slider as $slide){
$actives = '';
if($i == 0){
$actives = ' class="active"';
}
?>
<li data-bs-target="#carousel-two" data-bs-slide-to="<?php echo $i; ?>"<?php echo $actives; ?>><?php echo $i+1; ?></li>
<?php $i++; } ?>
</ol>
</div>
But cant do it to display 4 items at per slide, I created an array and tried array_slice(); and array_chunk(); to split array in parts and display it. but had no luck.
This is what I want to do : Here is the html part of slider.
I dont want indicators in slider. that is why didn't include it in example.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div id="authors" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="row gy-2">
<div class="col-xl-12 col-md-6 col-sm-12">
<div class="card">
<div class="row g-0">
<div class="col-5">
<img src="https://media.istockphoto.com/photos/trading-and-investment-concept-trader-silhouette-with-digital-tablet-picture-id1310316502?s=612x612" class="img-fluid rounded-1" alt="..." width="100%" height="100%">
</div>
<div class="col-7">
<div class="card-body">
<h4 class="card-text ps-1">This is a wider card with supporting text below.</h4>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-12 col-md-6 col-sm-12">
<div class="card">
<div class="row g-0">
<div class="col-5">
<img src="https://media.istockphoto.com/photos/trading-and-investment-concept-trader-silhouette-with-digital-tablet-picture-id1310316502?s=612x612" class="img-fluid rounded-1" alt="..." width="100%" height="100%">
</div>
<div class="col-7">
<div class="card-body">
<h4 class="card-text ps-1">This is a wider card with supporting text below.</h4>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-12 col-md-6 col-sm-12">
<div class="card">
<div class="row g-0">
<div class="col-5">
<img src="https://media.istockphoto.com/photos/trading-and-investment-concept-trader-silhouette-with-digital-tablet-picture-id1310316502?s=612x612" class="img-fluid rounded-1" alt="..." width="100%" height="100%">
</div>
<div class="col-7">
<div class="card-body">
<h4 class="card-text ps-1">This is a wider card with supporting text below.</h4>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-12 col-md-6 col-sm-12">
<div class="card">
<div class="row g-0">
<div class="col-5">
<img src="https://media.istockphoto.com/photos/trading-and-investment-concept-trader-silhouette-with-digital-tablet-picture-id1310316502?s=612x612" class="img-fluid rounded-1" alt="..." width="100%" height="100%">
</div>
<div class="col-7">
<div class="card-body">
<h4 class="card-text ps-1">This is a wider card with supporting text below.</h4>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row gy-2">
<div class="col-xl-12 col-md-6 col-sm-12">
<div class="card">
<div class="row g-0">
<div class="col-5">
<img src="https://media.istockphoto.com/photos/trading-and-investment-concept-trader-silhouette-with-digital-tablet-picture-id1310316502?s=612x612" class="img-fluid rounded-1" alt="..." width="100%" height="100%">
</div>
<div class="col-7">
<div class="card-body">
<h4 class="card-text ps-1">This is a wider card with supporting text below.</h4>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-12 col-md-6 col-sm-12">
<div class="card">
<div class="row g-0">
<div class="col-5">
<img src="https://media.istockphoto.com/photos/trading-and-investment-concept-trader-silhouette-with-digital-tablet-picture-id1310316502?s=612x612" class="img-fluid rounded-1" alt="..." width="100%" height="100%">
</div>
<div class="col-7">
<div class="card-body">
<h4 class="card-text ps-1">This is a wider card with supporting text below.</h4>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-12 col-md-6 col-sm-12">
<div class="card">
<div class="row g-0">
<div class="col-5">
<img src="https://media.istockphoto.com/photos/trading-and-investment-concept-trader-silhouette-with-digital-tablet-picture-id1310316502?s=612x612" class="img-fluid rounded-1" alt="..." width="100%" height="100%">
</div>
<div class="col-7">
<div class="card-body">
<h4 class="card-text ps-1">This is a wider card with supporting text below.</h4>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-12 col-md-6 col-sm-12">
<div class="card">
<div class="row g-0">
<div class="col-5">
<img src="https://media.istockphoto.com/photos/trading-and-investment-concept-trader-silhouette-with-digital-tablet-picture-id1310316502?s=612x612" class="img-fluid rounded-1" alt="..." width="100%" height="100%">
</div>
<div class="col-7">
<div class="card-body">
<h4 class="card-text ps-1">This is a wider card with supporting text below.</h4>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row gy-2">
<div class="col-xl-12 col-md-6 col-sm-12">
<div class="card">
<div class="row g-0">
<div class="col-5">
<img src="https://media.istockphoto.com/photos/trading-and-investment-concept-trader-silhouette-with-digital-tablet-picture-id1310316502?s=612x612" class="img-fluid rounded-1" alt="..." width="100%" height="100%">
</div>
<div class="col-7">
<div class="card-body">
<h4 class="card-text ps-1">This is a wider card with supporting text below.</h4>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-12 col-md-6 col-sm-12">
<div class="card">
<div class="row g-0">
<div class="col-5">
<img src="https://media.istockphoto.com/photos/trading-and-investment-concept-trader-silhouette-with-digital-tablet-picture-id1310316502?s=612x612" class="img-fluid rounded-1" alt="..." width="100%" height="100%">
</div>
<div class="col-7">
<div class="card-body">
<h4 class="card-text ps-1">This is a wider card with supporting text below.</h4>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-12 col-md-6 col-sm-12">
<div class="card">
<div class="row g-0">
<div class="col-5">
<img src="https://media.istockphoto.com/photos/trading-and-investment-concept-trader-silhouette-with-digital-tablet-picture-id1310316502?s=612x612" class="img-fluid rounded-1" alt="..." width="100%" height="100%">
</div>
<div class="col-7">
<div class="card-body">
<h4 class="card-text ps-1">This is a wider card with supporting text below.</h4>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-12 col-md-6 col-sm-12">
<div class="card">
<div class="row g-0">
<div class="col-5">
<img src="https://media.istockphoto.com/photos/trading-and-investment-concept-trader-silhouette-with-digital-tablet-picture-id1310316502?s=612x612" class="img-fluid rounded-1" alt="..." width="100%" height="100%">
</div>
<div class="col-7">
<div class="card-body">
<h4 class="card-text ps-1">This is a wider card with supporting text below.</h4>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Any help would be greatfull. Thanks
bootstrap carousel assumes each slide as a carousel-item
so if you want one slide (.carousel-item) to have 4 items inside of it, you need to place each 4 articles of yours inside of same carousel-item
it's tricky and your items will slide 4 per each slide change
can't you try OwlCarousel inside of your project?
it's really nice and much better than BS Carousel...
I a snippet like this (using bootstrap) and it can make an overflow card that can be scrolled horizontally.
<div class="container">
{{-- If you look to others for fulfillment, you will never truly be fulfilled. --}}
<h4 class="mb-4">Header Title</h4>
<div class="container-fluid" id="container-scroll">
<div class="overflow-auto row flex-row flex-nowrap mt-4 pb-4 pt-2">
<div class="col-md-4 col-sm-6">
<div class="card" style="width: 20rem;">
<img src="https://imgix.kitabisa.com/8bd765d4-2fa3-4ba5-a983-7d1ddee51705.jpg?ar=16:9&w=280&auto=format,compress"
class="img-fluid rounded">
<div class="card-body">
<h5 class="card-title">Card Title</h5>
<div class="card-text">
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 30%" aria-valuenow="30"
aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="row mt-3">
<div class="col">
<p>Rp 20.000.000</p>
</div>
<div class="col text-right">
<p>4 hari lagi</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="card" style="width: 20rem;">
<img src="https://imgix.kitabisa.com/8bd765d4-2fa3-4ba5-a983-7d1ddee51705.jpg?ar=16:9&w=280&auto=format,compress"
class="img-fluid rounded">
<div class="card-body">
<h5 class="card-title">Card Title</h5>
<div class="card-text">
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 30%" aria-valuenow="30"
aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="row mt-3">
<div class="col">
<p>Rp 20.000.000</p>
</div>
<div class="col text-right">
<p>4 hari lagi</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="card" style="width: 20rem;">
<img src="https://imgix.kitabisa.com/8bd765d4-2fa3-4ba5-a983-7d1ddee51705.jpg?ar=16:9&w=280&auto=format,compress"
class="img-fluid rounded">
<div class="card-body">
<h5 class="card-title">Card Title</h5>
<div class="card-text">
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 30%" aria-valuenow="30"
aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="row mt-3">
<div class="col">
<p>Rp 20.000.000</p>
</div>
<div class="col text-right">
<p>4 hari lagi</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="card" style="width: 20rem;">
<img src="https://imgix.kitabisa.com/8bd765d4-2fa3-4ba5-a983-7d1ddee51705.jpg?ar=16:9&w=280&auto=format,compress"
class="img-fluid rounded">
<div class="card-body">
<h5 class="card-title">Card Title</h5>
<div class="card-text">
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 30%" aria-valuenow="30"
aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="row mt-3">
<div class="col">
<p>Rp 20.000.000</p>
</div>
<div class="col text-right">
<p>4 hari lagi</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Live demo can be seen here : https://codepen.io/yehezkiel-g/pen/vYXbmxQ
Now the problem is that I want to make left and right arrow for the navigation like this picture below.
Any suggestion for this? I'm using Laravel Livewire by the way. Thank you :D
This will help you.
Make carousel, prev/next buttons:
<a class="btn btn-secondary-outline prev" href="" title="go back"><i class="fa fa-lg fa-chevron-left"></i></a>
<a class="btn btn-secondary-outline next" href="" title="more"><i class="fa fa-lg fa-chevron-right"></i></a>
https://getbootstrap.com/docs/4.0/components/carousel/
https://www.codeply.com/go/WEbiqQvGhy
I am trying to get data from a database and in the frontend I am showing data in cards in 1 row and 2 columns using bootstrap and PHP. But, I am getting the data for the first row but the remaining are cards coming one below one
<?php
$con = mysqli_connect('localhost', 'root', '', 'applicants');
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
$qry = "select * from feedback";
$result = mysqli_query($con, $qry);
?>
<div class="main-content">
<div class="main-content-inner">
<div class="row">
<div class="col-6 mt-5">
<?php $i=0;
while ($row = $result->fetch_assoc()) {
$i++;?>
<?php if ($i %2 == 0){?>
<!-- <div class="row"> -->
</div>
<div class="col-6 mt-5"><?php } ?>
<div class="card">
<div class="card-body">
<h5 class="card-title"> <?php echo $row['username']?></h5>
<h6 class="card-subtitle mb-2 text-muted"><?php echo $row['email'] ?></h6>
<ul>
<li>
<div class="left alert alert-success" role="alert">
<h6><?php echo $row['subject'] ?></h6>
<p class="card-text"><?php echo $row['message'] ?></p>
</div>
</li>
</ul>
</div>
</div>
<?php if ($i %2 == 0){?>
</div>
<!-- </div> --><?php } ?>
<!-- </div> -->
</div>
<?php } ?>
</div>
</div>
Your tags for the row and cols seem to be off. Please compare them against this code that generates two rows:
<div class="main-content-inner">
<div class="row">
<div class="col-6 mt-5">
<div class="card">
<div class="card-body">
<h5 class="card-title">Name</h5>
<h6 class="card-subtitle mb-2 text-muted">Email</h6>
<ul>
<li>
<div class="left alert alert-success" role="alert">
<h6>Subject</h6>
<p class="card-text">Message</p>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="col-6 mt-5">
<div class="card">
<div class="card-body">
<h5 class="card-title">Name</h5>
<h6 class="card-subtitle mb-2 text-muted">Email</h6>
<ul>
<li>
<div class="left alert alert-success" role="alert">
<h6>Subject</h6>
<p class="card-text">Message</p>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-6 mt-5">
<div class="card">
<div class="card-body">
<h5 class="card-title">Name</h5>
<h6 class="card-subtitle mb-2 text-muted">Email</h6>
<ul>
<li>
<div class="left alert alert-success" role="alert">
<h6>Subject</h6>
<p class="card-text">Message</p>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="col-6 mt-5">
<div class="card">
<div class="card-body">
<h5 class="card-title">Name</h5>
<h6 class="card-subtitle mb-2 text-muted">Email</h6>
<ul>
<li>
<div class="left alert alert-success" role="alert">
<h6>Subject</h6>
<p class="card-text">Message</p>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
I'm trying to display odd and even posts, with different classes and sub-classes in a foreach loop in Laravel. I can't find anything in the documentation that suggests how to pull odd data differently from even data in a foreach loop.
#foreach ($posts as $post)
<li class="timeline-inverted">
<div class="timeline-badge primary" ><a title="{{ $post->created_at }}"><i class="glyphicon glyphicon-time invert" id=""></i></a></div>
<div class="timeline-panel">
<div class="timeline-header">
<div class="row">
<div class="col-xs-2">
<img class="img-responsive img-rounded" src="https://s.gravatar.com/avatar/2efde286ce7b0171a0dfedd1f3cff984?s=80&d=&r=G"">
</div>
<div class="col-xs-8">
<a> {{ $post->title }} </a> shared 6 hours ago
</div>
</div>
</div>
<div class="timeline-heading">
<div class="videowrapper">
<iframe height="300" src="https://www.youtube.com/embed/4PXXQzME5no" frameborder="0" allowfullscreen=""></iframe>
</div>
</div>
<div class="timeline-body">
<p>{{ $post->body }}</p>
</div>
<div class="timeline-footer">
<div class="media">
<a class="pull-left" href="#">
<img class="media-object" src="" />
</a>
<div class="media-body">
<p>Comment</p>
November at 8:15am
</div>
</div>
<hr>
<div class="media">
<a class="pull-left" href="#">
<img class="media-object" src="" />
</a>
<div class="media-body">Comment </div>
</div>
<hr>
<div class="media">
<a class="pull-left" href="#">
<img class="media-object" src="" />
</a>
<div class="media-body">Comment </div>
</div>
</div>
</div>
</li>
<li>
<div class="timeline-badge primary" ><a title="11 hours ago via Twitter"><i class="glyphicon glyphicon-time invert" id=""></i></a></div>
<div class="timeline-panel">
<div class="timeline-header">
<div class="row">
<div class="col-xs-2">
<img class="img-responsive img-rounded" src="https://s.gravatar.com/avatar/2efde286ce7b0171a0dfedd1f3cff984?s=80&d=&r=G"">
</div>
<div class="col-xs-8">
<a> {{ $post->title }} </a> shared 6 hours ago
</div>
</div>
</div>
<div class="timeline-heading">
<img class="img-responsive" src="img/img.png" />
<div class="timeline-images">
<div class="row">
<div class="col-xs-4">
<img src="img/img1.png" class="img-thumbnail img-responsive" />
</div>
<div class="col-xs-4">
<img src="img/img2.png" class="img-thumbnail img-responsive" />
</div>
<div class="col-xs-4">
<img src="img/img3.png" class="img-thumbnail img-responsive" />
</div>
</div>
</div>
</div>
<div class="timeline-body">
<p>{{ $post->body }}</p>
</div>
</div>
</li>
#endforeach
I am developing my application with laravel5.2 .I have template with bootstrap and want to display 4 products with their pictures at each row.
this is my template
#extends('layouts.layout',[['subscribe'=>$subscribe]])
#section('content')
<section id="advertisement">
<div class="container">
<img src="{{asset('images/shop/advertisement.jpg')}}" alt="" />
</div>
</section>
<section>
<div class="container">
<div class="row">
<div class="col-sm-3">
<div class="left-sidebar">
#include('shared.sidebar',array('brands'=>$brands))
</div>
</div>
<div class="col-sm-9 padding-right">
<div class="features_items"><!--features_items-->
<h2 class="title text-center">Features Items</h2>
#foreach ($products as $product)
<div class="col-sm-3">
<div class="product-image-wrapper">
<div class="single-products">
<div class="productinfo text-center">
<img src="images/shop/{{$product->image}}" height="200" width="150" alt="">
<h2>{{$product->price}}</h2>
<h6><p>{{$product->name}}</p></h6>
<i class="fa fa-shopping-cart"></i>Add to cart
<i class="fa fa-info"></i>View Details
</div>
<div class="product-overlay">
<div class="overlay-content">
<h2>${{$product->price}}</h2>
<p>${{$product->name}}</p>
<form method="POST" action="{{url('cart')}}">
<input type="hidden" name="product_id" value="{{$product->id}}">
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<button type="submit" class="btn btn-fefault add-to-cart">
<i class="fa fa-shopping-cart"></i>
Add to cart
</button>
</form>
<i class="fa fa-info"></i>View Details
</div>
</div>
</div>
<div class="choose">
<ul class="nav nav-pills nav-justified">
<li><i class="fa fa-plus-square"></i>Add to wishlist</li>
<li><i class="fa fa-plus-square"></i>Add to compare</li>
</ul>
</div>
</div>
</div>
#endforeach
<ul class="pagination">
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>ยป</li>
</ul>
</div><!--features_items-->
</div>
</div>
</div>
</section>
#endsection
It is not disciplined.it display 4 at row in time and 2 in time .please help me to do it.
In order to have nested columns (4*x columns sm-3 inside the column sm-9) you need to wrap the 4 columns in a row so that it becomes
<div class="col-sm-9">
<div class="row">
#foreach ($products as $product)
<div class="col-sm-3">
...