Joomla article overlaps in each other when going to add new article - php

Whenever i going to add new article in joomla dashboard, it gets overlapped. I used following code to display articles.
<div class="col-md-9">
<div class="row">
<jdoc:include type="component"/>
</div>
</div>
I got articles in overlaps in each other. Instead i need to display articles in grid view. Can any one help me to resolve this problem.
When I inspect html element from browser I got following code snippet in row class div.
<div class="blog" itemscope="" itemtype="http://schema.org/Blog">
<div class="items-row cols-4 row-0 row-fluid clearfix">
<div class="span3 col-md-3">
<div class="item column-1" itemprop="blogPost" itemscope="" itemtype="http://schema.org/BlogPosting">
<div class="pull-left item-image">
<img src="/textile/images/belt-fasteners.png" alt="" itemprop="thumbnailUrl">
</div>
<div>
<h3 style="text-align: center;">Belt Fasteners</h3>
<p><span class="A32"><span style="font-size: 10pt;">We stock a vast range of belt fasteners for all thickness of belts and for a variety of applications.</span></span></p>
<p><span style="font-size: 11pt; line-height: 115%; font-family: 'Calibri','sans-serif';">Widths: 25mm, 38.5mm, 40mm, 50mm, 57mm, 63mm, 75mm, 89mm, 100mm, 150mm, 300mm.</span></p>
<p class="readmore">
<a class="btn btn-success" href="/textile/index.php/4-belt-fasteners" itemprop="url">
<span class="icon-chevron-right"></span>
Read more ... </a>
</p>
</div>
<!-- end item -->
</div><!-- end span -->
<div class="span3 col-md-3">
<div class="item column-2" itemprop="blogPost" itemscope="" itemtype="http://schema.org/BlogPosting">
<div class="pull-left item-image">
<img src="/textile/images/belt-fasteners.png" alt="" itemprop="thumbnailUrl">
</div>
<div>
<h3 style="text-align: center;">Belt Fasteners</h3>
<p><span class="A32"><span style="font-size: 10pt;">We stock a vast range of belt fasteners for all thickness of belts and for a variety of applications.</span></span></p>
<p><span style="font-size: 11pt; line-height: 115%; font-family: 'Calibri','sans-serif';">Widths: 25mm, 38.5mm, 40mm, 50mm, 57mm, 63mm, 75mm, 89mm, 100mm, 150mm, 300mm.</span></p>
<p class="readmore">
<a class="btn btn-success" href="/textile/index.php/6-belt-fasteners-3" itemprop="url">
<span class="icon-chevron-right"></span>
Read more ... </a>
</p>
</div>
<!-- end item -->
</div><!-- end span -->
<div class="span3 col-md-3">
<div class="item column-3" itemprop="blogPost" itemscope="" itemtype="http://schema.org/BlogPosting">
<div class="pull-left item-image">
<img src="/textile/images/belt-fasteners.png" alt="" itemprop="thumbnailUrl">
</div>
<div>
<h3 style="text-align: center;">Belt Fasteners</h3>
<p><span class="A32"><span style="font-size: 10pt;">We stock a vast range of belt fasteners for all thickness of belts and for a variety of applications.</span></span></p>
<p><span style="font-size: 11pt; line-height: 115%; font-family: 'Calibri','sans-serif';">Widths: 25mm, 38.5mm, 40mm, 50mm, 57mm, 63mm, 75mm, 89mm, 100mm, 150mm, 300mm.</span></p>
<p class="readmore">
<a class="btn btn-success" href="/textile/index.php/8-belt-fasteners-5" itemprop="url">
<span class="icon-chevron-right"></span>
Read more ... </a>
</p>
</div>
<!-- end item -->
</div><!-- end span -->
<div class="span3 col-md-3">
<div class="item column-4" itemprop="blogPost" itemscope="" itemtype="http://schema.org/BlogPosting">
<div class="pull-left item-image">
<img src="/textile/images/belt-fasteners.png" alt="" itemprop="thumbnailUrl">
</div>
<div>
<h3 style="text-align: center;">Belt Fasteners</h3>
<p><span class="A32"><span style="font-size: 10pt;">We stock a vast range of belt fasteners for all thickness of belts and for a variety of applications.</span></span></p>
<p><span style="font-size: 11pt; line-height: 115%; font-family: 'Calibri','sans-serif';">Widths: 25mm, 38.5mm, 40mm, 50mm, 57mm, 63mm, 75mm, 89mm, 100mm, 150mm, 300mm.</span></p>
<p class="readmore">
<a class="btn btn-success" href="/textile/index.php/9-belt-fasteners-6" itemprop="url">
<span class="icon-chevron-right"></span>
Read more ... </a>
</p>
</div>
<!-- end item -->
</div><!-- end span -->
</div><!-- end row -->
<div class="items-row cols-4 row-1 row-fluid clearfix">
<div class="span3 col-md-3">
<div class="item column-1" itemprop="blogPost" itemscope="" itemtype="http://schema.org/BlogPosting">
<div class="pull-left item-image">
<img src="/textile/images/belt-fasteners.png" alt="" itemprop="thumbnailUrl">
</div>
<div>
<h3 style="text-align: center;">Belt Fasteners</h3>
<p><span class="A32"><span style="font-size: 10pt;">We stock a vast range of belt fasteners for all thickness of belts and for a variety of applications.</span></span></p>
<p><span style="font-size: 11pt; line-height: 115%; font-family: 'Calibri','sans-serif';">Widths: 25mm, 38.5mm, 40mm, 50mm, 57mm, 63mm, 75mm, 89mm, 100mm, 150mm, 300mm.</span></p>
<p class="readmore">
<a class="btn btn-success" href="/textile/index.php/5-belt-fasteners-2" itemprop="url">
<span class="icon-chevron-right"></span>
Read more ... </a>
</p>
</div>
<!-- end item -->
</div><!-- end span -->
<div class="span3 col-md-3">
<div class="item column-2" itemprop="blogPost" itemscope="" itemtype="http://schema.org/BlogPosting">
<div class="pull-left item-image">
<img src="/textile/images/belt-fasteners.png" alt="" itemprop="thumbnailUrl">
</div>
<div>
<h3 style="text-align: center;">Belt Fasteners</h3>
<p><span class="A32"><span style="font-size: 10pt;">We stock a vast range of belt fasteners for all thickness of belts and for a variety of applications.</span></span></p>
<p><span style="font-size: 11pt; line-height: 115%; font-family: 'Calibri','sans-serif';">Widths: 25mm, 38.5mm, 40mm, 50mm, 57mm, 63mm, 75mm, 89mm, 100mm, 150mm, 300mm.</span></p>
<p class="readmore">
<a class="btn btn-success" href="/textile/index.php/7-belt-fasteners-4" itemprop="url">
<span class="icon-chevron-right"></span>
Read more ... </a>
</p>
</div>
<!-- end item -->
</div><!-- end span -->
</div><!-- end row -->
</div>
</div>
</div>
</div>
</div><!--/.container-->
</div>
</div>


Add clearfix class to your parent div
like so
<div class="col-md-9 clearfix">
<div class="row clearfix">
<jdoc:include type="component"/>
</div>
</div>
or
style="clear:both"

Related

How to fix route is not defined when I register the route slash web.php using [ Laravel version 5.8 ]

I have problem regarding register the route of slash in web.php, it gives me error that my route is not defined. Route [/] not defined. is there way to register my slash to the web.php? my main point here is when the user access the url http://localhost:8000/ the redirection will go to the index controller.
I will share to you guys my controller and my web.php
Web.php
Route::get('/', 'HomeController#index')->name('index');
Controller:
public function index() {
return view('index')
}
index.blade.php
#extends('layouts.app')
#section('content')
<!-- <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="{{asset('assets/W4_Double_bucket_EN.jpg')}}" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="{{asset('assets/BBQ_Big_Crunch_Banner_en.jpg')}}" class="d-block w-100" alt="...">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<br><br><br> -->
<!-- Scroll to Top Button-->
<div id="wrapper" >
<!-- Sidebar -->
<!-- End of Sidebar -->
<div class="container-fluid">
<br><br><br><br>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="{{asset('assets/W4_Double_bucket_EN.jpg')}}" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="{{asset('assets/BBQ_Big_Crunch_Banner_en.jpg')}}" class="d-block w-100" alt="...">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<br><br><br>
<div class="row">
<div class="col-md-3">
<div class="card shadow ">
<div class="card-header bg-danger">
<b style=" font-weight: 500; font-size:14px; color:white;"><i class="far fa-comments"></i> Recent Posts</b>
</div>
<div class="card-body">
<h5 class="card-title" style="font-size:15px; font-weight: 400; color:black;">Special title treatment</h5>
<p class="card-text" style="color:#757a91; font-size:14px;">With supporting text below as a natural lead-in to additional content.</p>
<hr></hr>
</div>
</div>
<br/>
<div class="card shadow">
<div class="card-header bg-danger" >
<b style=" font-weight: 500; font-size:14px; color:white;"><i class="far fa-user"></i> RGM Corner</b>
</div>
<div class="card-body">
<h5 class="card-title">
<div>
<h5 class="card-title" style="font-size:15px; font-weight: 400; color:black;">Special title treatment</h5>
<div class="postDate" style="font-size:11px; color:#999;">2d ago</div>
</div>
</h5>
<p class="card-text" style="color:#757a91; font-size:14px;">With supporting text below as a natural lead-in to additional content.</p>
<a class="nav-link" href="#" style="color:#757a91; font-size: 13px;"><i class="far fa-thumbs-up" style="color:#757a91; font-size:13px;"></i> 2 Likes</a>
<hr></hr>
<br/>
<h5 class="card-title">
<div>
<h5 class="card-title" style="font-size:15px; font-weight: 400; color:black;">Special title treatment</h5>
<div class="postDate" style="font-size:11px; color:#999;">2d ago</div>
</div>
</h5>
<p class="card-text" style="color:#757a91; font-size:14px;">With supporting text below as a natural lead-in to additional content.</p>
<a class="nav-link" href="#" style="color:#757a91; font-size: 13px;"><i class="far fa-thumbs-up" style="color:#757a91; font-size:13px;"></i> 2 Likes</a>
<hr></hr>
</div>
</div>
<br><br>
</div>
<div class="col-md-6">
<div class="card shadow ">
<div class="card-body">
<p class="card-title">
<div class="row">
<div class="col-md-1"> <img src="{{asset('assets/rounded_image.jpg')}}" style="height:40px;,width:40px;" class="rounded-circle" alt="..."/></div>
<div class="col-md-4">
<div style="line-height: 1.3;">
<div class="postName" style="color:#900; font-weight: 500; font-size:14px;">Ronald Perpekto</div>
<div class="postPosition" style="font-size:12px; color:#999;">Operations</div>
<div class="postDate" style="font-size:11px; color:#999;">2d ago</div>
</div>
</div>
</div>
<hr></hr>
</p>
<p class="card-text" style="color:#757a91; font-size:13px;">As a pre-emptive measure to ensure the safety of our people most especially our students, from the onslaught of Typhoon Tisoy that is predicted</p>
<p class="card-text">
<img class="d-block w-100" src="{{asset('assets/BBQ_Big_Crunch_Banner_en.jpg')}}"></img>
</p>
</div>
<div class="card-footer text-muted">
<div class="row">
<div class="col-md-6">
<div class="row">
<a class="nav-link" href="#" style="color:#757a91; font-size:13px;"><i class="far fa-thumbs-up" style="color:#757a91; font-size:13px;"></i> 2 Likes</a>
<a class="nav-link" href="#" style="color:#757a91; font-size: 13px;"><i class="far fa-comments" style="color:#757a91; font-size:13px;"></i> 50 Comments</a>
</div>
</div>
</div>
</div>
</div>
<br/>
<div class="card shadow">
<div class="card-body">
<p class="card-title">
<div class="row">
<div class="col-md-1"> <img src="{{asset('assets/rounded_image.jpg')}}" style="height:40px;,width:40px;" class="rounded-circle" alt="..."/></div>
<div class="col-md-4">
<div style="line-height: 1.3;">
<div class="postName" style="color:#900; font-weight: 500; font-size:14px;">Ronald Perpekto</div>
<div class="postPosition" style="font-size:12px; color:#999;">Operations</div>
<div class="postDate" style="font-size:11px; color:#999;">2d ago</div>
</div>
</div>
</div>
<hr></hr>
</p>
<p class="card-text" style="color:#757a91; font-size:13px;">As a pre-emptive measure to ensure the safety of our people most especially our students, from the onslaught of Typhoon Tisoy that is predicted</p>
<p class="card-text">
<img class="d-block w-100" src="{{asset('assets/W4_Double_bucket_EN.jpg')}}" style="height:40,width:40"></img>
</p>
</div>
<div class="card-footer text-muted">
<div class="row">
<div class="col-md-6">
<div class="row">
<a class="nav-link" href="#" style="color:#757a91; font-size: 13px;"><i class="far fa-thumbs-up" style="color:#757a91; font-size: 13px;"></i> 2 Likes</a>
<a class="nav-link" href="#" style="color:#757a91; font-size: 13px;"><i class="far fa-comments" style="color:#757a91; font-size: 13px;"></i> 50 Comments</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card shadow">
<div class="card-header bg-danger">
<b style=" font-weight: 500; font-size:14px; color:white;"><i class="far fa-calendar"></i> What's Happening </b>
</div>
<div class="card-body">
<h5 class="card-title" style="font-size:15px; font-weight: 400; color:black;">Special title treatment</h5>
<p class="card-text" style="color:#757a91; font-size:14px;">With supporting text below as a natural lead-in to additional content.</p>
<hr></hr>
</div>
</div>
<br/>
<div class="card shadow">
<div class="card-header bg-danger">
<b style=" font-weight: 500; font-size:14px; color:white;"><i class="far fa-file"></i> Recommended Pages</b>
</div>
<div class="card-body">
<p class="card-text">
<div class="row">
<div class="col-md-2"><i class="fa fa-bicycle fa-2x" style="background: #f3f3f3; padding:9px; border-radius: 50%;"></i></div>
<div class="col-md-9">
<div style="line-height: 1.3; margin-left:0px;">
<div class="postName" style="font-weight: 400; color:black; font-size:15px;">Hiflyer Website</div>
<div class="postPosition" style="font-size:12px; color:#999;">https://www.hiflyer.ca/</div>
<div class="postDate" style="font-size:11px; color:#999;">2019</div>
</div>
</div>
</div>
</p>
<p class="card-text">
<div class="row">
<div class="col-md-2"><i class="fas fa-desktop fa-2x" style="background: #f3f3f3; padding:9px; border-radius: 50%;"></i></div>
<div class="col-md-9">
<div style="line-height: 1.3; margin-left:0px;">
<div class="postName" style="font-weight: 400; color:black; font-size:15px;">Customer Display</div>
<div class="postPosition" style="font-size:12px; color:#999;">https://icweb.hiflyer.ca/CustomerDisplay</div>
<div class="postDate" style="font-size:11px; color:#999;">2019</div>
</div>
</div>
</div>
</p>
</div>
</div>
<br/>
<div class="card shadow">
<div class="card-header bg-danger">
<b style=" font-weight: 500; font-size:14px; color:white;"><i class="far fa-calendar"></i> Upcoming Events </b>
</div>
<div class="card-body">
<h5 class="card-title" style="font-size:15px; font-weight: 400; color:black;">Special title treatment</h5>
<p class="card-text" style="color:#757a91; font-size:14px;">With supporting text below as a natural lead-in to additional content.</p>
<hr></hr>
</div>
</div>
<br/>
</div>
</div>
</div>
</div>
<!-- End of Page Wrapper -->
<!-- Scroll to Top Button-->
<a class="scroll-to-top rounded" href="#page-top">
<i class="fas fa-angle-up"></i>
</a>
<br><br><br><br>
#endsection
Error:

