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

Bootstrap, Jquery

$(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

Bootstrap

<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

Bootstrap

/* 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

Listas en Bootstrap

Bootstrap, Tutoriales Bootstrap

Tutorial

Alinear elementos en Bootstrap

Bootstrap

Alineación de elementos

Usar Toolset Views y modal de Bootstrap para mostrar contenido

Bootstrap, Toolset

// 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

Bootstrap

<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.

We are using cookies on our website