logo
down
shadow

bootstrap 4 cards with php foreach loop


bootstrap 4 cards with php foreach loop

By : user2185628
Date : November 22 2020, 04:01 AM
seems to work fine Iam trying to get my web page to display all the shop items in bootstrap 4 cards. 3 wide by however many deep ( i may add pagination another day ) , As stated, the .row-fluid should be outside of the loop :
code :
<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>
                        <a href="#" class="btn btn-secondary">Full Details</a>
                    </div>
                </div>
            </div>
        </div>
    <?php endforeach; ?>
    </div>
</div> <!--container div  -->


Share : facebook icon twitter icon
Is there a way to horizontally display a bootstrap cards in a razor foreach loop?

Is there a way to horizontally display a bootstrap cards in a razor foreach loop?


By : virtu
Date : March 29 2020, 07:55 AM
should help you out Remove the line breaks, and add display:inline-block; to the style of the div with class "card".
Here is an example with 3 instances of the div:
code :
<div class="card" style="width: 20rem; text-align:center;display:inline-block;">
  <img class="card-img-top" src="https://placekitten.com/g/200/200" alt="Card image cap" height="200" width="200" style="border-radius:.60rem;">
  <div class="card-block">
    <h4 class="card-title">Name</h4>
    <p class="card-text">Some quick example text to build</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

<div class="card" style="width: 20rem; text-align:center;display:inline-block;">
  <img class="card-img-top" src="https://placekitten.com/g/200/200" alt="Card image cap" height="200" width="200" style="border-radius:.60rem;">
  <div class="card-block">
    <h4 class="card-title">Name</h4>
    <p class="card-text">Some quick example text to build</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

<div class="card" style="width: 20rem; text-align:center;display:inline-block;">
  <img class="card-img-top" src="https://placekitten.com/g/200/200" alt="Card image cap" height="200" width="200" style="border-radius:.60rem;">
  <div class="card-block">
    <h4 class="card-title">Name</h4>
    <p class="card-text">Some quick example text to build</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>
generating HTML (bootstrap cards) from AJAX call to JSON file when some cards have images and some don't

generating HTML (bootstrap cards) from AJAX call to JSON file when some cards have images and some don't


By : user757015
Date : March 29 2020, 07:55 AM
this one helps. I am using Shuffle.JS, here is the javascript that generates the cards: , Underneath all your vars, before the return:
code :
if (blogimage === null) { // Depending on what comes back from JSON just check if it's empty/null/length is 0
    // return markup without <img> tag
}
else {
    // return markup you have now
}
Generating Dynamic Cards HTML cards from a Javascript array and Bootstrap in different rows and Columns

Generating Dynamic Cards HTML cards from a Javascript array and Bootstrap in different rows and Columns


By : shohelrana
Date : March 29 2020, 07:55 AM
wish helps you There are thousand ways to do it, i just want to example one using the modulo operator. You could do it in one loop like this:
code :
// dont use row as a container anymore, take the parent element
var container = document.getElementById("row-container");
var content="";    
teamData.forEach(function(result,i){
  if(i == 0){
    //add start row 
    content+= '<div class="row">'
  }
  // add content
  content += '<div class="col....'

  if(i!=0 && i%5 == 0){

    // add end of row ,and start new row on every 5 elements
    content += '</div><div class="row">'
  }

});
// after looping dont forget to close the last row 
content += '</div>'
container.innerHTML += content;
Bootstrap cards - text coming out of the cards

Bootstrap cards - text coming out of the cards


By : user3654602
Date : March 29 2020, 07:55 AM
around this issue 1) To achive the below sort of wrapping move your style="overflow-y: auto;" from class="card-body" to class="card mysmallCcards"
code :
.mysmallCcards{
 width: 100%;
 background: #FFFFFF 0% 0% no-repeat padding-box;
 box-shadow: 0px 3px 20px #BCBCCB47;
 border-radius: 8px;
 border: none;
 margin-top: 20px;

 overflow-y: auto;
 /*overflow-x: hidden;*/
}

.brandName{
 text-align: left;
 font-family: 'Noto Sans', sans-serif;
 font-size: 22px;
 letter-spacing: 0;
 color: #4D4F5C;
 /*white-space: nowrap; 
 overflow: hidden; 
 text-overflow: ellipsis;
 line-height: 0px;*/
}
Bootstrap 4: Cards: How do I make horizontal repeating cards in three columns

