CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Sarah
Sarah

Reputation: 617

Bootstrap: how to get rid of the whitespace at the right end?

I'm using Bootstrap and using a grid system that has 4 columns in one row. I want to only use two middle columns so that I can have one image and one paragraph next to it. However, when I use 4 cols, I get the whitespace on the right side. I added the picture here: enter image description here

So according to the documentation, I should have 4 columns, and I used two middle columns, so the image and the text should be centered. But as you can see, they are not in the center. And I'm not able to get rid of the whitespace on the right. My code looks like this:

.album {
    background-color: whitesmoke;
    padding: 0;
    margin: 0;
}

.col {
    background-color: whitesmoke;
}
<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>

<div class="container album">
  <div class="row">
      <div class="col">
      </div>
      <div class="col">
          <img src="images/tour3.jpeg" class="rounded float-right d-block" width="300px">
      </div>
      <div class="col">
          <p> Welcome! </p> <p><br>
          long text here!! </p>
      </div>
      <div class="col">
      </div>
  </div>
</div>

Upvotes: 0

Views: 34

Answers (1)

Amyth
Amyth

Reputation: 1527

Which version of bootstrap are you using? If using the latest, you can use flex. Wrap the columns in:

<div class="d-flex justify-content-center">...</div>

See: https://getbootstrap.com/docs/4.0/utilities/flex/

Upvotes: 1

Related Questions