• Skip to main content
  • Skip to primary sidebar

WordPress, Genesis Framework and Storefront customization tutorials

  • Archive
    • Free
    • Premium
  • Blog
  • About
  • Contact
  • Newsletter
  • Membership
  • Login
Home ยป Bootstrap

Bootstrap

Masonry layout with Bootstrap – grid cloumns

If You would like to implement only the masonry component of bootstrap

//CARD COLUMNS
.card-columns .card {
  margin-bottom: 0.75rem;
}

@media (min-width: 576px) {
  .card-columns {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
    -webkit-column-gap: 1.25rem;
    -moz-column-gap: 1.25rem;
    column-gap: 1.25rem;
    orphans: 1;
    widows: 1;
  }
  .card-columns .card {
    display: inline-block;
    width: 100%;
  }
}

HTML structure with WordPress loop

<?php
wp_reset_postdata();
  
$args = array(
    'post_type' => 'post_type',
    'posts_per_page' => -1
);
  
$the_query = new WP_Query( $args ); ?>
 
    <div class="card-columns">
        
        <?php if ( $the_query->have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
     
           <div class="card">
                
                <!---->
               
            </div>
 
        <?php endwhile; endif; ?>
    </div>
 
<?php wp_reset_postdata(); ?>

Filed Under: Free Tagged With: Bootstrap

How to fix collapsed checkout fields in Storefront (Bootstrap)

#customer_details .col-1,  
#customer_details .col-2  {
	width: 100%;
	max-width: 100%;
}
.woocommerce-input-wrapper {
	display: block !important;
	width: 100%;
}

Filed Under: Free Tagged With: Bootstrap, Storefront

Bootstrap Carousel Slider as Background Image – Cover

<div id="slider-wrapper" class="container-fluid">
 
<div id="mySlider" class="carousel slide" data-ride="carousel"> 
   
   <ol class="carousel-indicators">
    <li data-target="#mySlider" data-slide-to="0" class="active"></li>
    <li data-target="#mySlider" data-slide-to="1"></li>
    <li data-target="#mySlider" data-slide-to="2"></li>
    <li data-target="#mySlider" data-slide-to="3"></li>
  </ol>
    
    <div class="carousel-inner" role="listbox">
 
      <!--LOOP ACTIVE ITEMS-->      
    
    <?php wp_reset_postdata();
 
     $the_query = new WP_Query(array(
                'post_type' => 'slider', 
                'posts_per_page' => 1 
                )); 
 
                                
    while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
       <div class="carousel-item active" style="background-image: url('<?php the_field('slide'); ?>');">
       <div class="carousel-caption">
          <div class="carousel-head">
               <h2><?php the_title(); ?></h2>
           </div>
           <p><?php the_field('caption_text'); ?></p>
           <?php echo do_shortcode('[cta]'); ?>
       </div>
         
    </div><!--item-active-->
    <?php endwhile; wp_reset_postdata(); ?>
     
<!--LOOP ITEMS-->    
      <?php  
       $the_query = new WP_Query(array(
                'post_type' => 'slider', 
                'posts_per_page' => 2, 
                'offset' => 1 
                )); 
 
                                
    while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
       <div class="carousel-item" style="background-image: url('<?php the_field('slide'); ?>');">
       <div class="carousel-caption">
          <div class="carousel-head">
               <h2><?php the_title(); ?></h2>
           </div>
           <p><?php the_field('caption_text'); ?></p>
           <?php echo do_shortcode('[cta]'); ?>
       </div>
    </div><!--item-active-->
    <?php endwhile; wp_reset_postdata(); ?>
          
       </div>  
  
   <div class="carousel-control-wrapper hidden">
   <a class="carousel-control-prev" data-target="#mySlider" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="carousel-control-next" data-target="#mySlider" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
</div>  
</div>

Filed Under: Free Tagged With: Bootstrap

