Skip to main content

Preguntas con la etiqueta [bootstrap-5]

Esta etiqueta se refiere a la versión 5 del conocido framework Bootstrap. Es recomendable usarla con la etiqueta `bootstrap`, pero nunca junto a `bootstrap-4` ni `bootstrap-3`.

Filtrar por
Ordenado por
Etiquetadas con
4 votos
2 respuestas
2k vistas

Como hacer que una imagen se ajuste al contenedor usando Bootstrap 5

Me gustaría saber cual es la forma adecuada para que una imagen tome el ancho y alto de un contenedor no quiero que sobren los espacios, estoy utilizando Bootstrap 5 y con la clase img-fluid puedo ...
Avatar del usuario Arturo Gabriel
4 votos
1 respuesta
4k vistas

Cambiar color de fondo a navbar de Bootstrap

Tengo un navbar sacado de bootstrap, y le quiero poner un color de fondo. Intenté cambiarle desde css el color de fondo al nav y no pasó nada. Intenté en el div container fluid y se cambió, pero queda ...
Avatar del usuario Juan Aliaga
3 votos
2 respuestas
1k vistas

Reproducir video al abrir modal y detenerlo al cerrar

Sin usar jQuery, ¿Cómo podría hacer que el video dentro un modal, se reproduzca automáticamente al abrir el modal, y detener el video al cerrar el modal? Solo encuentro respuestas que hacen uso de ...
Avatar del usuario Alvamon6
  • 243
3 votos
0 respuestas
43 vistas

Los elementos de mi navbar se apilan, en lugar de mostrarse uno al lado del otro

Soy nuevo con HTML y Bootsrap, estoy haciendo un proyecto para la universidad, estoy intentando crear una navbar que tenga las secciones repartidas una al lado de la otra dentro de la misma, pero se ...
Avatar del usuario Juanjo
  • 121
2 votos
1 respuesta
33 vistas

Uso de Jquery First y Clone

Tengo la siguiente estructura: <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/[email protected]/...
Avatar del usuario Alvamon6
  • 243
2 votos
1 respuesta
99 vistas

No funciona toggler y se cae en tamaños pequeños

Estoy desarrollando un pequeño sitio web para una inmobiliaria familiar que tenemos. Tengo un gran problema con el navbar responsive de Bootstrap 5.1.3. El caso es que el toggler (hamburguesa) no ...
Avatar del usuario pabdani
  • 91
2 votos
1 respuesta
181 vistas

bootstrap function theme-color-level SassError: Undefined variable $theme-color-interval

Siguiendo la documentacion de bootstrap aqui, intento de utilizar la funcion theme-color-level y obtengo el siguiente error: Lo intento de utilizar de la siguiente manera: // Custom.scss // Option B: ...
Avatar del usuario bypabloc_
  • 1,895
2 votos
1 respuesta
342 vistas

Media Object con Bootstrap 5

Es la primera vez que hago una pregunta. Disculpad si falta algún dato, aclaración o no me expreso bien. Estoy aprendiendo a usar Bootstrap en su última versión (v5.0.0-beta3) y, siguiendo unos ...
Avatar del usuario josere4re5
2 votos
2 respuestas
262 vistas

¿Cómo mover una columna de un Grid a la derecha?

Tengo la siguiente duda, quisiera saber si existe alguna manera de mover la columna que se encuentra en la segunda fila hacía la derecha, tome como ejemplo la imagen que aparece en la documentación de ...
Avatar del usuario Sotorius
2 votos
1 respuesta
220 vistas

problema con bootstrap cards group ycontenido en un div

espero me puedan ayudar, tengo un card group de 3 columnas que se muestran dinámicamente, en el index tengo el div contenedor dentro de la clase donde tiene que aparecer las cards en orden <div ...
Avatar del usuario proyectos globales de ventilac
2 votos
2 respuestas
56 vistas

Ocultar un div luego de transcurrido un tiempo

Estoy tratando que al abrir el modal se muestre con javascript Mensaje1 por unos 4 segundos y que luego (Mensaje1) desaparezca, quedando solamente Mensaje2. Estoy usando Bootstrap 5. <!doctype html&...
Avatar del usuario Puntay
  • 1,286
2 votos
0 respuestas
251 vistas

Carousel dinámico de imagenes varias carpetas C#, Asp.Net core mvc?

Mostrar en carousel las imagenes que tengo en una carpeta, la ruta esta almacenada en mi DB en un campo llamado rutaCarpeta. Dentro del proyecto tengo creada la misma carpeta y es ahi donde esta el ...
Avatar del usuario dsr
  • 333
