Bootstrap

Woocommerce i Bootstrap 4: Solucionar problema de desquadrament a woocommeca finalitzar comanda

/**
 * Don't enqueue Bootstrap on WC Products archive
 */
function dequeue_bootstrap(){

  if ( is_page( 'finalitza-la-compra' )) {


    // dequeue Bootstrap CSS
    function dequeue_bootstrap_css(){
      wp_dequeue_style( 'toolset_bootstrap_styles' );
      wp_dequeue_style( 'toolset_bootstrap_4' );
    }
    add_action( 'wp_print_styles', 'dequeue_bootstrap_css' );

    // dequeue Bootstrap JS 
    function dequeue_bootstrap_js(){
      wp_dequeue_script( 'toolset_bootstrap' );
      wp_dequeue_script( 'toolset_bootstrap_4' );
    }
    add_action( 'wp_print_scripts', 'dequeue_bootstrap_js' );    

  }

}
add_action( 'wp_enqueue_scripts', 'dequeue_bootstrap', 100 );

Vist a toolset: https://toolset.com/errata/bootstrap-4-columns-classes-col-1-and-col-2-conflicts-with-woocommerce/

You can follow this thread on WooCommerce GitHub page for a stable solution:

https://github.com/woocommerce/woocommerce/issues/15793

As a workaround, for now, you can de-queue Bootstrap on the checkout page using a custom code snippet like this one.

Of course, you’d have to change its condition to is_page( 'checkout' );.

Bootstrap: Mantener el estado del después de actualizar

$(document).ready(function () {
    //If shown.bs.collapse add the unique id to local storage
    $(".collapse").on("shown.bs.collapse", function () {
        localStorage.setItem("coll_" + this.id, true);
    });
    //If hidden.bs.collaspe remove the unique id from local storage
    $(".collapse").on("hidden.bs.collapse", function () {
        localStorage.removeItem("coll_" + this.id);
    });
    //If the key exists and is set to true, show the collapsed, otherwise hide
    $(".collapse").each(function () {
        if (localStorage.getItem("coll_" + this.id) == "true") {
            $(this).collapse("show");
        }
        else {
            $(this).collapse("hide");
        }
    });
});

Visto en https://stackoverflow.com/questions/56216250/button-toggle-bootstrap-keep-state-after-refresh

Bootstrap tooltip

<a href="javascript:void(0);" data-placement="right" data-toggle="tooltip" title="Valeur de la quote-part après expertise">Estimation Q/P</a>
jQuery(document).ready(function () {
  jQuery('[data-toggle="tooltip"]').tooltip();
});

Visto en toolset

Bootstrap: Alto y ancho de las imagenes de las cards

/* Equal-height card images, cf. https://stackoverflow.com/a/47698201/1375163*/
.card-img-top {
    /*height: 11vw;*/
    object-fit: cover;
}
  /* Small devices (landscape phones, 576px and up) */
  @media (min-width: 576px) {
    .card-img-top {
        height: 19vw;
    }
  }
  /* Medium devices (tablets, 768px and up) */
  @media (min-width: 768px) {
    .card-img-top {
        height: 16vw;
    }
  }
  /* Large devices (desktops, 992px and up) */
  @media (min-width: 992px) {
    .card-img-top {
        height: 11vw;
    }
  }
  /* Extra large devices (large desktops, 1200px and up) */
  @media (min-width: 992px) {
    .card-img-top {
        height: 11vw;
    }
  }

https://stackoverflow.com/questions/37287153/how-to-get-images-in-bootstraps-card-to-be-the-same-height-width

Usar Toolset Views y modal de Bootstrap para mostrar contenido

// this part displays the trigger for the modal
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".xmit-modal-sm-[wpv-post-id]">
<a href="[wpv-post-url]" class="btn btn-info" data-toggle="modal" data-target="#[wpv-post-id]"><div class="imageclass"><img src="[wpv-post-featured-image output="url" size="medium"]" /></div><h4>[wpv-post-title]</h4></a>
</button>

// this is what appears in the modal
<div class="modal fade xmit-modal-sm-[wpv-post-id]" tabindex="-1" role="dialog" aria-labelledby="[wpv-post-title]" aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
			  // can be any HTML content
        </div>
    </div>
</div>

Visto en https://gist.github.com/davekuhar/648266b99953828c252778581ce3e7cc

Espaciado Bootstrap con h-100

<div class="container">
  <div class="row">
    <div class="col-md-4 col-sm-6 mb-4">
      <div class="card h-100" style="background-color:#ff0000;">
        Test card content. 
      </div>
    </div>
    <div class="col-md-4 col-sm-6 mb-4">
      <div class="card h-100" style="background-color:#00ff00;">
        Test card content. Test card content. Test card content. Test card content. 
      </div>
    </div>
    <div class="col-md-4 col-sm-6 mb-4">
      <div class="card h-100" style="background-color:#0000ff;">
        Test card content. Test card content. Test card content. Test card content. Test card content. Test card content. Test card content. Test card content. 
      </div>
    </div>
    <div class="col-md-4 col-sm-6 mb-4">
      <div class="card h-100" style="background-color:#0f0f0f;">
        Test card content. 
      </div>
    </div>
  </div>
</div>

La solución vista en Stackoverflow.

Scroll al inicio

We are using cookies on our website

Please confirm, if you accept our tracking cookies. You can also decline the tracking, so you can continue to visit our website without any data sent to third party services.