1

Im trying to get a bootstrap column to span 2 rows. I have been been looking at How can I get a Bootstrap column to span multiple rows? and it doesnt seem to work in the context of my project.

Could someone tell me what I need to do in order to make the column on the right span 2 rows? 

<div class="container" style="background-color: #fff">
    <div class="row" style="background-color: #fff">
    <div class="col-md-4">
        <img src="public/img/index/Hola_Sevila.png" style="width:180px">
      <h6>Hola Sevilla!</h6>
      <p>I recently had the pleaseure and the privilege of travelling to the ...</p>
        <p><a href="#">Read More</a></p>
    </div>
    <div class="col-md-4">
        <img src="public/img/index/Trans_helps_children.jpg" style="width:180px">
        <h6>Translation helps children</h6>
      <p>De La Salle Solidarieta Internatazionale ONLUS is a non-profit organisation that fundraises ...</p>
        <p><a href="#">Read More</a></p>
   </div>
    <div class="col-md-4 two_row_column">
        <div class="index-b-right-1"></div>
        <div class="index-b-right-1">
            <h3>Videos</h3>
        </div>
        <div class="index-b-right-1">
            <h3>Be a Friend</h3>
        </div>
        <div class="index-b-right-2">
            <h4>You can show your appreciation and support future development              by becoming a friend of the Rosetta</h4>
        </div>
        <div class="index-b-right-3">
            <h3><a href="#">Donate</a></h3>
        </div>
        <div class="index-b-right-1"></div>

    </div>
  </div>

CSS

.index-b-right-1 {
background-color: #000;
height: 40px;
border-bottom: 2px solid white;
color: #fff;
text-align: center;
padding-bottom: 10px;
}

.index-b-right-2 {
background-color: #000;
border-bottom: 2px solid white;
color: #fff;
text-align: center;
padding: 30px 40px 30px 40px;
}

.index-b-right-3  {
background-color: #000;
height: 40px;
border-bottom: 2px solid white;
text-align: center;
padding-bottom: 10px;
}

.index-b-right-3 a {
color: #CC9900;
}
Community
  • 1
  • 1
Daniel Garland
  • 81
  • 10

1 Answers1

0

I guess this is what you wanted to do? Simple way i would explain it is you create the top most row, create the columns in the row, then in the other column, create another row which you then divide up into individual columns.

Hope it helps!

<div class="container" style="background-color: #fff">
<div class="row" style="background-color: #fff">
    <div class="col-md-4">
        <img src="public/img/index/Hola_Sevila.png" style="width:180px">
        <h6>Hola Sevilla!</h6>

        <p>I recently had the pleaseure and the privilege of travelling to the ...</p>

        <p><a href="#">Read More</a></p>
    </div>
    <div class="col-md-4">
        <div class="row">
            <div class="col-md-4">
                <img src="public/img/index/Trans_helps_children.jpg" style="width:180px">
                <h6>Translation helps children</h6>

                <p>De La Salle Solidarieta Internatazionale ONLUS is a non-profit organisation that fundraises
                    ...</p>

                <p><a href="#">Read More</a></p>
            </div>
            <div class="col-md-4 two_row_column">
                <div class="index-b-right-1"></div>
                <div class="index-b-right-1">
                    <h3>Videos</h3>
                </div>
                <div class="index-b-right-1">
                    <h3>Be a Friend</h3>
                </div>
                <div class="index-b-right-2">
                    <h4>You can show your appreciation and support future development by becoming a friend of the
                        Rosetta</h4>
                </div>
                <div class="index-b-right-3">
                    <h3><a href="#">Donate</a></h3>
                </div>
                <div class="index-b-right-1"></div>

            </div>
        </div>
    </div>
</div>

ivanorone
  • 450
  • 4
  • 17