Bootstrap columns appear very far and apart from each other

Bootstrap columns appear very far and apart from each other
0

#1

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>

#2

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.


#3

thank you man! gonna bookmark this for future reference.