How to create 4 col Bootstrap Carousel from Custom Post Type in Genesis


<!-- Carousel -->
<div id="promo-carousel" class="carousel job-carousel-wrapper slide" data-ride="carousel" data-interval="3000">

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">

    <?php
    // Item size (set here the number of posts for each group)
    $i = 4; 

    // Set the arguments for the query
    global $post; 
    $args = array( 
      'numberposts'   => 16, // -1 is for all
      'post_type'     => 'munkak', // or 'post', 'page'
      'orderby'       => 'title', // or 'date', 'rand'
      'order' 	      => 'ASC', // or 'DESC'
    );

    // Get the posts
    $myposts = get_posts($args);

    // If there are posts
    if($myposts):

      // Groups the posts in groups of $i
      $chunks = array_chunk($myposts, $i);
      $html = "";

      /*
       * Item
       * For each group (chunk) it generates an item
       */
      foreach($chunks as $chunk):
        // Sets as 'active' the first item
        ($chunk === reset($chunks)) ? $active = "active" : $active = "";
        $html .= '<div class="carousel-item '.$active.'"><div class="container"><div class="row">';

        /*
         * Posts inside the current Item
         * For each item it generates the posts HTML
         */
        foreach($chunk as $post):
      
          include('variables.php'); 
      
          $html .= '<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">';
          $html .= '<a class="cat-link" href="'.get_the_permalink().'">';
          $html .= get_the_post_thumbnail();
          $html .= '<h4>'.get_the_title($post->ID).'</h4>';
          $html .= '<ul>';  
          $html .= '<li>'.$orszag.'</li>';
          $html .= '<li>'.get_field("munkaber").'</li>';
          $html .= '</ul>';  
          $html .= '</a>';  
          $html .= '</div>';
        endforeach;

        $html .= '</div></div></div>';	

      endforeach;

      // Prints the HTML
      echo $html;

    endif;
    ?>

  </div> <!-- carousel inner -->


  <!-- Controls -->
  <div class="job-carousel carousel-control-wrapper">
   <a class="carousel-control-prev" data-target="#promo-carousel" role="button" data-slide="prev">
        <i class="fas fa-chevron-left"></i>
        <span class="sr-only">Previous</span>
      </a>
      <a class="carousel-control-next" data-target="#promo-carousel" role="button" data-slide="next">
        <i class="fas fa-chevron-right"></i>
        <span class="sr-only">Next</span>
      </a>
    </div>


</div> <!-- /carousel -->

Filed Under: Free Tagged With: Bootstrap, Genesis

How to create Bootstrap Accordion from Custom Post Type

To view the full content, please sign up for the membership.

If You are already a member, please log in below:

 
 
Forgot Password

Filed Under: Premium Tagged With: Bootstrap

How to add row after every 4 col in WordPress loop

<?php
$args = array(
           'post_type'      => 'posttype',
           'posts_per_page' => 20,
            'tax_query' => array(
               array(
                   'taxonomy' => 'taxonomy',
                   'field'    => 'slug',
                   'terms'    => 'terms',
               ),
           ),
       );                  
 
$query = new WP_Query( $args );  

$counter = 0;
$post_count = $the_query->post_count;
 ?>
 
     <?php if ($query->have_posts()) : while ($query->have_posts()) : $query->the_post(); ?>

        <?php 
             if ($counter == 0) {
              echo '<div class="row">';
            }
        ?>
                
                <!------------------------------------->
            
        <?php 
            $counter++; 
            if ( $counter % 4 == 0 || $post_count == $counter ) {
              echo '</div> <div class="row">';
            }
?>

       <?php endwhile; endif; ?>
   
<?php wp_reset_postdata(); ?>

Filed Under: Free Tagged With: Bootstrap

Bootstrap Slider with Custom Post Type

To view the full content, please sign up for the membership.

If You are already a member, please log in below:

Filed Under: Premium Tagged With: Bootstrap

