Bootstrap columns appear very far and apart from each other

I’ve created two rows and columns for each of them. Thing is, the photos I’ve uploaded end up in strange places as you can see in the photo below. Ideally I would want them to be blocked together with regular spaces in between them. I managed to get them centered (which i need) but they are still the same width apart as in the example photo. I included my code in case I did something wrong or am missing something here.

My Code:

<div class="well" id="well2">
  <center><p id="portfolio">Portfolio</p></center>
  <div class="row">
  <div class="col-md-6">
    <img src="http://i.cubeupload.com/PP2MFv.jpg" width=250 height=200>
  </div>
<div class="col-md-6">
  <img src="http://i.cubeupload.com/144jnQ.jpg" width="250" height=200>
</div>
</div>

The reason why you have the photos like that is because you have created two separate columns and put a photo in each of them. They are left-justified in those columns by default.
You can either try something like:

<div class="row">
      <div class="space">
        <img src="http://i.cubeupload.com/PP2MFv.jpg" width=250 height=200>
        <img src="http://i.cubeupload.com/144jnQ.jpg" width="250" height=200>
      </div>
</div>

or

<div class="row">
      <div class="col-md-6 space">
        <img src="http://i.cubeupload.com/PP2MFv.jpg" width=250 height=200>
      </div>
      <div class="col-md-6 space">
        <img src="http://i.cubeupload.com/144jnQ.jpg" width="250" height=200>
      </div>
</div>

with this for css:

.space {
  display: flex;
  flex: 1;
  justify-content: space-around;
}

play around with those two options; it depends on how you want it to look on smaller screens.

1 Like

thank you man! gonna bookmark this for future reference.