Somewhere in your index.blade.php file you are using a route link like this route('/') and thats wrong (in your case).
In the route() function you need to enter the url name (in your case 'index') instead of the url path. So if you change route('/') to route('index') it work's.

Check the index.php file you've added {{ route('/') }} but in web.php file there is no route as the same name.
So, replace {{ route('/') }} to {{ route('index') }} in index.php file.
Or with url you can define it as below.
{{ url('/') }}
check with this change
Route::get('/', 'HomeController#index');

When i look at you error screenshot which you've mentioned,i saw Authenticate.php
So i think you need to set home url over there
<?php
namespace App\Http\Middleware;
use Illuminate\Auth\Middleware\Authenticate as Middleware;
use Illuminate\Support\Facades\Request;
class Authenticate extends Middleware
{
/**
* Get the path the user should be redirected to when they are not authenticated.
*
* #param \Illuminate\Http\Request $request
* #return string
*/
protected function redirectTo($request)
{
if (! $request->expectsJson()) {
return route('index');
// by default it's : return route('login'); you might have changed here
}
}
}

laravel - #yield('content') broken

today i just try to test my codes and i got a weird problrm.
i have a app blade to use as my yied or shared header and footer
the codes is this
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<title>Diva - Beauty salon template</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Favicon -->
<link href="img/favicon.ico" rel="shortcut icon">
<!-- Stylesheets -->
<link rel="stylesheet" href="css/bts.css">
<link rel="stylesheet" href="css/style.css">
<!------ Include the above in your HEAD tag ---------->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Page Preloder -->
<div id="preloder" style="display: none;">
<div class="loader" style="display: none;"></div>
</div>
<!-- Header section -->
<header class="header-section" dir="rtl">
<div class="header-warp">
<!-- logo -->
<a href="home.html" class="site-logo">
<img src="img/logo.png" alt="">
</a>
<!-- responsive -->
<div class="nav-switch">
<i class="fa fa-bars"></i>
</div>
<!-- Navigation Menu -->
<ul class="main-menu">
<li class="active">{{ __('general.Anohe') }}</li>
<li>{{ __('general.about-us')}}</li>
<li>{{ __('general.sell-place') }}</li>
<li>{{ __('general.about') }}</li>
<li>{{ __('general.contact-with-us') }}</li>
</ul>
<div class="header-right mb-4">
09359127500
{{ __('general.menu') }}
</div>
</div>
</header>
<!-- Header section end -->
<div class="container">
#include('...shared.message')
<div class="card-deck mb-3 text-center">
#yield('content')
</div>
</div>
<!-- Footer section end -->
<!-- Footer -->
<footer class="footer">
<div class="container bottom_border">
<div class="row">
<div class=" col-sm-4 col-md col-sm-4 col-12 col">
<h5 class="headin5_amrc col_white_amrc pt2">Find us</h5>
<!--headin5_amrc-->
<p class="mb10">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
<p><i class="fa fa-location-arrow"></i> 9878/25 sec 9 rohini 35 </p>
<p><i class="fa fa-phone"></i> +91-9999878398 </p>
<p><i class="fa fa fa-envelope"></i> info#example.com </p>
</div>
<div class=" col-sm-4 col-md col-6 col">
<h5 class="headin5_amrc col_white_amrc pt2">Quick links</h5>
<!--headin5_amrc-->
<ul class="footer_ul_amrc">
<li>Image Rectoucing</li>
<li>Clipping Path</li>
<li>Hollow Man Montage</li>
<li>Ebay & Amazon</li>
<li>Hair Masking/Clipping</li>
<li>Image Cropping</li>
</ul>
<!--footer_ul_amrc ends here-->
</div>
<div class=" col-sm-4 col-md col-6 col">
<h5 class="headin5_amrc col_white_amrc pt2">Quick links</h5>
<!--headin5_amrc-->
<ul class="footer_ul_amrc">
<li>Remove Background</li>
<li>Shadows & Mirror Reflection</li>
<li>Logo Design</li>
<li>Vectorization</li>
<li>Hair Masking/Clipping</li>
<li>Image Cropping</li>
</ul>
<!--footer_ul_amrc ends here-->
</div>
<div class=" col-sm-4 col-md col-12 col">
<h5 class="headin5_amrc col_white_amrc pt2">Follow us</h5>
<!--headin5_amrc ends here-->
<ul class="footer_ul2_amrc">
<li><i class="fab fa-twitter fleft padding-right"></i> <p>Lorem Ipsum is simply dummy text of the printing...https://www.lipsum.com/</p></li>
<li><i class="fab fa-twitter fleft padding-right"></i> <p>Lorem Ipsum is simply dummy text of the printing...https://www.lipsum.com/</p></li>
<li><i class="fab fa-twitter fleft padding-right"></i> <p>Lorem Ipsum is simply dummy text of the printing...https://www.lipsum.com/</p></li>
</ul>
<!--footer_ul2_amrc ends here-->
</div>
</div>
</div>
<div class="container">
<ul class="foote_bottom_ul_amrc">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Pricing</li>
<li>Blog</li>
<li>Contact</li>
</ul>
<!--foote_bottom_ul_amrc ends here-->
<p class="text-center">Copyright #2017 | Designed With by Your Company Name</p>
<ul class="social_footer_ul">
<li><i class="fab fa-facebook-f"></i></li>
<li><i class="fab fa-twitter"></i></li>
<li><i class="fab fa-linkedin"></i></li>
<li><i class="fab fa-instagram"></i></li>
</ul>
<!--social_footer_ul ends here-->
</div>
</footer>
<!-- Footer -->
<!--====== Javascripts & Jquery ======-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/circle-progress.min.js"></script>
<script src="js/main.js"></script><div id="ui-datepicker-div" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all"></div>
</body></html>
and two other page with section
page one
#extends('layouts.app')
#section('content')
<div dir="rtl" >
<div class="d-flex d-inline-flex" style="width: 100%; height: 300px;">
<div class="shadow-sm border d-block h-100" style="width: 20%; ">
<p>
منو
</p>
<div class="w-100 mb-2">پوشاک<p class="fa fa-angle-left float-left ml-2"></p></div>
<div class="w-100 mb-2">الکترونیکی<p class="fa fa-angle-left float-left ml-2"></p></div>
<div class="w-100 mb-2">کتای<p class="fa fa-angle-left float-left ml-2"></p></div>
<div class="w-100 mb-2">بازی و سرگرمی<p class="fa fa-angle-left float-left ml-2"></p></div>
</div>
<div class="shadow border mr-3 h-100" style="width: 80%;">
<div id="demo" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul>
<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-item active">
<img style="height: 300px;width: 100%" src="http://smarterware.org/wp-content/uploads/2016/09/technology1.jpg" alt="Los Angeles">
</div>
<div class="carousel-item">
<img style="height: 300px;width: 100%" src="https://www.cmo.com/content/dam/CMO/Home%20Page/1046x616_Modern-Commerce-2.0-Technology-Sets-The-Stage-For-A-New-Round-Of-Disruption.jpg" alt="Chicago">
</div>
<div class="carousel-item">
<img style="height: 300px;width: 100%" src="https://sohopress.com/wp-content/uploads/2018/05/web-summit-feature_1200x675_hero_110717.jpg" alt="New York">
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</div>
</div>
<div class="shadow border mt-3">
<p>
ایران نت
</p>
<hr style="border-color: #bdbdbd;">
</div>
<div class="d-flex d-inline-flex" style="width: 100%">
<div class="shadow border mt-3" style="width: 20%">
<p>
آخرین اخبار
</p>
<hr style="border-color: #ff8a05">
<ul class="list-group">
<li class="list-group-item" style="height: 60px; text-overflow: ellipsis; white-space: nowrap;overflow: hidden; word-wrap: break-word;"> شاسی بلند لامبورگینی اوروس با تیونینگ TopCar معرفی شد </li>
<li class="list-group-item" style="height: 60px; text-overflow: ellipsis; white-space: nowrap;overflow: hidden; word-wrap: break-word;"> اینتل دانگل هوش مصنوعی جدید خود را معرفی کرد </li>
<li class="list-group-item" style="height: 60px; text-overflow: ellipsis; white-space: nowrap;overflow: hidden; word-wrap: break-word;"> چهارمین همایش آینده وب و موبایل </li>
<li class="list-group-item" style="height: 60px; text-overflow: ellipsis; white-space: nowrap;overflow: hidden; word-wrap: break-word;"> بزرگ‌ترین کارخانه تولید داروهای ضدسرطان خاورمیانه در ایران افتتاح شد </li>
<li class="list-group-item" style="height: 60px; text-overflow: ellipsis; white-space: nowrap;overflow: hidden; word-wrap: break-word;"> جگوار لندرور در صنعت موتورسیکلت سرمایه‌گذاری می‌کند </li>
</ul>
</div>
<div class="shadow border mt-3 mr-3" style="width: 80%; height: 350px">
<img class="w-100 h-100" src="https://boygeniusreport.files.wordpress.com/2018/06/fortnite.jpg?quality=98&strip=all&w=782"/>
</div>
</div>
<div class="shadow border mt-3">
<p>
جدید ترین ها
</p>
<hr style="border-color: #bdbdbd;">
<div class=" d-inline-flex" style="height: 300px">
#foreach($products as $product)
<div class="w-25 m-2">
<div class="h-50 p-2">
<img class="w-75 h-100" style="border-radius: 20px;" src="/image/products/{{$product->id}}product1.jpg"/>
</div>
<div class="p-2" style=" overflow: hidden; word-wrap: normal; height: 35%;">
{{$product->pname}}
<p>{{$product->description}} </p>
</div>
توضیحات محصول
</div>
#endforeach
</div>
</div>
<div class="shadow border mt-3">
<p>
دیجیکالا
</p>
<hr style="border-color: #bdbdbd;">
<div class=" d-inline-flex">
#if(isset($Dproducts))
#foreach($Dproducts as $product)
<div class="w-25 border m-2">
<div class="h-50 p-2 border">
<img class="w-100 h-100" src="/image/products/{{$product->id}}product1.jpg"/>
</div>
<div class="h-25 p-2 border">
{{$product->pname}}
<p style=" overflow: hidden; word-wrap: break-word;">{{$product->description}} </p>
</div>
توضیحات محصول
</div>
#endforeach
#endif
</div>
</div>
</div>
#endsection
and page two
#extends('layouts.app')
#section('content')
<div class="container">
<h2 class="text-center">Contac Form</h2>
<div class="row justify-content-center">
<div class="col-12 col-md-8 col-lg-6 pb-5">
<div class="container">
<h1>Contact US Form</h1>
#if(Session::has('success'))
<div class="alert alert-success">
{{ Session::get('success') }}
</div>
#endif
<form method="post" action="{{route('contactus.store')}}" enctype="multipart/form-data">
{{ csrf_field() }}
<div class="form-group {{ $errors->has('name') ? 'has-error' : '' }}">
<label>Name</label>
<input type="text" name="name" id="name" placeholder="Enter Name" class="form-control" value="{{old('name')}}">
<span class="text-danger">{{ $errors->first('name') }}</span>
</div>
<div class="form-group {{ $errors->has('email') ? 'has-error' : '' }}">
<label>Email</label>
<input type="text" name="email" id="email" placeholder="Enter Email" class="form-control" value="{{old('email')}}">
<span class="text-danger">{{ $errors->first('email') }}</span>
</div>
<div class="form-group {{ $errors->has('message') ? 'has-error' : '' }}">
<label>Message</label>
<textarea type="text" name="message" id="message" placeholder="Enter Message" class="form-control" value="{{old('message')}}"></textarea>
<span class="text-danger">{{ $errors->first('message') }}</span>
</div>
<div class="form-group">
<button class="btn btn-success">Contact US!</button>
</div>
</form>
</div>
<!--Form with header-->
</div>
</div>
</div>
#include('...shared.errors')
#endsection
problem is my shared blade work in my first page without problem.but in my second page CSS file don't work .
i test it a lot my self and i find out that when my address bar get more than one / this problem happening .
route of my first page is /home and my second page is /page/about