Enqueue Bootstrap CDN in WordPress

// =========================================================================
// BOOTSTRAP CSS
// =========================================================================
function enqueue_bootstrap_styles(){ 
    wp_enqueue_style('bootstrap_css', '//stackpath.bootstrapcdn.com/bootstrap/4.4.0/css/bootstrap.min.css');
}
add_action( 'wp_enqueue_scripts', 'enqueue_bootstrap_styles' );
 
// =========================================================================
// BOOTSTRAP JAVASCRIPT
// =========================================================================
function enqueue_bootstrap_scripts() {  
    wp_enqueue_script( 'bootstrap_jquery', '//code.jquery.com/jquery-3.4.1.slim.min.js', array(), '3.3.1', true );
    wp_enqueue_script( 'bootstrap_popper', '//cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js', array(), '1.14.7', true );
    wp_enqueue_script( 'bootstrap_javascript', '//stackpath.bootstrapcdn.com/bootstrap/4.4.0/js/bootstrap.min.js', array(), '4.3.1', true );
}
add_action( 'wp_enqueue_scripts', 'enqueue_bootstrap_scripts' );

Filed Under: Free Tagged With: Bootstrap

Testimonial Carousel – Custom Post Type Loop


<?php

//TESTIMONIAL
function post_carousel_loop() { ?>

<div class="container">

<div id="myCarousel" class="carousel slide" data-ride="carousel">



<div class="carousel-inner" role="listbox">


<!--LOOP ACTIVE ITEMS-->

<?php wp_reset_postdata();

$the_query = new WP_Query(array(
'post_type' => 'testimonial',
'posts_per_page' => 1
));

while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
<div class="carousel-item active">
<div class="row">
<div class="col-md-12">
<h2 class="carousel-title">Our Patients Say</h2>
<?php the_excerpt(); ?>
<h4 class="author">
<?php the_title(); ?>
</h4>
</div>
</div><!--row-->
</div><!--item-active-->
<?php endwhile; wp_reset_postdata(); ?>

<!--LOOP ITEMS-->
<?php
$the_query = new WP_Query(array(
'post_type' => 'testimonial',
'posts_per_page' => 3,
'offset' => 1
));

while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
<div class="carousel-item">
<div class="row">
<div class="col-md-12">
<h2 class="carousel-title">Our Patients Say</h2>
<?php the_excerpt(); ?>
<h4 class="author">
<?php the_title(); ?>
</h4>
</div>
</div><!--row-->
</div><!--item-active-->
<?php endwhile; wp_reset_postdata(); ?>

</div>

<div class="carousel-control-wrapper">
<a class="carousel-control-prev" data-target="#myCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" data-target="#myCarousel" role="button" data-slide="next">
<i class="fas fa-chevron-right"></i>
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>

<?php
}
add_shortcode('testimonial-carousel', 'post_carousel_loop');

?>

Filed Under: Free Tagged With: Bootstrap

Primary Sidebar

Gabor Flamich

Hi! I'm Gabor.
I write tutorials on WordPress and WooCommerce.

MacBook

12 Essential Snippets for Genesis Developers

Subscribe to my Newsletter to view my basic collection of Genesis snippets that I use for my projects!

Sign Up for Free
  • Facebook
  • GitHub
  • Instagram
  • LinkedIn
  • Twitter
  • YouTube
UpdraftPlus Premium

Tags

ACF Ajax Analytics API Bootstrap Breadcrumb category CPT CSS fetch Genesis Google Maps Gutenberg HTML Isotope JavaScript jQuery loop Map Menu Parallax PHP SASS SEO SQL Storefront SVG tab tag manager tags Taxonomy Tool upsell Webpack Wholesale WooCommerce WordPress WPML

Disclosure: Some of the links in this site are affiliate links. I will be paid a commission if you use this link to make a purchase.

  • Privacy Policy / Terms of Service
© 2023 WP Flames - All Right Reserved