I am generating new cards with PHP code, but they do not listen to the grid of bootstrap 4.
Raw html code works fine and displays them like they should be.
<div class="container-fluid padding">
<div class="row padding">
<?php foreach ($contacts as $contact): ?>
<div class="col-sm-12 col-md-4">
<div class="card">
<?php echo '<img class="card-img-top" src="data:image/png;base64,'.base64_encode( $contact['horse_image'] ).'"/>'; ?>
<div class="card-body">
<h4 class="card-title"><?=$contact['horse_name']?></h4>
<p class="card-text"><?=$contact['short']?></p>
</div>
</div>
</div>
</div>
<?php endforeach; ?>
</div>
<hr class="my-4">
</div>
This is the code for generated cards from database, it works just fine but bootstrap is not applied on that so it looks very bad like that but it should be looking like that
Is there a way to apply bootstrap after the cards are generated?
Sorry, can't comment yet because of the reputation of 50 :D
In your foreach block is one closing div tag too much ;)
Related
I created a blog category from the menu. In Joomla 4 -> In Blog Layout -> Columns ، I can give a value to the column, but if we increase the value by one, the displayed contents are not balanced. And the "" did not close properly. After a general search, I realized that the contents are arranged as follows :
HTML :
<div class="blog-items">
<div class="blog-item">
<div class="content">1</div>
<div class="blog-item">
<div class="content">2</div>
</div>
<div class="blog-item">
<div class="content">3</div>
<div class="blog-item">
<div class="content">4</div>
<div class="blog-item">
<div class="content">5</div>
</div>
<div class="blog-item">
<div class="content">6</div>
</div>
<div class="blog-item">
<div class="content">7</div>
</div>
</div>
</div>
</div>
</div>
HTML The right way to be :
<div class="blog-items">
<div class="blog-item"><div class="content">1</div></div>
<div class="blog-item"><div class="content">2</div></div>
<div class="blog-item"><div class="content">3</div></div>
<div class="blog-item"><div class="content">4</div></div>
<div class="blog-item"><div class="content">5</div></div>
<div class="blog-item"><div class="content">6</div></div>
<div class="blog-item"><div class="content">7</div></div>
</div>
Note: When I disable "loadTemplate", the loop is displayed correctly and the divisions are closed correctly.
I also checked the information inside the "$this->loadTemplate('item')" but found no problem.
PHP :
<div class="blog-items">
<?php foreach ($this->intro_items as $key => &$item) : ?>
<div class="blog-item">
<?php
$this->item = & $item;
echo $this->loadTemplate('item'); //Included <div class="content">value</div>
?>
</div>
<?php endforeach; ?>
</div>
it's true,fixed.
All content had a tag before page break,
You cannot insert it inside a div. The closing tag will be missing. Close the tag before inserting Read More.
Little did I know that using before page break can be so destructive, and I've been looking for problems with PHP code for about a week now.
Iam trying to get my web page to display all of my shop items in bootstrap 4 cards. 3 wide by however many deep ( i may add pagination another day )
I've got a php foreach loop which populates bootstrap4 cards perfectly. The trouble is they display vertically ( one on top of the other ) . ive tried class= columns which works on dummy divs but not when i integrate with my for each loop.
I ve tried everything regarding bootstrap docs but cant get the cards to display 3 wide and however many deep ( the foreach and the items control this. )
Should i be even using 'cards' or use something else. thx for your time
<div class="container">
<!-- $result = my php code using x-path to get results from xml query goes here. -->
<?php
foreach ( $result as $elements){
?>
<div class="row-fluid ">
<div class="col-sm-4 ">
<div class="card-columns-fluid">
<div class="card bg-light" style = "width: 22rem; " >
<img class="card-img-top" src=" <?php echo $elements->pictures->picture[2]->filename ; ?> " alt="Card image cap">
<div class="card-body">
<h5 class="card-title"><b><?php echo $elements->advert_heading ?></b></h5>
<p class="card-text"><b><?php echo $elements->price_text ?></b></p>
<p class="card-text"><?php echo $elements->bullet1 ?></p>
<p class="card-text"><?php echo $elements->bullet2 ?></p>
Full Details
</div></div></div></div>
<?php
}
}
?>
</div>
</div> <!--container close div -->
As stated, the .row-fluid should be outside of the loop :
<div class="container">
<div class="row-fluid ">
<!-- my php code which uses x-path to get results from xml query. -->
<?php foreach ( $result as $elements) : ?>
<div class="col-sm-4 ">
<div class="card-columns-fluid">
<div class="card bg-light" style = "width: 22rem; " >
<img class="card-img-top" src=" <?php echo $elements->pictures->picture[2]->filename ; ?> " alt="Card image cap">
<div class="card-body">
<h5 class="card-title"><b><?php echo $elements->advert_heading ?></b></h5>
<p class="card-text"><b><?php echo $elements->price_text ?></b></p>
<p class="card-text"><?php echo $elements->bullet1 ?></p>
<p class="card-text"><?php echo $elements->bullet2 ?></p>
Full Details
</div>
</div>
</div>
</div>
<?php endforeach; ?>
</div>
</div> <!--container div -->
You need to move your <div class="row-fluid "> class outside of the foreach loop, otherwise it will create a new row for each class.
Also, as a comment has mentioned, you need to close all your divs correctly.
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.
I have created a single page Webapp using Bootstrap 3. It looks and feels like the standard IOS contacts app. I am using it for personal data on contacts. The contacts are in a sql table which I am querying. I am trying to pass a the PHP mySql id result to an internal #details id element.
The link is:
name
The div is:
<article id="details">
<div class="container-fluid">
<?php
$therecord = $_GET['page'];
$result = $Con ->query("SELECT * FROM `myTable` WHERE `id` = '$therecord'");
$details_row = $result->fetch_array(MYSQLI_BOTH);
?>
<div class="row">
<a href="#on_duty"><div class="col-xs-1"><span class="glyphicon glyphicon-menu-left floatleft apple_back_chevron appleBlue" aria-hidden="true"></span></div>
<div class="col-xs-6"><p class="apple_back_text appleBlue">On Duty Coordinators</p></div></a>
<a href="#edit_coordinators?page=<?php echo $details_row['id'] ;?>"><div class="col-xs-4"><p class="apple_forward_text appleBlue floatright">Edit</p></div>
<div class="col-xs-1"><p class="glyphicon glyphicon-menu-right floatright apple_forward_chevron appleBlue" aria-hidden="true"></p></div></a>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-xs-3">
<img class="img-circle" src="" alt="photo">
</div>
<div class="col-xs-9">
<h2><?php echo $details_row['name'];?></h2>
</div>
</div>
<div class="row">
<div class="apple_list appleGray">
<div class="col-xs-8">
<p class="appleBlue">station</p>
<p class="appleDGray"><?php echo $details_row['station']; ?></p>
</div>
<div class="col-xs-4">
</div>
</div>
</div>
<div class="row">
<div class="apple_list appleGray">
<div class="col-xs-8">
<p class="appleBlue">mobile</p>
<p class="appleDGray"><?php echo $details_row['mobile']; ?></p>
</div>
<div class="col-xs-2"> <img class="img-responsive apple_Glyph" src="_images/sms.png"></div>
<div class="col-xs-2"> <img class="img-responsive apple_Glyph" src="_images/phone.png"></div>
</div>
</div>
</div> <!-- /container -->
</article>
How do I pass a PHP "?page=$recordNo" internally? The page id is being passed, but not getting picked up by the next PHP
Try:
name
It is also very possible you could write it like so:
name
Basically, ? starts the query string and (if included) is always before the page anchor (fragment) # in a URI. See Uniform Resource Identifier for more info.
You can't do this:
name
Because there's an "hashtag", so it's interpreted by the browser as an in-page navigation, and the request isn't sent to the server, unless you catch it with javascript and then perform some ajax request...
This problem seems completely unrelated to PHP or MySQL.
Just look at the generated mark-up, which will look like this (re-indented to improve readability):
<a href="#edit_coordinators?page=333">
<div class="col-xs-4">
<p class="apple_forward_text appleBlue floatright">Edit</p>
</div>
<div class="col-xs-1">
<p class="glyphicon glyphicon-menu-right floatright apple_forward_chevron appleBlue" aria-hidden="true"></p>
</div>
</a>
There're two obvious issues:
The <a> tag is an inline element. It cannot have a whole bunch of block elements inside.
You inject the page GET parameter in the hash part of the URL, which is client-side only and is never sent to the server. It should be ?page=333#edit_coordinators
Said that, I admit I can't fully understand what you have in mind but it you really have a single-page application it has to be coded in JavaScript and possibly use AJAX. With just server-side technologies you can only
build a conventional web application.
Is there a bootstrap class that will fill however many columns have not already been taken?
for example i have this div tag that might be there and it might not if it isnt i want the second div to take up 12 columns, but if it is there only take up 8 columns. like this
<div class="row">
<?php if(something){ ?>
<div class="col-md-4">
<div> </div>
</div>
<?php } ?>
<div class="col-md-fill">
<div> </div>
</div>
</div>
other than using
<div class="col-md-<?php
if($count > 5){
echo "8";
} else {
echo '12';
}
?>">
Sometimes I try something very stupid, but this time my stupidity surprises me...
I've seen than if we append to a div.row a div without any class, this no-class div fills herself the empty space....
Fiddle : http://jsfiddle.net/bhgme789/1/
HTML:
<div class="container">
<div class="row">
<div class="col-md-4 bleu">bleu</div>
<div class="rouge">rouge</div>
</div>
<div class="row">
<div class="col-md-1 bleu">bleu</div>
<div class="rouge">rouge</div>
</div>
<div class="row">
<div class="col-md-9 bleu">bleu</div>
<div class="rouge">rouge</div>
</div>
</div>
You're on the right track. Just finish your if statement with an else. One way, it uses a 4 and 8, the other it uses a 12 and takes up the whole row.
<div class="row">
<?php if(something){ ?>
<div class="col-md-4">
<div> </div>
</div>
<div class="col-md-8">
<div> </div>
</div>
<?php } else { ?>
<div class="col-md-12">
<div> </div>
</div>
<?php } ?>
</div>
When using Bootstrap v4 and v5 you should make use of the 'equal-width' column class col:
.col{
flex: 1 0 0%;
}
I needed this for edge cases where the last column was pushed to the next line caused by rounding errors when the browser calculates the with in pixes using the percentage based column styles. So in some situations my last column with col-2 was pushed down, using just col solved it.
A fiddle like the earlier given example with blue and red cells: http://jsfiddle.net/o14qh386/
I would do it like that, to keep code dry
<div class="row">
<div class="<?php if($something){echo 'col-md-push-4 col-md-8'}else{echo 'col-md-12'}">
</div>
</div>
I now noticed that you might want to put something if is in 4. in this case this might not be useful. If you just want to fulfil the space this is your solution