i have a problem with css row and columns, when i include php file in html my columns only arrange vertically
this is for my dashboard website, and i have try to find solution but no luck
when i put code like this
<div class="row">
<div class="col-md-4" id="list">
<div class="bg-mattBlackLight my-2 p-4">
<h1>HELLO</h1>
</div>
</div>
<div class="col-md-4" id="list">
<div class="bg-mattBlackLight my-2 p-4">
<h1>HELLO</h1>
</div>
</div>
<div class="col-md-4" id="list">
<div class="bg-mattBlackLight my-2 p-4">
<h1>HELLO</h1>
</div>
</div>
</div>
Works perfectly with column size and placement
(screen shot: https://ibb.co/tqRvBtL)
but when i include php page like this
<div class="row">
<div class="col-md-4" id="list">
<div class="bg-mattBlackLight my-2 p-4">
<?php include 'php/user-list.php';?>
</div>
</div>
<div class="col-md-4" id="list">
<div class="bg-mattBlackLight my-2 p-4">
<h1>HELLO</h1>
</div>
</div>
<div class="col-md-4" id="list">
<div class="bg-mattBlackLight my-2 p-4">
<h1>HELLO</h1>
</div>
</div>
</div>
the columns arrange is vertical
(screen shot: https://ibb.co/Q6qQJDJ)
Dose anybody know what is wrong?
Make sure you have closed all the open tags inside PHP files
Related
I would like to ask how to pull categories using tabs. I was able to pull all the items on one tab but I could not pull them per category. here is my code. The data comes from the database and seems to work on All items but I could not figure out how to pull them individually. I need some help with you expertise.
<div class="tab-content">
<div class="tab-pane container active" id="home">...</div>
<div class="tab-pane container fade" id="allItems">All Items
<div>
<div class="row">
<div class="col-12">
<div class="row">
#foreach($items as $per_item)
<div class="col-lg-4 col-6">
<div class="card mb-3">
<img src="{{$per_item->image_path}}" class="card-img-top">
<div class="card-body">
<small>{{$per_item->category->name}}</small>
<h4 class="card-title">
<a href="/items/{{$per_item->id}}">
{{$per_item->name}}
</a>
</h4>
<p class="card-text">{{$per_item->description}}</p>
<h3>{{$per_item->price}}</h3>
<form action="/cart/{{$per_item->id}}" method="POST">
#csrf
<div class="row">
<div class="col-12 col-md-5 col-lg-12 mb-2">
<input type="number" name="quantity" id="quantity"
class="w-100">
</div>
<div class="col-12 col-md-7 col-lg-12 mb-2">
<button type="submit" class="btn btn-primary">Add To
Cart</button>
</div>
</div>
</form>
</div>
</div>
</div>
#endforeach
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane container fade" id="consumables">Consumables
<div>
</div>
</div>
<div class="tab-pvane container fade" id="pnuematicTools">Pnuematic
Tools</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'); ?>
I am generating html code using php. I have some information stored in an array called $persons and I'm trying to generate a bootstrap card for each $person:
<div class="container">
<div class="row">
<?php foreach ($persons as $person): ?>
<div class="card col-md-3 m-1">
<img class="card-img-top" src="<?=person['img_src']?>" alt="<?=$person['name']?>">
<div class="card-block">
<h4 class="card-title"><?=$person['name']?></h4>
<p class="card-text"><?=$person['info']?></p>
</div>
</div>
<?php endforeach; ?>
</div>
</div>
Everything works fine when I remove m-1 class, but as soon as I add m-1 class, margin causes the last div to go to next line. I think lack of space causes this problem. How can I fix this problem? How to have margin between divs without the last div going to the next line?
You should have a separate div for the card since it's display:flex. Also, just use my-1 for margin-top and margin-bottom so that x-axis space is not effected...
<div class="container">
<div class="row">
<?php foreach ($persons as $person): ?>
<div class="col-md-3 my-1">
<div class="card">
<img class="card-img-top" src="<?=person['img_src']?>" alt="<?=$person['name']?>">
<div class="card-block">
<h4 class="card-title"><?=$person['name']?></h4>
<p class="card-text"><?=$person['info']?></p>
</div>
</div>
</div>
<?php endforeach; ?>
</div>
</div>
https://www.codeply.com/go/78AmkbWrLi
The easiest solution would be to just put another div inside the col, which applies the margin:
<div class="container">
<div class="row">
<?php foreach ($persons as $person): ?>
<div class="card col-md-3">
<div class="m-1"> <!-- NEW -->
<img class="card-img-top" src="<?=person['img_src']?>" alt="<?=$person['name']?>">
<div class="card-block">
<h4 class="card-title"><?=$person['name']?></h4>
<p class="card-text"><?=$person['info']?></p>
</div>
</div>
</div>
<?php endforeach; ?>
</div>
</div>
Or if you don't want to add another div, just add the m-1 class to the card-block.
Sorry for title i couldn't think better title!
anyway, this is my blog page code:
#extends('layouts.frontend_index')
#section('title', 'Blog')
#section('content')
<div class="container">
<div class="row" style="margin-bottom:30px;">
<div class="col-md-8">
<div class="row">
#forelse($posts as $post)
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12" style="margin-bottom:15px;">
<div class="card card2">
<div class="cardimg">
<img src="{{ url('images/') }}/{{ $post->image }}" class="card-img-top" style="width:100%; height:auto; max-height:500px;" alt="{{ $post->title }}">
</div>
<div class="card-block">
<h4 class="card-title">{{$post->title}}</h4>
<p class="card-text">{!! str_limit($post->body, 10) !!}</p>
<p><a class="btn btn-block btn-link" href="{{ route('frontshow', $post->slug ) }}">Read More <i class="fa fa-arrow-right"></i></a></p>
</div>
</div>
</div>
#empty
<p>No Post Available yet!</p>
<div class="text-center">
<a class="btn btn-error" href="{{url('/')}}">Back to Main Page</a>
</div>
#endforelse
<div class="col-md-12 text-center">
{{$posts->links()}}
</div>
</div><!--end row-->
</div><!--end col-md-8-->
<div class="col-md-4">
<h3>Get Latest Updates...</h3>
<a target="_blank" href="https://t.me/studiotjd"><div id="telegram"></div></a>
<a target="_blank" href="https://www.facebook.com/studiotjd"><div id="facebook"></div></a>
<a target="_blank" href="https://www.instagram.com/studiotjd/"><div id="instagram"></div></a>
</div><!--end col-md-4-->
</div><!--end row-->
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-4 span3 wow rollIn" style="animation-delay: 1s;"><div id="Library"></div></div><!--end col-md-4-->
<div class="col-md-4 span3 wow bounceInDown center" style="animation-delay: 1s;"><div id="Library2"></div></div><!--end col-md-4-->
<div class="col-md-4 span3 wow bounceInRight" style="animation-delay: 1s;"><div id="Library3"></div></div><!--end col-md-4-->
</div><!--end row-->
</div><!--end col-md-12-->
</div><!--end row-->
</div>
#endsection
here is how it looks like in view:
I tried almost everything to fix this issue but nothing works!
As you can see in my inspect all col-md-4 goes under first col-md-4 and i don't know why
Is there anyone knows how to fix this issue?
try this
{{ strip_tags(str_limit($post->body, 10)) }}
I think you have html element stored in your database, and you are just using str_limit so the tags in your body is not closed.
problem is a height of div, check it on the inspector code. 1 px or more is
I am trying to include different php files in the index.php file
on my webpage
http://www.e-lang.de/index.php
but the contents are included as simple text. What I want is that they should be proper DOM elements not the text.
here is my index.php
<div class="container">
<div class="navbar mt10">
<div class="navbar-inner">
اردو ایڈیٹر
<ul class="nav">
<li class="active">صفحۂ اول</li>
<li>رابطہ</li>
</ul>
</div>
</div>
<?php include_once "editor.php"; ?>
<!-- hidden inline form -->
<?php include_once "emailform.html"; ?>
</div>
and editor.php looks like
<div class="well widget">
<div class="widget-header">
<h3 class="title">اُردوھے جس کا نام</h3>
</div>
<div class="row">
<div class="span7">
<form method="post" action="save.php" id="text-container">
<input type="hidden" name="save" value="0" id="savetext">
<textarea rows="22" id="text-urdu" name="text" class="span7" dir="rtl" style="font: normal 25px Arial"></textarea>
</form>
<div class="rel">
<div id="counter"></div>
</div>
</div>
<div class="span4" id="help-wrapper">
</div>
</div>
<div class="row">
<div class="span11">
<div class="well widget" id="buttons-listing">
<ul class="listing">
<li>Print</li>
<li>Save</li>
<li>pdf</li>
<li></li>
<li><a href="#" class="button" id="btn_email" >E-Mail</a></li>
</ul>
</div>
</div>
</div>
</div>
There is no actual PHP in editor.php. Please remove the first line (containing the PHP open tag, <?php) from the editor.php file, as that should only surround PHP code. For standard HTML, you don't need to use the <?php tag.