2 votos
1 respuesta
1k vistas

Con BOOTSTRAP 5 ¿Como hacer para que la barra lateral no haga scroll?

Muy buen día, tengo un problema con una barra lateral que hice con bootstrap al momento de hacer scroll en la página la barra lateral también lo hace Así se ve: y esto es lo que hace cuando hago ...
Avatar del usuario Charlie Wazzap
1 voto
3 respuestas
4k vistas

Como poner dos columnas en html y bootstrap 5

¿Cómo hago para que una tabla quede en el costado de mi formulario? Se poco y nada sobre este lenguaje, pero no se como ponerlo en el costado. Se que utiliza 12 columnas, las tengo que dividir segun ...
Avatar del usuario Dakas
  • 31
1 voto
1 respuesta
9k vistas

Cambiar tamaño de íconos Bootstrap

Necesito modificar el tamaño de los íconos de bootstrap. Ya probé con incorporar la clase fa-x5, fa-lg y no funciona. De paso comento que no estoy usando clases con fa fa-icon, sino que son bi bi-icon,...
Avatar del usuario Ignacio Grilli
1 voto
3 respuestas
98 vistas

Como evito que el modal de boostrap 5 se cierre

Al momento de dar click en el botón Guardar me despliega el mensaje de sweetalert2 pero si toco enter o espacio el modal de bootstrap (que está detrás) se cierra. ¿cómo arreglo ese problema? No sé si ...
Avatar del usuario Sanchez Jesus
1 voto
1 respuesta
46 vistas

¿Cómo alinear el texto dentro de un div con un icono de Font Awesome de forma que el icono quede en medio del texto?

<footer class="p-3 text-white-50"> <div class="container"> Este sitio es una maquetación no funcional creada usando kit de interfaz de usuario: Material ...
Avatar del usuario C0D3BREAK3R
1 voto
2 respuestas
138 vistas

¿como se podra realizar un menu fijo adaptable a difirentes dispositivos?

como podre dejar el menú fijo, que cuando este bajando, el menú siga hay fijo para el usuario, y sea adaptable teléfonos móviles, lo eh intentado pero me desaparece el menu. acá esta el html, con cual ...
Avatar del usuario Cristian Guerrero Nenen
1 voto
1 respuesta
223 vistas

Función para aplicar estilo a elemento hijo, haciendo clic desde el padre

Tengo la siguiente estructura, donde (omitiendo la clase .m-2) .drop__card sería el elemento padre y .circulo uno de los elementos hijo. <div class="m-2"> <div class="...
Avatar del usuario Alvamon6
  • 243
1 voto
1 respuesta
282 vistas

Navbar aumenta de tamaño al hacer clic en un dropdown, en dispositivos pequeños

Estoy teniendo problemas a la hora de agregar un dropdown a mi navbar en bootstrap 5; este es mi navbar: <nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm"> <...
Avatar del usuario DFG
  • 575
1 voto
1 respuesta
39 vistas

¿como situar en el centro del div horizontalmente con bootstrap5?

queria situar en el centro de la pantalla (horizontalmente) el texto "hola!". Recuerdo que antes con justify-content-center me funcionaba pero ahora no consigo posicionarlo. Pero la ...
Avatar del usuario guillanBesada
1 voto
1 respuesta
7k vistas

Centrar contenido con Bootstrap 5

Estoy intentando centrar un login y no logro hacerlo. La sección de login tiene que estar dividida en dos y centrada, pero tiene que tener un full height y no sé porque no me queda. <!DOCTYPE ...
user avatar
1 voto
2 respuestas
52 vistas

Mostrar modal sin utilizar botón

Estoy tratando de mostrar un modal automáticamente con Bootrap 5: <!doctype html> <html lang="es"> <head> <!-- Required meta tags --> <meta charset="utf-8"> ...
Avatar del usuario Puntay
  • 1,286
1 voto
2 respuestas
413 vistas

¿Cómo habilitar un botón de registro de un formulario mediante un botón de un modal de Bootstrap5?

Estoy trabajando con un formulario en el cual el botón de registro se debe habilitar cuando se cumplan dos condiciones. La primera es que debe estar el formulario completo y la segunda es que mediante ...
Avatar del usuario Lucas
  • 191
1 voto
1 respuesta
75 vistas

Mantener la alineación en un Navbar Bootstrap 5

