Showing 2 columns

Showing 2 columns
0

#1

Is there an easy way to use bootstrap to make my images fit in two columns using html?

<h1>Enjoy My Portfolio</h1>
     <div class="container">
  <div class="row ">
    <div class="col-xs-6">
      <img id="i1" src="https://i.imgur.com/idiJIh9.png ">
      <a href="http://eventballoons-com.stackstaging.com "><h3>Balloons Site</h3></a>
    </div>
      <div class="row">
      <div class="col-xs-6">
       <img id="i2" src="https://i.imgur.com/AzgTkVm.png">
       <a href="https://codepen.io/tovasfo/full/baZdvV"><h3>Tribute Page</h3></a>
        </div>
         <div class="row">
      <div class="col-xs-6">
        <img id="i3" src="https://i.imgur.com/bJc1dG8.png"><a href="http://teletooncopy-com.stackstaging.com"><h3>Teletoon.com Copy</h3></a>
         </div>


#i1 {
  height:350px;
  width:500px;
  margin-top:75px;
}

#i2 {
  height:350px;
  width:500px;
  margin-top:75px;
  margin-left:80px;
}

#i3 {
  height:350px;
  width:500px;
}

#2

You seem to be missing some html at the bottom. Can you post all the html and css code?

Also, your images are not showing up, because imgur.com does not allow hot-linking as you are doing from your Codepen.


#3

img’s should have class=“img img-responsive”


#4

It shows up on my codepen but you can use stock images and the result would be the same. I don’t know what you mean by missing code.


#5

I will try that solution.


#6

You are missing several </div> (closing div tags).

<h1>Enjoy My Portfolio</h1>
<div class="container">
  <div class="row ">
    <div class="col-xs-6">
      <img id="i1" src="https://i.imgur.com/idiJIh9.png ">
      <a href="http://eventballoons-com.stackstaging.com ">
        <h3>Balloons Site</h3>
      </a>
    </div>
    <div class="row">
      <div class="col-xs-6">
        <img id="i2" src="https://i.imgur.com/AzgTkVm.png">
        <a href="https://codepen.io/tovasfo/full/baZdvV">
          <h3>Tribute Page</h3>
        </a>
      </div>
      <div class="row">
        <div class="col-xs-6">
          <img id="i3" src="https://i.imgur.com/bJc1dG8.png">
          <a href="http://teletooncopy-com.stackstaging.com">
            <h3>Teletoon.com Copy</h3>
          </a>
        </div>
      </div> <!-- this was missing -->
    </div> <!-- this was missing -->
  </div> <!-- this was missing -->          
</div> <!-- this was missing -->   

#7

I used that but it takes up most of the columns. I just want them side by side.


#8

If you want the images to be side by side, then you were still missing </div> tags, but it was for closing your divs with class=“row”. See how I rewrote your code below with the rows closed. Also, I incorporated the img-responsive class as suggested by @owel.
HTML:

<h1>Enjoy My Portfolio</h1>
<div class="container">
  <div class="row">
    <div class="col-xs-6">
      <img class="img-responsive" id="i1" src="https://i.imgur.com/idiJIh9.png">
      <a href="http://eventballoons-com.stackstaging.com">
        <h3>Balloons Site</h3>
      </a>
    </div>
    <div class="col-xs-6" >
      <img class="img-responsive" id="i2" src="https://i.imgur.com/AzgTkVm.png">
      <a href="https://codepen.io/tovasfo/full/baZdvV">
        <h3>Tribute Page</h3>
      </a>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-6 col-offset-6">
      <img class="img-responsive" id="i3" src="https://i.imgur.com/bJc1dG8.png">
      <a href="http://teletooncopy-com.stackstaging.com">
        <h3>Teletoon.com Copy</h3>
      </a>
    </div>
  </div>
</div>

CSS:

#i1, #i2, #i3 {
  height:350px;
  width:500px;
}

#9

Thanks but for doing the rest of the images from 4 up to 8 using <div class="col-xs-6 col-offset-6"> does not work. How would you style those divs for the rest of the images?


#10

Just remove the col-offset-6 class.


#12

I did but it seems to make images on my left column instead of both right and left.


#13

I would need to see your latest code to make any further suggestions.


#14

https://codepen.io/tovasfo/pen/rpwbZQ I am using col-md-6 but it should not matter because it’s for desktops.


#15

You should have two divs with class=“col-md-6” nested in each div with class=“row”. The first two images are like I describe:

<div class="row">
  <div class="col-md-6">
    <img class="img-responsive" id="i1" src="https://i.imgur.com/idiJIh9.png">
    <a href="http://eventballoons-com.stackstaging.com">
      <h3>Balloons Site</h3>
    </a>
  </div>
  <div class="col-md-6">
    <img class="img-responsive" id="i2" src="https://i.imgur.com/AzgTkVm.png">
    <a href="https://codepen.io/tovasfo/full/baZdvV">
      <h3>Tribute Page</h3>
    </a>
  </div>
</div>

The other rows only have one column each, so that is why they are all on the left side stacked in one column. See my comments on your third and fourth images below.

<div class="row">
  <div class="col-md-6 col-offset-6">
    <img class="img-responsive" id="i3" src="https://i.imgur.com/bJc1dG8.png">
    <a href="http://teletooncopy-com.stackstaging.com">
      <h3>Teletoon.com Copy</h3>
    </a>
  </div>
</div> <!--- delete this line -->
<div class="row"> <!--- delete this line -->
  <div class="col-md-6"> 
    <img class="img-responsive" src="https://i.imgur.com/r9bpuLO.png" id="i4">
    <a href="http://testingokay-com.stackstaging.com/">
      <h3>Reaction Tester</h3>
    </a>
  </div>
</div>

#16

Thank you for your assistance I just would like to know why do u need the col-offset-6?