There’s nothing wrong with #yield, the problem is you’re using a relative path for your CSS files, so if your page is within a folder the URL will become invalid.
Instead, use the url() helper in Laravel to automatically prepend the application’s base URL to your CSS URLs:
<link rel="stylesheet" href="{{ url('css/bts.css') }}">
<link rel="stylesheet" href="{{ url('css/style.css') }}">

Column row align using PHP and MySQL

I want it to be like this, the alignment but different info from database:
It shows like this:
<?php
include_once('connection.php');
$sql = "SELECT * FROM tblstdpro
ORDER BY StdID DESC limit 0, 8";
$result = mysqli_query($conn,$sql);
$count = 0;
while($row = mysqli_fetch_array($result)){
$StudentID="<a href='ProfileRecords.php?id=".$row['StdID']."'>".$row['StdID']."</a>";
$StdName="<a href='ProfileRecords.php?id=".$row['StdID']."'>" . $row['Fname'] . ' ' . $row['Lname'] . "</a>";
?>
<!-- Select distinct stdname, stdimage from tblstdpro order by stdid desc -->
<div class="box-tools pull-right">
<button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
</button>
<button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i>
</button>
</div>
</div>
<!-- /.box-header -->
<div class="box-body no-padding">
<ul class="users-list clearfix">
<li>
<img src="<?php echo $row['StdImage'];?>" width="125px" alt="Student Image">
<a class="users-list-name" href="#"><?php echo "$StdName" ?></a>
<span class="users-list-date"><?php echo "$StudentID" ?></span>
</li>
</li>
<?php
} ?>
</ul>
<!-- /.users-list -->
</div>
<!-- /.box-body -->
<div class="box-footer text-center">
View All Users
</div>
<!-- /.box-footer -->
</div>
<!--/.box -->
</div>
<!-- /.col -->
</div>
<!-- /.row -->
Please show me the code I should add.