Tengo un navbar que contiene: el elemento navbar-toggler en la izquierda, una imagen al centro y un ícono en la derecha. Mientras la pantalla sea menor de 992px va todo bien, con la imagen centrada. ...
Avatar del usuario ClaudioO
1 voto
1 respuesta
302 vistas

Las tarjetas de bootstrap sobrepasan la barra de navegación y el texto

Quise agregar las tarjetas de bootstrap a mi página, al inicio se veían bien: Pero después cuando empecé a agregar un texto abajo lo empezó a tapar: No intenté ninguna forma de solucionarlo porque ...
Avatar del usuario Celeste Favaccio
1 voto
1 respuesta
1k vistas

Cómo hacer botones responsivos (btn-sm) al ver mi página desde un celular (Bootstrap 5.1)

para mis títulos en mi página usé Display Property de Bootstrap 5.1 y mostrar un título exclusivo para celulares y otro que solo se mira en Laptop y PC, adjunto un ejemplo: <h1 class="text-...
Avatar del usuario NotoriusSha
1 voto
1 respuesta
2k vistas

Porque no funciona mi modal de bootstrap en Angular?

Tengo una aplicación en Angular 13 y estoy intentando usar un modal de bootstrap pero a la hora de activarlo no funciona, he intentado de todo, cree un proyecto nuevo y luego instale las librerías ...
Avatar del usuario Sir_Titi
1 voto
2 respuestas
999 vistas

Situar el footer al final del body

Hice un componente footer para situarlo siempre al final del body, quiero que cuando haya poco contenido este se situé en el final y cuando haya mucho se tenga que hacer scroll hasta llegar al final y ...
Avatar del usuario JPillado
  • 163
1 voto
1 respuesta
129 vistas

Interferencias con bootstrap 5.3.2 y CSS

Resulta que tengo un contenedor que uso debajo de la barra de navegación, y quiero que el desplegable dropdown menu tenga el fondo predefinido en "bg-dark" y "bg-opacity-90" lo que ...
Avatar del usuario Ismael Montoya
1 voto
1 respuesta
289 vistas

Como puedo fusionar dos columnas de dos filas diferentes en Bootstrap?

Me gustaría lograr algo así: Pero lo máximo que he logrado es lo siguiente: <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/> <link ...
Avatar del usuario Carlos
  • 865
1 voto
1 respuesta
42 vistas

En el formulario ReactJs con Bootstrap. Me marca este error: "Warning: Encountered two children with the same key, `1`."

Tengo un formulario en ReactJs donde uso un "Useeffect" para traer los datos de una API en PHP nativo (funciona correctamente) en la cual lleno el vector y muestra la información en una ...
Avatar del usuario Saulo
  • 117
1 voto
1 respuesta
46 vistas

Etiqueta form no se muestra completo, una parte queda debajo del footer de la pagina

El form se "oculta en mi footer, haciendo que no se vea el final del formulario, esto genera un poco de incomodidad a la vista ya que no se termina de entender si finalizo ahi el formulario o hay ...
Avatar del usuario Juanjo
  • 121
1 voto
1 respuesta
356 vistas

¿Cómo colocar un botón en un popovers?

estoy tratando de poner un botón dentro de un popovers pero no me lo muestra el botón. Busque información y solo encontré que tengo que insertar el "data-html="true", pero no me ...
Avatar del usuario ALAN
  • 33
1 voto
1 respuesta
1k vistas

Personalizar Carousel Bootstrap 5 - Sacar flechas de la imagen + añadir previsualización de anterior y siguiente

El que tiene bootstrap tiene incluidas las flechas dentro de la imagen pero no soy muy fan ya que se pierde con la imagen, quisiera tener las flechas fuera del recuadro de la imagen, estuve jugando ...
Avatar del usuario Junkboy
  • 35
1 voto
1 respuesta
149 vistas

No puedo cerra un modal de bootstrap 5

El modal contiene un formulario, la idea es que al enviar el formulario y una vez tenga el contenido del mismo el modal se cierre. <div id="welcomeModal" class="modal" tabindex=&...
Avatar del usuario C.Mirkin
1 voto
1 respuesta
265 vistas

¿como puedo poner estas imagenes en un fila, sea responsive?

tengo un problema, cuando se muestra la web en mi pc, el tamaño de la seccion de noticias, se supone que deben ver un fila de 4 imagenes, pero solo me muestra 2 filas, donde la primera fila son las ...
Avatar del usuario Cristian Guerrero Nenen
1 voto
1 respuesta
120 vistas

Como puedo centrar la opcion seleccionada en un menu con Bootstrap 5.2 jquery Thymelef

