Display

Question

Hey everyone, im trying to get these four images to show in a 2x2 configuration without using a table for this.

<section class="container image-grid sm-col-6">

<div class="row1 sm-col-6">
<p>Weddings</p>
<a href="leafring.jpeg">
<img src="Leafring"/></a>

<div class="grad sm-col-6">
<p>Graduations</p>
<a href="Grad.jpg">
<img src="Graduation" />

<div class="family sm-col-6">
<p>Family</p>
<a href="family">
<img src="Family">

<div class="children sm-col-6">
<p>Children</p>
<a href="Adalyn.jpg">
<img src="adalyn">
</div>
</div>
</div>
</div>
</section>

Answer 1

It's look like you're using a bootstap-like css framework, don't you?
I suggest you to precise it in question and/or tags ;)

Answer 2

I never had used bootstrap, but I would say that you bad mix rows and columns...
I think you must do something like:

<section class="container image-grid sm-col-6">

<div class="row1 row"> <!-- container row ( bootstrap class 'row' + custom class 'row1'? ) -->

<div class="row1 sm-col-6"> <!-- container cell ( column of row ) / custom class 'row1'? -->
<p>Weddings</p>
<a href="leafring.jpeg"><img src="Leafring"/></a> <!-- here img src seems to not be valid? -->
</div> <!-- close container cell here ( you had nested all your div ) -->

<div class="grad sm-col-6"> <!-- 2nd cell ( 1st row ) -->
<p>Graduations</p>
<a href="Grad.jpg"><img src="Graduation" /></a> <!-- don't forgot to close tags: here you don't have close the <a> -->
</div> <!-- closing 2nd cell of first row -->

</div> <!-- closing first row -->

<div class="family row"> <!-- same a previous row for all rows... -->

<div class="family sm-col-6"> <!-- and cells... -->
<p>Family</p>
<a href="family"><img src="Family"></a> <!-- and still closing tags forgotten -->

</div>

<div class="children sm-col-6">
<p>Children</p>
<a href="Adalyn.jpg"><img src="adalyn"></a> <!-- ... -->
</div>

</div>

</section>

Answer 3

You still forgot some closing </div> ;)

<div class="container image-grid">

<div class="row">
<div class="col-sm-6">
<p>Weddings</p>
<a href="leafring.jpeg"><img src="https://drive.google.com/uc?id=0B4TzFK72_FKlcjh2U28teWxQcEk"></a>
</div>
<div class="grad sm-col-6">
<p>Graduations</p>
<a href="Grad.jpg"><img src="https://drive.google.com/uc?id=0B4TzFK72_FKlM093eG56SlR3MEE"></a>
</div>
</div>

<div class="row">
<div class="family sm-col-6">
<p>Family</p>
<a href="kevfam.jpg"><img src="https://drive.google.com/uc?id=0B4TzFK72_FKlWlN3RmhxTzFxNUk"></a>
</div>
<div class="children sm-col-6">
<p>Children</p>
<a href="Adalyn.jpg"><img src="https://drive.google.com/uc?id=0B4TzFK72_FKlU2Q1MGtiUkg5WmM"></a>
</div>
</div>

</div>

Clean indentation is usefull for better writting/reading/debuging :P

Answer 4

yeah, turns out i was using the rows and col. wrong with bootstrap, I got it all straightend out. Thanks!

Here is what it turned into.

<div class="container image-grid">
<div class="row">
<div class="col-sm-6">
<p>Weddings</p>
<a href="leafring.jpeg"><img src="https://drive.google.com/uc?id=0B4TzFK72_FKlcjh2U28teWxQcEk"></a>

<div class="grad sm-col-6">
<p>Graduations</p>
<a href="Grad.jpg"><img src="https://drive.google.com/uc?id=0B4TzFK72_FKlM093eG56SlR3MEE"></a></div></div>

<div class="row">
<div class="family sm-col-6">
<p>Family</p>
<a href="kevfam.jpg"><img src="https://drive.google.com/uc?id=0B4TzFK72_FKlWlN3RmhxTzFxNUk"></a>

<div class="children sm-col-6">
<p>Children</p>
<a href="Adalyn.jpg"><img src="https://drive.google.com/uc?id=0B4TzFK72_FKlU2Q1MGtiUkg5WmM"></a></div>