Tag: TWITTER-BOOTSTRAP-3
Quiero obtener al menos 2 tarjetas en la misma fila, pero como los datos se están mapeando uno por uno, no tengo idea de cómo hacerlo. Estoy usando un componente personalizado llamado ‘Content’ y devolviendo los datos aquí. import React from “react”; import { Card, CardGroup, Col, Row } from . . . Read more
Prefacio: No estoy preguntando sobre “navbar-fixed-top”. Estoy tratando de hacer una barra de navegación simple con una altura personalizada. Código HTML: <nav class=”navbar navbar-expand-md”> <div class=”container-fluid nav-bar”> <a class=”navbar-brand” href=”#”>Navbar</a> <pre><code> <button class=”navbar-toggler” type=”button” data-bs-toggle=”collapse” data-bs-target=”#navbarNavAltMarkup” aria-controls=”navbarNavAltMarkup” aria-expanded=”false” aria-label=”Toggle navigation”> <span class=”navbar-toggler-icon”>H</span< </button> <div class=”collapse navbar-collapse” id=”navbarNavAltMarkup”> <div class=”navbar-nav ms-auto”> . . . Read more
Tengo la siguiente “plantilla” con la que estoy trabajando, hay muchas tarjetas de ese tipo en la página de configuración que estoy construyendo. <!– Plantilla de tarjeta –> <div class=”card mt-3 shadow-sm”> <div class=”card-header”> <b>Encabezado</b> </div> <ul class=”list-group list-group-flush”> <li class=”list-group-item d-flex justify-content-between align-items-center”> Botón <a class=”btn btn-sm btn-outline-secondary ms-auto” . . . Read more
Quiero realizar una migración de algunas clases de Bootstrap 4 a 5, porque algunas de las clases de Bootstrap ya no se pueden usar, como en utilidades. Estoy usando SASS, así que puedo usar @extend. Para las clases .text-left y .text-right, puedo @extend fácilmente: .text-left { @extend .text-start; } .text-right . . . Read more
Utilicé un diálogo modal de Bootstrap con los botones Aceptar/Cancelar. Espero que se realice algo después de hacer clic en Aceptar y luego cierre el diálogo modal. Por lo tanto, utilicé JS para manejar el clic en Aceptar. HTML: <div class=”modal fade” id=”RequestModal” tabindex=”-1″> <div class=”modal-dialog”> <div class=”modal-content”> <div class=”modal-header”> . . . Read more