I think you need to apply css to ul so that li items are displayed in line and not in a column. This is what I have come up with. Hope this helps..
<style>
/***Student list***/
ul#stdList{
width:fit-content;
margin:15px auto 10px auto;
overflow:hidden;
}
ul#stdList li{
letter-spacing:.05em;
color:#0a93cd;
display:block;
float:left;
font:24px arial;
padding:7px 7px;
margin:0px 4px;
text-align:center;
}
ul#stdList li:hover{
border-color:#444;
}
.img-circle {
border-radius: 50%;
}
</style>
HTML:
<ul class="users-list clearfix" id="stdList">
<li>
<img class="img-circle" src="images/std2.jpg" width="125px" alt="Student Image"><br/>
<a class="users-list-name" href="#">Name</a>
<span class="users-list-date">Student Id</span>
</li>
<li>
<img class="img-circle" src="images/std3.jpg" width="125px" alt="Student Image"><br/>
<a class="users-list-name" href="#">Name</a>
<span class="users-list-date">Student Id</span>
</li>
<li>
<img class="img-circle" src="images/std4.jpg" width="125px" alt="Student Image"><br/>
<a class="users-list-name" href="#">Name</a>
<span class="users-list-date">Student Id</span>
</li>
<li>
<img class="img-circle" src="images/std5.jpg" width="125px" alt="Student Image"><br/>
<a class="users-list-name" href="#">Name</a>
<span class="users-list-date">Student Id</span>
</li>
</ul>

Look closely to the position of your while block. You're not looping a single user (the li element), but a whole bunch of code before and after that. Amongst others the general toolbar buttons, and the whole list itself.

Split a page into 2 sections

I currently have the following code.
The circle buttons are basically navigation buttons. The second div is where I have a collapsable list.
I would like to have the list on the right-hand side of the navigation.
I have attempted to wrap the divs and also use float as left, for some reason it is still not working. If someone could assist?
html, body {
background-color: #fff;
color: rgba(255, 43, 62, 0.84);
font-family: 'Raleway', sans-serif;
font-weight: 100;
height: 100vh;
margin: 10px;
}
.links > a {
color: #ffffff;
padding-top: 0;
padding-right: 50px;
padding-left: 50px;
padding-bottom: 100px;
font-size: 14px;
font-weight: 600;
letter-spacing: .1rem;
text-decoration: none;
text-transform: uppercase;
}
.round-button {
width:8%;
}
.round-button-circle {
width: 100%;
height:0;
padding-bottom: 100%;
margin: 10%;
border-radius: 110%;
border:3px solid #56660d;
overflow:hidden;
background: #abc729;
box-shadow: 0 0 3px gray;
}
.round-button-circle:hover {
background: #56660d;
}
.round-button a {
display:inline-block;
float:left;
width:100%;
padding-top:45%;
padding-bottom:50%;
line-height:1em;
text-align:center;
color: #ffffff;
font-family:Verdana;
font-size:0.70em;
font-weight:bold;
text-decoration:none;
position: relative;
}
<div class="circle-flex-center cirlce-position-ref circle-full-height">
<div class="round-button">
<div class="round-button-circle">
Personal & Placement Details
</div>
</div>
<div class="round-button">
<div class="round-button-circle">
Tutor Details
</div>
</div>
<div class="round-button">
<div class="round-button-circle">
Assignments & Examples
</div>
</div>
<div class="round-button">
<div class="round-button-circle">
Mark Scheme
</div>
</div>
<div class="round-button">
<div class="round-button-circle">
Submission
</div>
</div>
</div>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#collapseone" data-toggle="collapse" data-parent="#accordion">
Monthly Reflection
</a>
</h4>
</div>
<div id="collapseone" class="panel-collapse collapse ">
<div class="panel-body">
sjfhdkjs
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#collapsetwo" data-toggle="collapse" data-parent="#accordion">
Reflection Example
</a>
</h4>
</div>
<div id="collapsetwo" class="panel-collapse collapse">
<div class="panel-body">
adfjkldsf
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#collapsethree" data-toggle="collapse" data-parent="#accordion">
Tutor Visits
</a>
</h4>
</div>
<div id="collapsethree" class="panel-collapse collapse">
<div class="panel-body">
dilfsklsdgs
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#collapsefour" data-toggle="collapse" data-parent="#accordion">
Reports
</a>
</h4>
</div>
<div id="collapsefour" class="panel-collapse collapse">
<div class="panel-body">
sfjksdf
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#collapsefive" data-toggle="collapse" data-parent="#accordion">
Report Example
</a>
</h4>
</div>
<div id="collapsefive" class="panel-collapse collapse">
<div class="panel-body">
difks;ldsf
</div>
</div>
</div>
</div>

