search

Home  >  Q&A  >  body text

How do I tune these cards to respond with Boostrap 4?

How to make each row display 4 cards, and of course make them stack if the screen size changes. Ideally there should be some space between them. I've tried every possible combination I could research. 

#cardsContainer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    overflow-y: scroll;
    overflow: hidden;
    height: 1200px;
  }

  .card {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 16px;
    width: calc(25% - 16px);
    padding-bottom: 10px;
    font-size: 12px;
    border-radius: 5px !important;
    flex-basis: 25%;
    outline-width: 0px;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    outline: none;
    border: none;
    border-radius: 7px;
  }

  /* Remove extra left and right margins, due to padding */
  .row {
    margin: 0 -5px;
  }

  /* Clear floats after the columns */
  .row:after {
    content: "";
    display: table;
    clear: both;
  }

  @media only screen and (max-width: 767px) {
    .card {
      width: 100%;
      margin-bottom: 10px;
    }
  }
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
</script>
<div id="cardsContainer">
  <div class="row">
    <div class="card-group">
      <div class="card">
        <div class="card-body">
          <form>
            <div class="form-group row">
              <div class="col-sm-6">
                <label for="quarter">Quarter:</label>
                <select class="form-control" value="1">
                  <option value="1" selected="">1</option>
                  <option value="2">2</option>
                  <option value="3">3</option>
                  <option value="4">4</option>
                </select><label for="monthNum">Month:</label>
                <select class="form-control" value="2">
                  <option value="1">1</option>
                  <option value="2" selected="">2</option>
                  <option value="3">3</option>
                  <option value="4">4</option>
                </select></div>
              <div class="col-sm-6"><label for="weekNum">Week:</label>
                <select class="form-control" value="1">
                  <option value="1" selected="">1</option>
                  <option value="2">2</option>
                  <option value="3">3</option>
                  <option value="4">4</option>
                </select><label for="date">Date:</label>
                <input type="date" class="form-control" value="2023-01-29"></div>
            </div>
            <div class="form-group"><label for="status">Status:</label>
              <select class="form-control" value="Planned">
                <option value="Planned" selected="">Planned</option>
                <option value="Published">Published</option>
                <option value="Cancelled">Cancelled</option>
              </select>
            </div>
            <div class="form-group img">
              <label for="status">Image URL:</label>
              <input type="text" class="form-control imgLink" value="https://stimg.cardekho.com/images/carexteriorimages/930x620/Tesla/Model-S/5252/1611840999494/front-left-side-47.jpg">
              <a href="https://stimg.cardekho.com/images/carexteriorimages/930x620/Tesla/Model-S/5252/1611840999494/front-left-side-47.jpg" target="_blank">
                <img src="https://stimg.cardekho.com/images/carexteriorimages/930x620/Tesla/Model-S/5252/1611840999494/front-left-side-47.jpg" class="card-img" height="190px">
              </a>
            </div>
            <div class="form-group">
              <label for="post">Post:</label>
              <textarea class="form-control post">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum /</textarea>
            </div>
            <div class="form-group">
              <label for="publishedPostLink">Published Link:</label>
              <a href="https://posts.gdle/nTUL97" target="_blank">
                <input type="text" class="form-control" value="https://posts.glde/nTUL97"></a></div>
            <div class="form-group" hidden="">
              <label for="postNum">Post Number:</label>
              <input type="text" class="form-control" value="1">
            </div>
          </form>
        </div>
      </div>
      <div class="card">
        <div class="card-body">
          <form>
            <div class="form-group row">
              <div class="col-sm-6">
                <label for="quarter">Quarter:</label>
                <select class="form-control" value="1">
                  <option value="1" selected="">1</option>
                  <option value="2">2</option>
                  <option value="3">3</option>
                  <option value="4">4</option>
                </select><label for="monthNum">Month:</label>
                <select class="form-control" value="2">
                  <option value="1">1</option>
                  <option value="2" selected="">2</option>
                  <option value="3">3</option>
                  <option value="4">4</option>
                </select></div>
              <div class="col-sm-6"><label for="weekNum">Week:</label>
                <select class="form-control" value="1">
                  <option value="1" selected="">1</option>
                  <option value="2">2</option>
                  <option value="3">3</option>
                  <option value="4">4</option>
                </select><label for="date">Date:</label>
                <input type="date" class="form-control" value="2023-01-29"></div>
            </div>
            <div class="form-group"><label for="status">Status:</label>
              <select class="form-control" value="Planned">
                <option value="Planned" selected="">Planned</option>
                <option value="Published">Published</option>
                <option value="Cancelled">Cancelled</option>
              </select>
            </div>
            <div class="form-group img">
              <label for="status">Image URL:</label>
              <input type="text" class="form-control imgLink" value="https://stimg.cardekho.com/images/carexteriorimages/930x620/Tesla/Model-S/5252/1611840999494/front-left-side-47.jpg">
              <a href="https://stimg.cardekho.com/images/carexteriorimages/930x620/Tesla/Model-S/5252/1611840999494/front-left-side-47.jpg" target="_blank">
                <img src="https://stimg.cardekho.com/images/carexteriorimages/930x620/Tesla/Model-S/5252/1611840999494/front-left-side-47.jpg" class="card-img" height="190px">
              </a>
            </div>
            <div class="form-group">
              <label for="post">Post:</label>
              <textarea class="form-control post">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum /</textarea>
            </div>
            <div class="form-group">
              <label for="publishedPostLink">Published Link:</label>
              <a href="https://posts.glde/nTUL97" target="_blank">
                <input type="text" class="form-control" value="https://posts.glde/nTUL97"></a></div>
            <div class="form-group" hidden="">
              <label for="postNum">Post Number:</label>
              <input type="text" class="form-control" value="1">
            </div>
          </form>
        </div>
      </div>
      <div class="card">
        <div class="card-body">
          <form>
            <div class="form-group row">
              <div class="col-sm-6">
                <label for="quarter">Quarter:</label>
                <select class="form-control" value="1">
                  <option value="1" selected="">1</option>
                  <option value="2">2</option>
                  <option value="3">3</option>
                  <option value="4">4</option>
                </select><label for="monthNum">Month:</label>
                <select class="form-control" value="2">
                  <option value="1">1</option>
                  <option value="2" selected="">2</option>
                  <option value="3">3</option>
                  <option value="4">4</option>
                </select></div>
              <div class="col-sm-6"><label for="weekNum">Week:</label>
                <select class="form-control" value="1">
                  <option value="1" selected="">1</option>
                  <option value="2">2</option>
                  <option value="3">3</option>
                  <option value="4">4</option>
                </select><label for="date">Date:</label>
                <input type="date" class="form-control" value="2023-01-29"></div>
            </div>
            <div class="form-group"><label for="status">Status:</label>
              <select class="form-control" value="Planned">
                <option value="Planned" selected="">Planned</option>
                <option value="Published">Published</option>
                <option value="Cancelled">Cancelled</option>
              </select>
            </div>
            <div class="form-group img">
              <label for="status">Image URL:</label>
              <input type="text" class="form-control imgLink" value="https://stimg.cardekho.com/images/carexteriorimages/930x620/Tesla/Model-S/5252/1611840999494/front-left-side-47.jpg">
              <a href="https://stimg.cardekho.com/images/carexteriorimages/930x620/Tesla/Model-S/5252/1611840999494/front-left-side-47.jpg" target="_blank">
                <img src="https://stimg.cardekho.com/images/carexteriorimages/930x620/Tesla/Model-S/5252/1611840999494/front-left-side-47.jpg" class="card-img" height="190px">
              </a>
            </div>
            <div class="form-group">
              <label for="post">Post:</label>
              <textarea class="form-control post">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum /</textarea>
            </div>
            <div class="form-group">
              <label for="publishedPostLink">Published Link:</label>
              <a href="https://posts.dgle/nTUL97" target="_blank">
                <input type="text" class="form-control" value="https://posdts.gle/nTUL97"></a></div>
            <div class="form-group" hidden="">
              <label for="postNum">Post Number:</label>
              <input type="text" class="form-control" value="1">
            </div>
          </form>
        </div>
      </div>
      <div class="card">
        <div class="card-body">
          <form>
            <div class="form-group row">
              <div class="col-sm-6">
                <label for="quarter">Quarter:</label>
                <select class="form-control" value="1">
                  <option value="1" selected="">1</option>
                  <option value="2">2</option>
                  <option value="3">3</option>
                  <option value="4">4</option>
                </select><label for="monthNum">Month:</label>
                <select class="form-control" value="2">
                  <option value="1">1</option>
                  <option value="2" selected="">2</option>
                  <option value="3">3</option>
                  <option value="4">4</option>
                </select></div>
              <div class="col-sm-6"><label for="weekNum">Week:</label>
                <select class="form-control" value="1">
                  <option value="1" selected="">1</option>
                  <option value="2">2</option>
                  <option value="3">3</option>
                  <option value="4">4</option>
                </select><label for="date">Date:</label>
                <input type="date" class="form-control" value="2023-01-29"></div>
            </div>
            <div class="form-group"><label for="status">Status:</label>
              <select class="form-control" value="Planned">
                <option value="Planned" selected="">Planned</option>
                <option value="Published">Published</option>
                <option value="Cancelled">Cancelled</option>
              </select>
            </div>
            <div class="form-group img">
              <label for="status">Image URL:</label>
              <input type="text" class="form-control imgLink" value="https://stimg.cardekho.com/images/carexteriorimages/930x620/Tesla/Model-S/5252/1611840999494/front-left-side-47.jpg">
              <a href="https://stimg.cardekho.com/images/carexteriorimages/930x620/Tesla/Model-S/5252/1611840999494/front-left-side-47.jpg" target="_blank">
                <img src="https://stimg.cardekho.com/images/carexteriorimages/930x620/Tesla/Model-S/5252/1611840999494/front-left-side-47.jpg" class="card-img" height="190px">
              </a>
            </div>
            <div class="form-group">
              <label for="post">Post:</label>
              <textarea class="form-control post">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum /</textarea>
            </div>
            <div class="form-group">
              <label for="publishedPostLink">Published Link:</label>
              <a href="https://posts.gdle/nTUL97" target="_blank">
                <input type="text" class="form-control" value="https://posts.gle/ndTUL97"></a></div>
            <div class="form-group" hidden="">
              <label for="postNum">Post Number:</label>
              <input type="text" class="form-control" value="1">
            </div>
          </form>
        </div>
      </div>
      <div class="card">
        <div class="card-body">
          <form>
            <div class="form-group row">
              <div class="col-sm-6">
                <label for="quarter">Quarter:</label>
                <select class="form-control" value="1">
                  <option value="1" selected="">1</option>
                  <option value="2">2</option>
                  <option value="3">3</option>
                  <option value="4">4</option>
                </select><label for="monthNum">Month:</label>
                <select class="form-control" value="2">
                  <option value="1">1</option>
                  <option value="2" selected="">2</option>
                  <option value="3">3</option>
                  <option value="4">4</option>
                </select></div>
              <div class="col-sm-6"><label for="weekNum">Week:</label>
                <select class="form-control" value="1">
                  <option value="1" selected="">1</option>
                  <option value="2">2</option>
                  <option value="3">3</option>
                  <option value="4">4</option>
                </select><label for="date">Date:</label>
                <input type="date" class="form-control" value="2023-01-29"></div>
            </div>
            <div class="form-group"><label for="status">Status:</label>
              <select class="form-control" value="Planned">
                <option value="Planned" selected="">Planned</option>
                <option value="Published">Published</option>
                <option value="Cancelled">Cancelled</option>
              </select>
            </div>
            <div class="form-group img">
              <label for="status">Image URL:</label>
              <input type="text" class="form-control imgLink" value="https://stimg.cardekho.com/images/carexteriorimages/930x620/Tesla/Model-S/5252/1611840999494/front-left-side-47.jpg">
              <a href="https://stimg.cardekho.com/images/carexteriorimages/930x620/Tesla/Model-S/5252/1611840999494/front-left-side-47.jpg" target="_blank">
                <img src="https://stimg.cardekho.com/images/carexteriorimages/930x620/Tesla/Model-S/5252/1611840999494/front-left-side-47.jpg" class="card-img" height="190px">
              </a>
            </div>
            <div class="form-group">
              <label for="post">Post:</label>
              <textarea class="form-control post">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum /</textarea>
            </div>
            <div class="form-group">
              <label for="publishedPostLink">Published Link:</label>
              <a href="https://posdts.gle/nTUL97" target="_blank">
                <input type="text" class="form-control" value="https://posts.dgle/nTUL97"></a></div>
            <div class="form-group" hidden="">
              <label for="postNum">Post Number:</label>
              <input type="text" class="form-control" value="1">
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>

P粉509383150P粉509383150242 days ago4808

reply all(1)I'll reply

  • P粉677573079

    P粉6775730792024-04-06 00:53:11

    Please read the bootstrap docs about responsive classes I used them in this code (col-md-6) in order to display two cards starting from the tablet and the larger one 4 cards are displayed on the screen (col-xl-3)

    poetry. I cleaned up the code and added a meta viewport, which is important for mobile viewing! 

    #cardsContainer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    overflow-y: scroll;
    overflow: hidden;
    /*height: 1000px; WHY?*/
  }

  .card {;
    font-size: 12px;
    border-radius: 5px !important;
    flex-basis: 25%;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    outline: none;
    border: none;
    border-radius: 7px;
    flex-direction: inherit!important;
  }

  /* .row {
    margin: 0 -5px;
  }
  .row:after {
    content: "";
    display: table;
    clear: both;
  } */

  @media only screen and (max-width: 767px) {
    .card {
      width: 100%;
      margin-bottom: 10px;
    }
  }
    

  
    
    
    

    
    

    Hello, world!

    reply
    0
  • Cancelreply