HTML Question

Aligning my legends

I just want to know how to align this or make a column of this? I just want in the first row must be 4 colors and the rest will follow.

click to view the image

My code.

<div class="container">
<div class="row">
<div class="col-lg-12 text-center"></div>
<div id="calendar" class="col-centered">
<h3>Legends</h3>
<div class="box-pink">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Kiamba
</div><br/>
<div class="box-ygreen">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Alabel
</div><br/>
<div class="box-sblue">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Maitum
</div><br/>
<div class="box-dgreen">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Malungon
</div><br/>
<div class="box-orange">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Glan
</div><br/>
<div class="box-rblue">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;South&nbsp;Cotabato
</div><br/>
<div class="box-yellow">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Gensan
</div>
</div>
</div>

Answer

I didn't really get your question but is this what you need? Several rows with 4 columns in each of them? Take a look at the fiddle and see if it's what you need. You just need to change the position of the text wherever you seem fit.

Possible Solution

    <div class ="container">
   <div class = "row">
    <h2>Legends</h2>
    <div class ="col-md-3 col-xs-3 col-lg-3">
    <img src ="http://tryingtobegood.com/wp-content/uploads/2011/05/straight-line-example-150x150@2x.png" id="test-img">
    <p >Kiamba</p>
    </div>
    <div class ="col-md-3 col-xs-3 col-lg-3">
    <img src ="http://tryingtobegood.com/wp-content/uploads/2011/05/straight-line-example-150x150@2x.png" id="test-img">
    <p>Alabel</p>
    </div>
    <div class ="col-md-3 col-xs-3 col-lg-3">
    <img src ="http://tryingtobegood.com/wp-content/uploads/2011/05/straight-line-example-150x150@2x.png" id="test-img">
    <p>Maitum</p>
    </div>
    <div class ="col-md-3 col-xs-3 col-lg-3">
    <img src ="http://tryingtobegood.com/wp-content/uploads/2011/05/straight-line-example-150x150@2x.png" id="test-img">
    <p>Lungon</p>
    </div>
    <div class ="col-md-3 col-xs-3 col-lg-3">
    <img src ="http://tryingtobegood.com/wp-content/uploads/2011/05/straight-line-example-150x150@2x.png" id="test-img">
    <p>Glan</p>
    </div>
    <div class ="col-md-3 col-xs-3 col-lg-3">
    <img src ="http://tryingtobegood.com/wp-content/uploads/2011/05/straight-line-example-150x150@2x.png" id="test-img">
    <p>South Catabato</p>
    </div>
    <div class ="col-md-3 col-xs-3 col-lg-3">
    <img src ="http://tryingtobegood.com/wp-content/uploads/2011/05/straight-line-example-150x150@2x.png" id="test-img">
    <p>Gensan</p>
    </div>
    <div class ="col-md-3 col-xs-3 col-lg-3">
    <img src ="http://tryingtobegood.com/wp-content/uploads/2011/05/straight-line-example-150x150@2x.png" id="test-img">
    <p>Legend8</p>
    </div>
   </div>
</div>
Comments