CODEWITHSUNDEEP
javascripthtmlcssbootstrap-4positioning
Truica Sorin
Truica Sorin

Reputation: 539

Bootstrap Placing Elements one under another

I'm using bootstrap to position some cards one near another but i'm not really able to do it because it always places the cards one under another.

<div class="container">
  <div class="row">
    <div class="col-8">
      <div class="col-sm-2">
        <div class='card' style='width:20rem;'>
          <img class='card-img-top' src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTtjjCv9pQRtLSNn-zjQrsdKnCFWVe-WSH7Rf_qJnXm99mrHTZL"
            alt='Card image cap'>
          <div class='card-body text-center'>
            <p class='card-text text-center' style='color: black'> Car</p>
            <ul class='list-group list-group-flush'>
              <li class='list-group-item'>
                <div class='row'>
                  <div class='col-md-6'>
                    <i class='material-icons'>&#xe227;</i><span> Price </span>
                  </div>
                  <div class='col-md-6'>
                    <i class='material-icons'>&#xe0c8;</i><span>City</span>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>

      <div class="col-sm-2">
        <div class="card" style='width:20rem;'>
          <img class='card-img-top' src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTtjjCv9pQRtLSNn-zjQrsdKnCFWVe-WSH7Rf_qJnXm99mrHTZL"
            alt='Card image cap'>
          <div class='card-body text-center'>
            <p class='card-text text-center' style='color: black'> Car</p>
            <ul class='list-group list-group-flush'>
              <li class='list-group-item'>
                <div class='row'>
                  <div class='col-md-6'>
                    <i class='material-icons'>&#xe227;</i><span> Price </span>
                  </div>
                  <div class='col-md-6'>
                    <i class='material-icons'>&#xe0c8;</i><span>City</span>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="col-4 offset-1">
    </div>
  </div>
</div>

Basically i need those 2 cards to be on the same row and one after another but i don't understand what's wrong.Are those cards too big?

Upvotes: 0

Views: 3019

Answers (1)

Griffin
Griffin

Reputation: 842

The problem is your inline style definition for your cards: width: 20rem. Essentially, you're giving the card 2/12 of the grid to work with (col-sm-2) and then giving a hard definition of the card to have a width of 20rem, which forces the next card to take up the next line.

Also, you need to specify another row after your col-8 declaration. Here's my code:

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-8">
      <div class="row">
        <div class="col-sm-6">
          <div class='card'>
            <img class='card-img-top' src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTtjjCv9pQRtLSNn-zjQrsdKnCFWVe-WSH7Rf_qJnXm99mrHTZL" alt='Card image cap'>
            <div class='card-body text-center'>
              <p class='card-text text-center' style='color: black'> Car</p>
              <ul class='list-group list-group-flush'>
                <li class='list-group-item'>
                  <div class='row'>
                    <div class='col-md-6'>
                      <i class='material-icons'>&#xe227;</i><span> Price </span>
                    </div>
                    <div class='col-md-6'>
                      <i class='material-icons'>&#xe0c8;</i><span>City</span>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>

        <div class="col-sm-6">
          <div class="card">
            <img class='card-img-top' src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTtjjCv9pQRtLSNn-zjQrsdKnCFWVe-WSH7Rf_qJnXm99mrHTZL" alt='Card image cap'>
            <div class='card-body text-center'>
              <p class='card-text text-center' style='color: black'> Car</p>
              <ul class='list-group list-group-flush'>
                <li class='list-group-item'>
                  <div class='row'>
                    <div class='col-md-6'>
                      <i class='material-icons'>&#xe227;</i><span> Price </span>
                    </div>
                    <div class='col-md-6'>
                      <i class='material-icons'>&#xe0c8;</i><span>City</span>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-4 offset-1">
    </div>
  </div>
</div>

Upvotes: 2

Related Questions