A little bit restructured your CSS. I hope that helps.
html, body {
background-color: #fff;
color: rgba(255, 43, 62, 0.84);
font-family: 'Raleway', sans-serif;
font-weight: 100;
height: 100vh;
margin: 10px;
}
.circle-flex-center{
width: 80px;
}
.round-button{
text-align: center;
width: 65px;
height: 65px;
padding: 15px;
margin: 5px;
border:3px solid #56660d;
background-color: #abc729;
border-radius: 110%;
box-shadow: 0 0 3px gray;
float: left;
}
.round-button a{
padding: 5px;
line-height:1em;
color: #ffffff;
font-family:Verdana;
font-size:0.60em;
font-weight:bold;
text-decoration:none;
}
.round-button:hover{
background: #56660d;
}
.panel-group{
float: right;
margin-top: -65%;
}
.links > a {
color: #ffffff;
padding-top: 0;
padding-right: 50px;
padding-left: 50px;
padding-bottom: 100px;
font-size: 14px;
font-weight: 600;
letter-spacing: .1rem;
text-decoration: none;
text-transform: uppercase;
}
<div class="circle-flex-center cirlce-position-ref circle-full-height">
<div class="round-button">
<div class="round-button-circle">
<a href="student-personaldetails" >Personal & Placement Details</a>
</div>
</div>
<div class="round-button">
<div class="round-button-circle">
<a href="student-tutordetails" >Tutor Details</a>
</div>
</div>
<div class="round-button">
<div class="round-button-circle">
<a href="student-placementassignment" >Assignments & Examples</a>
</div>
</div>
<div class="round-button">
<div class="round-button-circle">
<a href="student-markscheme" >Mark Scheme</a>
</div>
</div>
<div class="round-button">
<div class="round-button-circle">
<a href="student-submission" >Submission</a>
</div>
</div>
</div>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#collapseone" data-toggle="collapse" data-parent="#accordion">
Monthly Reflection
</a>
</h4>
</div>
<div id="collapseone" class="panel-collapse collapse ">
<div class="panel-body">
sjfhdkjs
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#collapsetwo" data-toggle="collapse" data-parent="#accordion">
Reflection Example
</a>
</h4>
</div>
<div id="collapsetwo" class="panel-collapse collapse">
<div class="panel-body">
adfjkldsf
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#collapsethree" data-toggle="collapse" data-parent="#accordion">
Tutor Visits
</a>
</h4>
</div>
<div id="collapsethree" class="panel-collapse collapse">
<div class="panel-body">
dilfsklsdgs
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#collapsefour" data-toggle="collapse" data-parent="#accordion">
Reports
</a>
</h4>
</div>
<div id="collapsefour" class="panel-collapse collapse">
<div class="panel-body">
sfjksdf
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#collapsefive" data-toggle="collapse" data-parent="#accordion">
Report Example
</a>
</h4>
</div>
<div id="collapsefive" class="panel-collapse collapse">
<div class="panel-body">
difks;ldsf
</div>
</div>
</div>
</div>