Alguien sabe como centrar el menu seleccionado, tengo el siguiente caso: Cuando selecciono el menu, aparece en la parte de abajo como se ve en la imagen. pero tengo mas menus abajo, y al ...
Avatar del usuario Desarrollo Web loam
1 voto
1 respuesta
116 vistas

¿Cómo dejar fijo un navbar sin tapar el contenido pudiendo hacer scroll al contenido en bootstrap 5?

He estado haciendo pruebas en https://www.w3schools.com/html/tryit.asp?filename=tryhtml_basic con el siguiente código pero tengo un problema. Quiero tener una barra de navegación fija, en la parte ...
Avatar del usuario David
  • 57
1 voto
2 respuestas
781 vistas

¿Cómo posicionar un boton del lado derecho del header?

Estoy queriendo ubicar mi botón de cerrar sesión en el header y del lado derecho, pero por mas que intento y pongo y saco clases de Bootstrap 5 no estoy pudiendo lograr esto. Ahi está ubicado el ...
Avatar del usuario popo
  • 127
1 voto
1 respuesta
221 vistas

Cómo mostrar una Progress Bar al tocar un botón?

Tengo este botón que al tocarlo muestra mi progress bar, el problema es que estoy usando el mecanismo de Acordiones de Bootstrap 5. Y aunque funciona bien, la idea es que al tocar varias veces el ...
Avatar del usuario NotoriusSha
1 voto
1 respuesta
45 vistas

¿Como darle margen superior a un texto que tengo en una barra sin modificar el tamaño de la barra?

Hola tengo una barra superior que esta debajo del navbar a la cual le estoy tratando de poner un breadcrumb para que se pueda visualizar la dirección de donde se ubica el usuario pero también tengo un ...
Avatar del usuario Angel
  • 43
1 voto
1 respuesta
753 vistas

Navbar alinear boton derecha y centrarlo bootstrap 5

tengo este codigo en mi barra de navegacion. El boton me gustaria ponerlo a la derecha(solo me deja mover los dos) y alineado con los demas items, nose como hacerlo. Ademas tampoco me funciona el ...
Avatar del usuario Ismael Montoya
1 voto
1 respuesta
588 vistas

html con modal bootstrap estilo confirm

Intenté con lo poco que se de javascript y hasta con jquery pero estoy trabado hace dias. El codigo que copio abajo al clickear en el icono lapiz de bootstrap me ejecuta un confirm, si le doy "no&...
Avatar del usuario look68
  • 340
1 voto
1 respuesta
395 vistas

Importar componente de bootstrap 5 en create-react-app

Hola y gracias por la ayuda, estoy utilizando bootstrap 5 para dar estilo a una app en react, pero tengo problemas al incluir el js del componente de bootstrap. Aqui comparto el codigo de como hago la ...
Avatar del usuario Usiel
  • 556
1 voto
1 respuesta
6k vistas

Agregar una imagen de Background con Bootstrap 5

Estoy intentando agregar una imagen responsiva a esa sección que ven en verde esmeralda bg-primary. Estoy tratando de que el resultado final sea directamente una imagen o un video , en vez de que sea ...
Avatar del usuario Batvizz
1 voto
2 respuestas
31 vistas

¿Cómo alineo horizontalmente cartas de bootstrap?

No logro hacer que se distribuyan horizontalmente estas cartas generadas por un ciclo foreach. Les dejo el código del foreach: <div class="container"> <div class="row"&...
Avatar del usuario EMMAHUERTA
1 voto
0 respuestas
31 vistas

Acceso directo a la carpeta de bootstrap en node_modules

Estoy migrando un proyecto del trabajo de bootstrap v4 a v5 y en la nueva version se implementa el uso de variables sass y esto ayuda un monton, el punto es que quisiera saber de que manera puedo ...
Avatar del usuario Max Jimenez
1 voto
1 respuesta
333 vistas

Seleccionar pestaña (tab) en boostrap 5 dependiendo del día

Tengo un nav tab pills con los días de la semana. Mi intención es que según el día se seleccione el tab correspondiente. Para ello he utilizado la función date("w"); para extraer en formato ...
Avatar del usuario Jok
  • 858
1 voto
0 respuestas
238 vistas

Problema con overflow-y: scroll en un modal de Bootstrap

Tengo un modal creado con la librería Bootstrap en el que tengo varias listas que se rellenan al hacer una búsqueda mediante Ajax, con un tamaño fijo y la propiedad overflow-y: scroll, para poder ...
Avatar del usuario Sergio Domínguez