Skip to content

Instantly share code, notes, and snippets.

@levonlee

levonlee/README.md

Created August 16, 2019 18:11
Show Gist options
  • Save levonlee/ce6a1a97647104ecaf159a77c8637482 to your computer and use it in GitHub Desktop.
Save levonlee/ce6a1a97647104ecaf159a77c8637482 to your computer and use it in GitHub Desktop.
Download ZIP
PHP Bootstrap 4 Card Deck in Columns
Raw
index.php
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Card Deck in Columns</title>
</head>
<body>
<div class="container">
<h1>Card Deck in Columns</h1>
<?php
$total_cards = isset( $_GET['cards'] ) ? intval( $_GET['cards'] ) : 6;
$num_cols = isset( $_GET['columns'] ) ? explode( ',', $_GET['columns'] ) : explode( ',', '2,3,4,4' );
// [2,3,4,4] :: 2 columns for sm, 3 columns for md, 4 columns for lg, 4 columns for xl
printf( '<p>Total Cards: %s</p>', $total_cards );
printf( '<p>Columns for breakpoints: %s</p>', print_r( $num_cols, 1 ) );
function bs4_card_deck_insert_wrappers_for_breakpoints( $i, $num_cols ) {
if ( 0 == $i % $num_cols[0] ) {
// wrap every $num_cols[0] for sm
echo '<div class="w-100 d-none d-sm-block d-md-none"></div>';
}
if ( 0 == $i % $num_cols[1] ) {
// wrap every $num_cols[1] for md
echo '<div class="w-100 d-none d-md-block d-lg-none"></div>';
}
if ( 0 == $i % $num_cols[2] ) {
// wrap every $num_cols[2] for lg
echo '<div class="w-100 d-none d-lg-block d-xl-none"></div>';
}
if ( 0 == $i % $num_cols[3] ) {
// wrap every $num_cols[3] for xl
echo '<div class="w-100 d-none d-xl-block"></div>';
}
}
?>
<p>Samples</p>
<ul>
<li><a href="<?php echo parse_url( $_SERVER["REQUEST_URI"], PHP_URL_PATH ); ?>?cards=6&columns=2,3,4,4">Default
6 Cards: 2 columns for sm, 3 columns for md, 4 columns for lg, 4 columns for xl</a></li>
</ul>
<div class="card-deck">
<?php
$i = 0;
while ( $i < $total_cards ) :
$i ++;
// add a new card
?>
<div class="card mb-4">
<img src="https://via.placeholder.com/300x250/?text=300x250" alt="" class="card-img-top">
<div class="card-body">
<p>Hello</p>
</div>
</div>
<?php
bs4_card_deck_insert_wrappers_for_breakpoints( $i, $num_cols );
endwhile;
$add = [];
foreach ( $num_cols as $num_col ) {
// $add[4] = ( ( 4 - $i % 4 ) == 4 ) ? 0 : (4 - $i % 4);
$add[] = ( ( $num_col - $i % $num_col ) == $num_col ) ? 0 : ( $num_col - $i % $num_col );
}
$add_cards = max( $add );
while ( $add_cards > 0 ) {
$add_cards --;
$i ++;
echo '<div class="card invisible mb-0"></div>';
bs4_card_deck_insert_wrappers_for_breakpoints( $i, $num_cols );
}
?>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment