TransWikia.com

¿Como puedo alinear correctamente una card en bootstrap?

Stack Overflow en español Asked by Sergio ML on January 4, 2022

Hola buenas mi pregunta es saber como solucionar este problema en bootstrap, quiero hacer tres columnas de forma horizontal ya que cuando lo hago me sale de forma vertical agradecere su pronta respuesta

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
    <script src="jquery-3.2.1.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

    <script type="text/javascript" src="js/bootstrap.min.js"></script>

    <script type="text/javascript">
    function showHide(){
    $('#text1').slideToggle();
      
    $('#text2').slideToggle();
    $('#boton').slideToggle();
    }
        jQuery(document).ready(function(){
  $(".oculto").hide();              
    $(".inf").click(function(){
          var nodo = $(this).attr("href");  
 
          if ($(nodo).is(":visible")){
               $(nodo).hide();
               return false;
          }else{
        $(".oculto").hide("slow");                             
        $(nodo).fadeToggle("fast");
        return false;
          }
    });
}); 
</script>
<style>
      .red
      {
        color: white;
        background-color: red;
      }
      .green
      {
        color: white;
        background-color: green;
      }
      .blue
      {
        color: white;
        background-color: blue;
      }
    </style>
</head>
<body>

<div class="container">
      <div class="row">
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 col-xl-2 red">
          Hello world
        </div>

        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 col-xl-2 green">
          Hello world
        </div>

        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
          <br />
          <div class="card-columns">
          <div class="card" style="max-width:319px;">
            <img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMzE4IiBoZWlnaHQ9IjE4MCIgdmlld0JveD0iMCAwIDMxOCAxODAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzEwMCV4MTgwCkNyZWF0ZWQgd2l0aCBIb2xkZXIuanMgMi42LjAuCkxlYXJuIG1vcmUgYXQgaHR0cDovL2hvbGRlcmpzLmNvbQooYykgMjAxMi0yMDE1IEl2YW4gTWFsb3BpbnNreSAtIGh0dHA6Ly9pbXNreS5jbwotLT48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwhW0NEQVRBWyNob2xkZXJfMTRmZTA1OGRkZmIgdGV4dCB7IGZpbGw6cmdiYSgyNTUsMjU1LDI1NSwuNzUpO2ZvbnQtd2VpZ2h0Om5vcm1hbDtmb250LWZhbWlseTpIZWx2ZXRpY2EsIG1vbm9zcGFjZTtmb250LXNpemU6MTZwdCB9IF1dPjwvc3R5bGU+PC9kZWZzPjxnIGlkPSJob2xkZXJfMTRmZTA1OGRkZmIiPjxyZWN0IHdpZHRoPSIzMTgiIGhlaWdodD0iMTgwIiBmaWxsPSIjNzc3Ii8+PGc+PHRleHQgeD0iMTE4LjA4NTkzNzUiIHk9Ijk3LjIiPjMxOHgxODA8L3RleHQ+PC9nPjwvZz48L3N2Zz4=" class="card-img-top" alt="Card image" />

            <div class="card-block">
              <h4 class="card-title">This is a title</h4>
              <p class="card-text">Each merged squad salts the wild porter. Should the charmed church dodge a camera? The gown litters the rhyme. Another discrete elevator defects over the target.</p>
              <a href="http://sonarsystems.co.uk" class="btn btn-success">Button</a>
            </div>
          </div>

          <div class="card" style="max-width:319px;">
            <img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMzE4IiBoZWlnaHQ9IjE4MCIgdmlld0JveD0iMCAwIDMxOCAxODAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzEwMCV4MTgwCkNyZWF0ZWQgd2l0aCBIb2xkZXIuanMgMi42LjAuCkxlYXJuIG1vcmUgYXQgaHR0cDovL2hvbGRlcmpzLmNvbQooYykgMjAxMi0yMDE1IEl2YW4gTWFsb3BpbnNreSAtIGh0dHA6Ly9pbXNreS5jbwotLT48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwhW0NEQVRBWyNob2xkZXJfMTRmZTA1OGRkZmIgdGV4dCB7IGZpbGw6cmdiYSgyNTUsMjU1LDI1NSwuNzUpO2ZvbnQtd2VpZ2h0Om5vcm1hbDtmb250LWZhbWlseTpIZWx2ZXRpY2EsIG1vbm9zcGFjZTtmb250LXNpemU6MTZwdCB9IF1dPjwvc3R5bGU+PC9kZWZzPjxnIGlkPSJob2xkZXJfMTRmZTA1OGRkZmIiPjxyZWN0IHdpZHRoPSIzMTgiIGhlaWdodD0iMTgwIiBmaWxsPSIjNzc3Ii8+PGc+PHRleHQgeD0iMTE4LjA4NTkzNzUiIHk9Ijk3LjIiPjMxOHgxODA8L3RleHQ+PC9nPjwvZz48L3N2Zz4=" class="card-img-top" alt="Card image" />

            <div class="card-block">
              <h4 class="card-title">This is a title</h4>
              <p class="card-text">Each merged squad salts the wild porter. Should the charmed church dodge a camera? The gown litters the rhyme. Another discrete elevator defects over the target.</p>
              <a href="http://sonarsystems.co.uk" class="btn btn-success">Button</a>
            </div>
          </div>

          <div class="card" style="max-width:319px;">
            <img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMzE4IiBoZWlnaHQ9IjE4MCIgdmlld0JveD0iMCAwIDMxOCAxODAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzEwMCV4MTgwCkNyZWF0ZWQgd2l0aCBIb2xkZXIuanMgMi42LjAuCkxlYXJuIG1vcmUgYXQgaHR0cDovL2hvbGRlcmpzLmNvbQooYykgMjAxMi0yMDE1IEl2YW4gTWFsb3BpbnNreSAtIGh0dHA6Ly9pbXNreS5jbwotLT48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwhW0NEQVRBWyNob2xkZXJfMTRmZTA1OGRkZmIgdGV4dCB7IGZpbGw6cmdiYSgyNTUsMjU1LDI1NSwuNzUpO2ZvbnQtd2VpZ2h0Om5vcm1hbDtmb250LWZhbWlseTpIZWx2ZXRpY2EsIG1vbm9zcGFjZTtmb250LXNpemU6MTZwdCB9IF1dPjwvc3R5bGU+PC9kZWZzPjxnIGlkPSJob2xkZXJfMTRmZTA1OGRkZmIiPjxyZWN0IHdpZHRoPSIzMTgiIGhlaWdodD0iMTgwIiBmaWxsPSIjNzc3Ii8+PGc+PHRleHQgeD0iMTE4LjA4NTkzNzUiIHk9Ijk3LjIiPjMxOHgxODA8L3RleHQ+PC9nPjwvZz48L3N2Zz4=" class="card-img-top" alt="Card image" />

            <div class="card-block">
              <h4 class="card-title">This is a title</h4>
              <p class="card-text">Each merged squad salts the wild porter. Should the charmed church dodge a camera? The gown litters the rhyme. Another discrete elevator defects over the target.</p>
              <a href="http://sonarsystems.co.uk" class="btn btn-success">Button</a>
            </div>
          </div>
        </div>
      </div>
    </div>
