I'm trying to display the content (which are presented in cards) of my page in three different columns using bootstrap 4 row class. How do I go about it?
I'm using Laravel 5.8 and bootstrap 4. Other bootstrap functions like carousel and nav bar are working properly.
The code for the content in the main blade file-views/layout/app.blade.php looks like this;
<div class="container-fluid">
#yield('content')
</div>
Then that for the page I desire the layout-views/pages/secondpage.blade.php is;
#extends('layout.app')
#section('content')
<div class="col-12 text-center">
<h2> Page caption</h2>
</div>
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="card border-white">
<div class="card-header">Heading 1</div>
<div class="card-body">
<p class="card-text">Some quick example text to build
on the card
title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="card border-white">
<div class="card-header">Heading 2</div>
<div class="card-body">
<p class="card-text">Some quick example text to build
on the card
title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="card border-white">
<div class="card-header">Heading 3</div>
<div class="card-body">
<p class="card-text">Some quick example text to build
on the card
title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
</div>
</div>
#endsection
I expect to see the cards arranged in three different columns, but they are all in a single column.
You have an extra div close tag, for all three
thats why you get all in one column
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="card border-white">
<div class="card-header">Heading 1</div>
<div class="card-body">
<p class="card-text">Some quick example text to build
on the card
title and make up the bulk of the card's content.</p>
</div>
</div>
<!--</div>-->
</div>
<div class="col-sm-6 col-md-4">
<div class="card border-white">
<div class="card-header">Heading 2</div>
<div class="card-body">
<p class="card-text">Some quick example text to build
on the card
title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<!--</div>-->
<div class="col-sm-6 col-md-4">
<div class="card border-white">
<div class="card-header">Heading 3</div>
<div class="card-body">
<p class="card-text">Some quick example text to build
on the card
title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<!--</div>-->
</div>
This is causing due to extra div after each col-md-4 div. I have made some correction in HTML.
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="card border-white">
<div class="card-header">Heading 1</div>
<div class="card-body">
<p class="card-text">Some quick example text to build
on the card
title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="card border-white">
<div class="card-header">Heading 2</div>
<div class="card-body">
<p class="card-text">Some quick example text to build
on the card
title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="card border-white">
<div class="card-header">Heading 3</div>
<div class="card-body">
<p class="card-text">Some quick example text to build
on the card
title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
</div>
Related
I have created a home page in codeigniter and have created a home controller in it. Index method has been created in the home controller, in which all articles have been shown.
Now another function is added in the home controller in which to show all articles of single category, I also made model but in this show all articles in all categories.
If I am calling only method then query is working but showing in home html page then all data showing all category.please help me
<?php
class Home extends CI_Controller{
function index(){
$this->load->model('Article_model');
$param['offset']=4;
$param['limit']=0;
$articles=$this->Article_model->getArticlesFront($param);
$data['articles']=$articles;
$this->load->view('front/home',$data);
}
function computerCategory(){
$this->load->model('Article_model');
$param['offset']=4;
$param['limit']=0;
$articles=$this->Article_model->getComputerArticlesFront($param);
$data['articles']=$articles;
$this->load->view('front/computer_category',$data);
}
}
?>
/*front computer category methods*/
function getComputerArticlesFront($param= array()){
$query = $this->db->get('articles');
if(isset($param['offset']) && isset($param['limit'])){
$this->db->limit($param['offset'],$param['limit']);
}
if(isset($param['q'])){
$this->db->or_like('title',trim($param['q']));
$this->db->or_like('author',trim($param['q']));
}
if(isset($param['category_id'])){
$this->db->where('category',$param['category_id']);
}
$this->db->select('articles.*,categories.name as category_name');
$this->db->where('articles.category',43);
$this->db->order_by('articles.created_at','DESC');
$this->db->join('categories','categories.id=articles.category','left');
$query = $this->db->get('articles');
//echo $this->db->last_query();
$articles = $query->result_array();
//echo $this->db->last_query();
return $articles;
}
<!--computer news start-->
<?php if(!empty($articles)){?>
<div class="pb-4 pt-4">
<div class="container">
<div class="row gx-4">
<div class="p-3 border bg-success text-white">
<h3>कंप्यूटर</h3>
</div>
</div>
<div class="row pb-3 pt-4">
<?php foreach ($articles as $article) {?>
<div class="col-md-3">
<div class="card">
<?php if(file_exists('./public/uploads/articles/thumb_admin/'.$article['image'])){?>
<img src="<?php echo base_url('public/uploads/articles/thumb_admin/'.$article['image'])?>" class="card-img-top" alt="">
<?php }?>
<div class="card-body">
<p class="card-text"><?php echo $article['title'];?></p>
Go somewhere
</div>
</div>
</div><!--card 1-->
<?php }?>
</div>
</div>
</div><!--latest blogs-->
<?php }?>
<!--computer news end-->
this page is being open but when i put this page then show all category
just like
<?php $this->load->view('front/header'); ?>
<div class="container pt-4 pb-4">
<h3 class="pb-3">About Company</h3>
<p class="text-muted"> Nike clearly knows its audience and makes their mission obvious to them as soon as they land on the About Us page. There's no question that the visitor is in the right place and understands exactly what Nike has set out to do. </p>
<p class="text-muted"> Nike clearly knows its audience and makes their mission obvious to them as soon as they land on the About Us page. There's no question that the visitor is in the right place and understands exactly what Nike has set out to do. </p>
</div>
<!--computer category list-->
<?php if(!empty($articles)){?>
<?php $this->load->view('front/computer_category');?>
<?php }?>
<!--yoga news start-->
<?php if(!empty($articles)){?>
<div class="pb-4 pt-4">
<div class="container">
<div class="row gx-4">
<div class="p-3 border bg-success text-white">
<h3>योग</h3>
</div>
</div>
<div class="row pb-3 pt-4">
<?php foreach ($articles as $article) {?>
<div class="col-md-3">
<div class="card">
<?php if(file_exists('./public/uploads/articles/thumb_admin/'.$article['image'])){?>
<img src="<?php echo base_url('public/uploads/articles/thumb_admin/'.$article['image'])?>" class="card-img-top" alt="">
<?php }?>
<div class="card-body">
<p class="card-text"><?php echo $article['title'];?></p>
Go somewhere
</div>
</div>
</div><!--card 1-->
<?php }?>
</div>
</div>
</div><!--latest blogs-->
<?php }?>
<!--yoga news end-->
<!--lifestyle news start-->
<?php $this->load->view('front/lifestyle');?>
<!--lifestyle news end-->
<!--technology news start-->
<?php if(!empty($articles)){?>
<div class="pb-4 pt-4">
<div class="container">
<div class="row gx-4">
<div class="p-3 border bg-success text-white">
<h3>लाइफस्टाइल</h3>
</div>
</div>
<div class="row pb-3 pt-4">
<?php foreach ($articles as $article) {?>
<div class="col-md-3">
<div class="card">
<?php if(file_exists('./public/uploads/articles/thumb_admin/'.$article['image'])){?>
<img src="<?php echo base_url('public/uploads/articles/thumb_admin/'.$article['image'])?>" class="card-img-top" alt="">
<?php }?>
<div class="card-body">
<p class="card-text"><?php echo $article['title'];?></p>
Go somewhere
</div>
</div>
</div><!--card 1-->
<?php }?>
</div>
</div>
</div><!--latest blogs-->
<?php }?>
<!--technology news end-->
<div class="bg-light pb-4">
<div class="container">
<h3 class="pb-3 pt-4">OUR SERVICES</h3>
<div class="row">
<div class="col-md-3">
<div class="card">
<img src="<?php echo base_url('public/images/box1.jpg');?>" class="card-img-top" alt="">
<div class="card-body">
<h5 class="card-title">Website Development</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
</div><!--card 1-->
<div class="col-md-3">
<div class="card">
<img src="<?php echo base_url('public/images/box2.jpg');?>" class="card-img-top" alt="">
<div class="card-body">
<h5 class="card-title">Website Development</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
</div><!--card 1-->
<div class="col-md-3">
<div class="card">
<img src="<?php echo base_url('public/images/box3.jpg');?>" class="card-img-top" alt="">
<div class="card-body">
<h5 class="card-title">Website Development</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
</div><!--card 1-->
<div class="col-md-3">
<div class="card">
<img src="<?php echo base_url('public/images/box4.jpg');?>" class="card-img-top" alt="">
<div class="card-body">
<h5 class="card-title">Website Development</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
</div><!--card 1-->
</div>
</div>
</div><!--our services-->
<?php if(!empty($articles)){?>
<div class="pb-4 pt-4">
<div class="container">
<h3 class="pb-3 pt-4">LATEST BLOGS</h3>
<div class="row">
<?php foreach ($articles as $article) {?>
<div class="col-md-3">
<div class="card">
<?php if(file_exists('./public/uploads/articles/thumb_admin/'.$article['image'])){?>
<img src="<?php echo base_url('public/uploads/articles/thumb_admin/'.$article['image'])?>" class="card-img-top" alt="">
<?php }?>
<div class="card-body">
<p class="card-text"><?php echo $article['title'];?></p>
Go somewhere
</div>
</div>
</div><!--card 1-->
<?php }?>
<!--<div class="col-md-3">
<div class="card">
<img src="<?php echo base_url('public/images/box2.jpg');?>" class="card-img-top" alt="">
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
</div>card 1-->
<!--<div class="col-md-3">
<div class="card">
<img src="<?php echo base_url('public/images/box3.jpg');?>" class="card-img-top" alt="">
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
</div>card 1-->
<!--<div class="col-md-3">
<div class="card">
<img src="<?php echo base_url('public/images/box4.jpg');?>" class="card-img-top" alt="">
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
</div>card 1-->
</div>
</div>
</div><!--latest blogs-->
<?php }?>
load->view('front/footer'); ?>
then page show
in this page all category article show
i requesting to all please help me
here is the function is given below
public function index(){
$student=Administration::Where('payment',1)->get();
//dd($student);
return view('HallAuthority.index',compact('student'));
}
Here is the view blade
<div class="container-fluid page-body-wrapper">
<div class="row row-offcanvas row-offcanvas-right">
<!-- partial:partials/_sidebar.html -->
#include('HallAuthority.inc.sidebar')
<!-- partial -->
<div class="content-wrapper">
<div class="row">
<div class="col-sm-6 col-md-3 grid-margin">
<div class="card">
<div class="card-body">
{{$student->count()}}
<h2 class="card-title">Total sutdent Student</h2>
</div>
<div class="dashboard-chart-card-container">
<div id="dashboard-card-chart-1" class="card-float-chart"></div>
</div>
</div>
</div>
<div class="col-sm-6 col-md-3 grid-margin">
<div class="card">
<div class="card-body">
<h2 class="card-title">Total Department</h2>
</div>
<div class="dashboard-chart-card-container">
<div id="dashboard-card-chart-2" class="card-float-chart"></div>
</div>
</div>
</div>
<div class="col-sm-6 col-md-3 grid-margin">
<div class="card">
<div class="card-body">
<h2 class="card-title">stock price Price</h2>
</div>
<div class="dashboard-chart-card-container">
<div id="dashboard-card-chart-3" class="card-float-chart"></div>
</div>
</div>
</div>
<div class="col-sm-6 col-md-3 grid-margin">
<div class="card">
<div class="card-body">
<h2 class="card-title">Revenue</h2>
</div>
<div class="dashboard-chart-card-container">
<div id="dashboard-card-chart-4" class="card-float-chart"></div>
</div>
</div>
</div>
</div>
</div>
<!-- content-wrapper ends -->
<!-- partial:partials/_footer.html -->
<div class="card card-body">
<div class="card-header text-center">
Mahfujur#2019
</div>
</div>
<!-- partial -->
</div>
<!-- row-offcanvas ends -->
</div>
The Route file is given below
Route::get('/student/hall','HallController#index')->name('student.hall');
Given this type an error
Undefined variable: student (View: C:\xampp\htdocs\ProjectFinall\resources\views\HallAuthority\index.blade.php) (View: C:\xampp\htdocs\ProjectFinall\resources\views\HallAuthority\index.blade.php)*
I get the value properly but i cannot compact this value to the view pages its always shows that it is undefined value i am totally fed up to solve this . Please anyone help me.
Try this
public function index(){
$student=Administration::Where('payment',1)->count();
return view('HallAuthority.index',compact('student'));
}
<div class="card-body">
{{$student}}
<h2 class="card-title">Total sutdent Student</h2>
</div>
I want the information tag to be at the right side of the web page. Rest of the things are in the middle of the page. While I am not able to move the information to the right side. Also, because of it the footer disappeared. While I remove the information code, the footer works. Please help me right-align the information widget and also have the footer too.
<div class="container">
<div class="card border-light mb-3 text-center">
<p class="card-header">Videos</p>
</div>
<div id="userSuccess" class="hide" role="alert">
<div id="successUserContent"></div>
</div>
<div class="row" id="userVid">
<?php
$allVid = Schema::getAll();
for ($i = 0; $i < count($allVid); $i++) {
echo <<<HTML
<div class="col-lg-4 col-md-6 mb-4">
<div class="card h-100">
<div class="card-body">
<img class="card-img-top" src="http://placehold.it/700x400" alt="">
<h4 class="card-title">{$allVid[$i]->getTitle()} </h4>
</div>
</div>
</div>
HTML;
}
?>
</div>
<div class="row">
<div class="col-md-4 order-md-2 mb-4">
<div class="card my-4">
<h5 class="card-header">Information</h5>
<div class="card-body">
<div class="row">
<ul class="list-unstyled mb-0">
<li>
...
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<?php
require_once './page/footer.php';
?>
For right align, you'll want to add the class of "justify-content-end" after your "row" class.
<div class="row justify-content-end"><!-- ADDED HERE-->
<div class="col-md-4 order-md-2 mb-4">
<div class="card my-4">
<h5 class="card-header">Information</h5>
<!-- REST OF YOUR CODE-->
For your footer, you'll need to wrap your URL in parenthesis.
<?php require_once('/yourdirectory/yourfooter.php'); ?>
My program is fetching 3 customer records from database in PHP language.i want to show the return result from database in a bootstrap
grid view like 3 col of col-sm-4 in one row. Right now, it shows all
the result in one vertical line.Next thing i want is if have more
records, then the next record should show in next line and allow only
3 records in one line every time i fetch records from database.
Looking for the solution.
<div class="container-fluid" style="margin:0px auto;height:auto;border:1px solid yellow;">
#foreach($reviews as $review)
<div class="row">
<div class="col-sm-12">
<div class="col-sm-4">
<div>name is:- {{$review->name}}</div>
<div>course is:-{{$review->course}}</div>
<div>designation is:-{{$review->designation}}</div>
<div>company is:-{{$review->company}}</div>
<div>comments:-{{$review->comments}} </div>
<div>status:{{$review->status}} </div>
<div>priority:{{$review->priority}}</div>
<div>review date:-{{$review->review_date}}</div>
<?php
$image =stripslashes($review->image);
?>
<div>images:<img src='{{asset("$image")}}'></div>
</div>
</div>
</div>
#endforeach
</div>
You could do something like this
<div class="row">
<div class="col-sm-4">data 1</div>
<div class="col-sm-4">data 2</div>
<div class="col-sm-4">data 3</div>
<div class="col-sm-4">data 4</div>
<div class="col-sm-4">data 5</div>
<div class="col-sm-4">data 6</div>
.
.
.
.
.
</div>
This will add 3 columns in each row for N number of data automatically!
Move the row outside of the loop as shown below
Also, I'm not sure why you have a col-sm-12 and a col-sm-4? I'm sure that will confuse things
<div class="row">
#foreach($reviews as $review)
<!--<div class="col-sm-12"> -->
<div class="col-sm-4">
<div>name is:- {{$review->name}}</div>
<div>course is:-{{$review->course}}</div>
<div>designation is:-{{$review->designation}}</div>
<div>company is:-{{$review->company}}</div>
<div>comments:-{{$review->comments}} </div>
<div>status:{{$review->status}} </div>
<div>priority:{{$review->priority}}</div>
<div>review date:-{{$review->review_date}}</div>
<?php
$image =stripslashes($review->image);
?>
<div>images:<img src='{{asset("$image")}}'></div>
</div>
<!-- </div> -->
#endforeach
</div>
I am trying to make a dynamic column layout with the help of twitter bootstrap. All yellow blocks are generated in a for loop
Example
<div class="container">
<div class="col-lg-4">
Sidebar
</div>
<div class="col-lg-8">
<div class="col-lg-4"></div>
<div class="col-lg-4"></div>
<div class="col-lg-4"></div>
<div class="col-lg-4"></div>
<div class="col-lg-4"></div>
<div class="col-lg-4"></div>
<div class="col-lg-4"></div>
<div class="col-lg-4"></div>
<div class="col-lg-4"></div>
<div class="col-lg-4"></div>
</div>
You are missing the row elements:
<div class="container">
<div class="row">
<div class="col-sm-3">
Sidebar
</div>
<div class="col-sm-9">
<div class="row">
<div class="col-sm-4">1</div>
<div class="col-sm-4">2</div>
<div class="col-sm-4">3</div>
</div>
<div class="row">
<div class="col-sm-4">4</div>
<div class="col-sm-4">5</div>
<div class="col-sm-4">6</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-3">7</div>
<div class="col-sm-3">8</div>
<div class="col-sm-3">9</div>
<div class="col-sm-3">10</div>
</div>
</div>
Take a look at this demo bootply