How can I get the two product_ID of the current image in the two carrousel and the pass the two productID in the controller(Codeigniter)

<div class="container">
<!-- TOP -->
<?php var_dump($products['upper']); ?>
<div class="row" style="margin-top: 20px">
<div class="col-md-offset-3 col-md-6">
<h4 class="text-center"><small>STEP 1:</small> Choose your TOP</h4>
<div id="top-carousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<?php foreach ($products['upper'] as $index => $product): ?>
<div class="item <?php echo ($index == 0) ? 'active' : ''; ?>">
<img name="data" value="<?php echo $product['productID'] ?>" class="img-responsive center-block" src="<?php echo base_url();?>image/productimages/<?php echo $product['image'] ?>" style="margin: auto; height: 300px">
<div class="carousel-caption" style="padding: 10px; background-color: black; color: white;">
<?php echo $product['productname']; ?>
</div>
</div>
<?php endforeach ?>
</div>
<a class="left carousel-control" href="#top-carousel" role="button" data-slide="prev">
<i class="fa fa-lg fa-arrow-left" style="top: 45%; position: absolute; color: #000"></i>
</a>
<a class="right carousel-control" href="#top-carousel" role="button" data-slide="next">
<i class="fa fa-lg fa-arrow-right" style="top: 45%; position: absolute; color: #000"></i>
</a>
</div>
</div>
</div>
<?php var_dump($products['lower']); ?>
<!-- BOTTOM -->
<div class="row">
<div class="col-md-offset-3 col-md-6">
<h4 class="text-center"><small>STEP 2:</small> Choose your BOTTOM</h4>
<div id="bottom-carousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<?php foreach ($products['lower'] as $index => $product): ?>
<div class="item <?php echo ($index == 0) ? 'active' : ''; ?>">
<img name="<?php echo $product['productID'] ?>" class="img-responsive center-block" src="<?php echo base_url();?>image/productimages/<?php echo $product['image'] ?>" style="margin: auto; height: 300px">
<div class="carousel-caption" style="padding: 10px; background-color: black; color: white;">
<?php echo $product['productname']; ?>
</div>
</div>
<?php endforeach ?>
</div>
<a class="left carousel-control" href="#bottom-carousel" role="button" data-slide="prev">
<i class="fa fa-lg fa-arrow-left" style="top: 45%; position: absolute; color: #000"></i>
</a>
<a class="right carousel-control" href="#bottom-carousel" role="button" data-slide="next">
<i class="fa fa-lg fa-arrow-right" style="top: 45%; position: absolute; color: #000"></i>
</a>
</div>
</div>
<div class="row">
<div class="col-md-offset-3 col-md-7" style="padding-top: 50px">
<h4 class="text-center"><small>STEP 3:</small> Submit</h4>
<button type="submit" form="hidden_form" class="btn btn-lg btn-block btn-primary">Go!</button>
</div>
</div>
</div>
</form>
<script>
$(document).ready(function() {
var index = $(this).find(".active").index();
// Stop those carousels from spinning
$('.carousel').carousel({
interval : false
});
// Let's figure out what the customer chose on the carousel
// and then put it on the hidden form
$('.carousel').on('slide',function(e){
var slideFrom = $(this).find('.active').index();
var slideTo = $(e.relatedTarget).index();
console.log(slideFrom+' => '+slideTo);
});
});
</script>

The simplest way to get the product_ID data is as below
<img class="img-responsive center-block" src="<?php echo base_url();?>image/productimages/<?php echo $product['image'] ?>" style="margin: auto; height: 300px">
<input type="hidden" value="<?php echo $product['productID'] ?>" name="data" />
Use an <input type="hidden" tag to get the value exactly.

Categories