</div>



 <style type="text/css">
 .carousel-inner img {
    width: 100%;
    max-height: 460px;
}
.carousel-inner{
 height: 400px;
}
.card{
  width: 50%;
  max-height: 400px
}
p.saltodepagina
{
page-break-after: always;
}
img { max-width: 100%; height: auto; }
img { *width: 100%; }

</style>

</body>

</html>
bootstraphtmljavascriptjquery

3 Answers

Bueno partiendo por lo primero este ejemplo esta hecho con bootstap 4, en esto hay que tener claro algo bootstrap trabaja con un sistema de rejillas segun el tamaño de pantallas definidas que son 4 resoluciones:

Resolución LG: mas de 1200px
Resolución MD: a pertir de 992px
Resolución SM:a partir de 768 px
Resolución XS:por debajo de la cifra SM

Con esto en cuenta bootstrap ademas deja un modelo de 12 rejillas o sea divide cada una de estas resoluciones en 12 partes iguales.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
<div class="row col-xs-12">
<div class="col-xs-1 border">1</div>
<div class="col-xs-1 border">2</div>
<div class="col-xs-1 border">3</div>
<div class="col-xs-1 border">4</div>
<div class="col-xs-1 border">5</div>
<div class="col-sx-1 border">6</div>
<div class="col-xs-1 border">7</div>
<div class="col-xs-1 border">8</div>
<div class="col-xs-1 border">9</div>
<div class="col-sx-1 border">10 </div>
<div class="col-xs-1 border">11</div>
<div class="col-xs-1 border">12</div>
</div>
</div>