Bootstrap 4: Cards: How do I make horizontal repeating cards in three columns


By : Willisney Garcia San
Date : March 29 2020, 07:55 AM
this will help Use a single "row" div and put any number of "col-sm-4" divs inside. It will automatically break after 3 columns.
code :
<div class="row">
  <div class="col-sm-4">
    <div class="card">
      Your card
    </div>
  </div>
  <div class="col-sm-4">
    <div class="card">
      Your card
    </div>
  </div>
  <div class="col-sm-4">
    <div class="card">
      Your card
    </div>
  </div>
  <div class="col-sm-4">
    <div class="card">
      Your card
    </div>
  </div>
  <div class="col-sm-4">
    <div class="card">
      Your card
    </div>
  </div>
  <div class="col-sm-4">
    <div class="card">
      Your card
    </div>
  </div>
  <div class="col-sm-4">
    <div class="card">
      Your card
    </div>
  </div>
</div>
Related Posts Related Posts :
  • Laravel : How to retrieve data from inside an nested array
  • Codeigniter search with comma-separated values
  • upload file on laravel 5.7
  • Wordpress - How to display 10 users only?
  • Display the results in the HTML
  • PHP - mysqli_fetch_assoc, 2 results then into an array
  • mysqli update database receiving email and password reset token
  • PHP mailer not creating new lines
  • IF / OR statement causes Call to undefined function() error. Why?
  • How to read Protocol Buffers delimited I/O functions
  • Creating a link from Google Chart timeline item
  • Rewrite PHP variables from URL with .htaccess
  • Undesired output for php array creation
  • Symfony 4 - custom authentication FosUserBundle
  • laravel: cant push object property to array
  • When sharing on facebook, showing angular brackets in title and decription
  • Undefined function: 7 ERROR: operator does not exist: public.ltree public.< public.ltree[]
  • Generate a CSV in php from Array or Object
  • LibreOffice convert PDF to Word as textbox instead normal document
  • php laravel swift email sending problems
  • Reload PHP file in command line PHP-CLI
  • how do I fetch a certain part out of an database?
  • CodeIgniter URL Route with ID and title
  • Add a header to each column
  • How can I loop stdClass in PHP?
  • Four arrays in for each loop
  • Codeigniter return not found on the server
  • PHP Codeigniter Do Upload Function Does Not Work
  • Implement REST API Symfony 3
  • how to add show data button in Yajrabox
  • My WampServer doesnt have apache setting in tray icon
  • Translate checkout fields validation error notices in Woocommerce
  • Embedding nested form type fields in empty symfony form
  • PHP Laravel orderby not working if using `count`
  • Laravel 5.7 my model from my parameter return's empty when i dump it
  • How to pass input value as array instead of passing only one value where array_walk is used in PHP?
  • Replace illegal charactes in a text by underscore in PHP
  • PHP / JSON - Return large string result in error
  • Yii2 DI container: registering same class twice, but with different constructor parameters
  • Creating Subdirectories with a for loop
  • Wordpress get most popular posts in current post category
  • Replace linebreak in specific piece of text in file
  • Update database that has same key with using a new different values
  • Problems with Curl in Discord Oauth2
  • How to remove all lines in file till a specific word occures PHP
  • How to use Join in Codeigniter for update Query
  • PHP DOMDocument: may a text node be reused?
  • How to read Armenian texts from Laravel MSSQL database
  • How to view image and pdf files preview in yii2 kartik multiple file upload in update form
  • Which one is best and faster method ?(making drop down method)
  • Using preg_match to get content between tags
  • Laravel 5.7 Eloquent
  • How to combine array inside foreach loop
  • Wordpress-Stripe Integration: Fatal error: Uncaught Error: Class 'Stripe' not found
  • Redirect user to original url from age verification
  • How to update only one input in Laravel form?
  • How to add language translation in JSON file in prestashop
  • Interface 'Monolog\ResettableInterface' not found when running a new project
  • Adding strings when using echo in foreach PHP
  • do-while loop only runs once
  • shadow
    Privacy Policy - Terms - Contact Us © bighow.org