En ese ejemplo dividí en 12 partes iguale en fila y lo puse xs ya que el snnipet es pequeño por eso uso xs, entonces entrando en la lógica de bootstrap si quiero dividir en partes iguales ejemplo en 4 partes, simple matemática dividimos 12 en 4 que seria 3: entonces divido en div en col-xs-3 para que queden partes iguales.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
<div class="row col-xs-12">
<div class="col-xs-3 border">1</div>
<div class="col-xs-3 border">2</div>
<div class="col-xs-3 border">3</div>
<div class="col-xs-3 border">4</div>
</div>
</div>

Esto hace que yo divida en 4 partes iguales y todavía queden en fila.
Entonces como resumen y para que se den una idea cuando yo digo col-xs-12,col-sm-12 ,col-md-12 y col-lg-12 significa que ocupo el 100% de la resolución que representa cada uno.
Por eso que se usa la etiqueta <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 "> , eso es para que se adapte 100% a cada uno de los tamaños de dispositivos.

Para tu ejercicios la solucion es:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container">
    <div class="row ">
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 text-center bg-success">
            Hello world
        </div>

        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 green text-center bg-primary">
            Hello world
        </div>

        <div class=" row col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 justify-content-center align-self-center">
            
           <div class="card col-xs-4 col-sm-4 col-md-4 col-lg-4 col-xl-4" style="max-width:319px;">
                <img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMzE4IiBoZWlnaHQ9IjE4MCIgdmlld0JveD0iMCAwIDMxOCAxODAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzEwMCV4MTgwCkNyZWF0ZWQgd2l0aCBIb2xkZXIuanMgMi42LjAuCkxlYXJuIG1vcmUgYXQgaHR0cDovL2hvbGRlcmpzLmNvbQooYykgMjAxMi0yMDE1IEl2YW4gTWFsb3BpbnNreSAtIGh0dHA6Ly9pbXNreS5jbwotLT48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwhW0NEQVRBWyNob2xkZXJfMTRmZTA1OGRkZmIgdGV4dCB7IGZpbGw6cmdiYSgyNTUsMjU1LDI1NSwuNzUpO2ZvbnQtd2VpZ2h0Om5vcm1hbDtmb250LWZhbWlseTpIZWx2ZXRpY2EsIG1vbm9zcGFjZTtmb250LXNpemU6MTZwdCB9IF1dPjwvc3R5bGU+PC9kZWZzPjxnIGlkPSJob2xkZXJfMTRmZTA1OGRkZmIiPjxyZWN0IHdpZHRoPSIzMTgiIGhlaWdodD0iMTgwIiBmaWxsPSIjNzc3Ii8+PGc+PHRleHQgeD0iMTE4LjA4NTkzNzUiIHk9Ijk3LjIiPjMxOHgxODA8L3RleHQ+PC9nPjwvZz48L3N2Zz4="
                     class="card-img-top" alt="Card image"/>

                <div class="card-block">
                    <h4 class="card-title">This is a title</h4>
                    <p class="card-text">Each merged squad salts the wild porter. Should the charmed church dodge a
                        camera? The gown litters the rhyme. Another discrete elevator defects over the target.</p>
                    <a href="http://sonarsystems.co.uk" class="btn btn-success">Button</a>
                </div>
            </div>

            <div class="card col-xs-4 col-sm-4 col-md-4 col-lg-4 col-xl-4" style="max-width:319px;">
                <img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMzE4IiBoZWlnaHQ9IjE4MCIgdmlld0JveD0iMCAwIDMxOCAxODAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzEwMCV4MTgwCkNyZWF0ZWQgd2l0aCBIb2xkZXIuanMgMi42LjAuCkxlYXJuIG1vcmUgYXQgaHR0cDovL2hvbGRlcmpzLmNvbQooYykgMjAxMi0yMDE1IEl2YW4gTWFsb3BpbnNreSAtIGh0dHA6Ly9pbXNreS5jbwotLT48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwhW0NEQVRBWyNob2xkZXJfMTRmZTA1OGRkZmIgdGV4dCB7IGZpbGw6cmdiYSgyNTUsMjU1LDI1NSwuNzUpO2ZvbnQtd2VpZ2h0Om5vcm1hbDtmb250LWZhbWlseTpIZWx2ZXRpY2EsIG1vbm9zcGFjZTtmb250LXNpemU6MTZwdCB9IF1dPjwvc3R5bGU+PC9kZWZzPjxnIGlkPSJob2xkZXJfMTRmZTA1OGRkZmIiPjxyZWN0IHdpZHRoPSIzMTgiIGhlaWdodD0iMTgwIiBmaWxsPSIjNzc3Ii8+PGc+PHRleHQgeD0iMTE4LjA4NTkzNzUiIHk9Ijk3LjIiPjMxOHgxODA8L3RleHQ+PC9nPjwvZz48L3N2Zz4="
                     class="card-img-top" alt="Card image"/>

                <div class="card-block">
                    <h4 class="card-title">This is a title</h4>
                    <p class="card-text">Each merged squad salts the wild porter. Should the charmed church dodge a
                        camera? The gown litters the rhyme. Another discrete elevator defects over the target.</p>
                    <a href="http://sonarsystems.co.uk" class="btn btn-success">Button</a>
                </div>
            </div>

            <div class="card col-xs-4 col-sm-4 col-md-4 col-lg-4 col-xl-4" style="max-width:319px;">
                <img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMzE4IiBoZWlnaHQ9IjE4MCIgdmlld0JveD0iMCAwIDMxOCAxODAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzEwMCV4MTgwCkNyZWF0ZWQgd2l0aCBIb2xkZXIuanMgMi42LjAuCkxlYXJuIG1vcmUgYXQgaHR0cDovL2hvbGRlcmpzLmNvbQooYykgMjAxMi0yMDE1IEl2YW4gTWFsb3BpbnNreSAtIGh0dHA6Ly9pbXNreS5jbwotLT48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwhW0NEQVRBWyNob2xkZXJfMTRmZTA1OGRkZmIgdGV4dCB7IGZpbGw6cmdiYSgyNTUsMjU1LDI1NSwuNzUpO2ZvbnQtd2VpZ2h0Om5vcm1hbDtmb250LWZhbWlseTpIZWx2ZXRpY2EsIG1vbm9zcGFjZTtmb250LXNpemU6MTZwdCB9IF1dPjwvc3R5bGU+PC9kZWZzPjxnIGlkPSJob2xkZXJfMTRmZTA1OGRkZmIiPjxyZWN0IHdpZHRoPSIzMTgiIGhlaWdodD0iMTgwIiBmaWxsPSIjNzc3Ii8+PGc+PHRleHQgeD0iMTE4LjA4NTkzNzUiIHk9Ijk3LjIiPjMxOHgxODA8L3RleHQ+PC9nPjwvZz48L3N2Zz4="
                     class="card-img-top" alt="Card image"/>

                <div class="card-block">
                    <h4 class="card-title">This is a title</h4>
                    <p class="card-text">Each merged squad salts the wild porter. Should the charmed church dodge a
                        camera? The gown litters the rhyme. Another discrete elevator defects over the target.</p>
                    <a href="http://sonarsystems.co.uk" class="btn btn-success">Button</a>
                </div>
            </div>
        </div>
    </div>
</div>

Esto ara que tu card se adapten a dispositivos. como lo muestra el snippet de arriba, espero Haberte dejado un poco mas claro como funciona y la solución.Saludos.
PD:Creo que en bootstrap 4 se agregaron mas sistemas de rejillas como xl y otras rejillas para resoluciones mas grandes.
PD: cuando pones row en una class="", significa que todo el contenio dentreo de el estara en "fila".

Answered by Sebastián Lagos Yañez on January 4, 2022

debes cambiar el display a block para la clase .card para extra small (@media xs)

@media (min-width: 576px) {
  .card-columns .card {
      display: block;
  }  
}

el ejemplo funcionando lo puedes ver aca

Answered by Mauro Petrini on January 4, 2022

Sergio. Mira yo uso bootstrap v3

Te podría ayudar esta parte:

 <div class="container">
  <div class="row">
        <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                  Hello world
        </div>
        <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                  Hello world 2
        </div>
            <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                  Hello world 3
            </div>
    </div>

También tengo esta libreria .css para los grid, es de bootstrap v4, pero ayuda a mejorar el comportamiento de los grids, claro no debería de trabajarse así pero te podría funcionar. "bootstrap-grid.css"

https://getbootstrap.com/docs/4.0/getting-started/introduction/

Answered by Dann on January 4, 2022

Add your own answers!

Ask a Question

Get help from others!

Recent Questions

Recent Answers

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP