CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Nuru Salihu
Nuru Salihu

Reputation: 4928

How do I make two rows of 7 columns/tiles in a row in CSS/bootstrap?

I am trying to design a simple HTML game and the layout is comprises of two rows of 7 columns/tiles in a row, and one big column/tile on.

Or simple a simulation of this game here. The middle tiles are 7 up and 7 down and a bigger tile to the left and right as is seen in the game.

I use a css script like:

.grid-row {
    margin-bottom: 15px;
}
.grid-container {
position: absolute;
z-index: 1; }

.grid-row:after {
    content: "";
    display: block;
    clear: both; }

.grid-cell {
    width: 106.25px;
    height: 106.25px;
    margin-right: 15px;
    float: left;
    border-radius: 3px;
    background: rgba(238, 228, 218, 0.35); }

The above generate my tiles in a container as required like:

<div class="row">
        <div class="game-container">
            <div class="grid-container">
               <div class="grid-row">
                        <div class="grid-cell"></div>
                        <div class="grid-cell"></div>
                        <div class="grid-cell"></div>
                        <div class="grid-cell"></div>
                        <div class="grid-cell"></div>
                        <div class="grid-cell"></div>
                        <div class="grid-cell"></div>
                    </div>
                    <div class="grid-row">
                        <div class="grid-cell"></div>
                        <div class="grid-cell"></div>
                        <div class="grid-cell"></div>
                        <div class="grid-cell"></div>
                        <div class="grid-cell"></div>
                        <div class="grid-cell"></div>
                        <div class="grid-cell"></div>
                    </div>
           </DIV>
        </div>
</div>

However, I'm having difficulty generating the two big tiles. I thought of separating the rows into left, right and center columns like:

.column-left{ float: left; width: 10%; }
.column-right{ float: right; width: 10%; }
.column-center{ display: inline-block; width: 80%; }

And then adding my grid-row above into column-center class. Then creating to two column left and right above adding a single tile i called grid-mega-cell below:

.grid-cell {
        width: 106.25px;
        height: 212.50px;
        margin-right: 15px;
        float: left;
        border-radius: 3px;
        background: rgba(238, 228, 218, 0.35); }

The above still fails. I tried using bootstrap columns as well. Two big tiles in a div.col-md.col-md-offset-1 and the middle tiles in div.col-md-8. All still fails.

Upvotes: 2

Views: 3365

Answers (3)

sabbir
sabbir

Reputation: 2025

you can try this::

 <div class="row">
     <!-- First Pane -->             
     <div class="col-md-2"></div>

     <!-- Middle Section --> 
     <div class="col-md-2">
        <!-- upper part -->
         <div class="row">
             <div class="col-md-12"></div>
         </div> 

          <!-- lower part -->
          <div class="row">
             <div class="col-md-12"></div>
         </div> 
     </div>

      <div class="col-md-2">

         <!-- upper part -->
         <div class="row">
             <div class="col-md-12"></div>
         </div> 

          <!-- lower part -->
          <div class="row">
             <div class="col-md-12"></div>
         </div> 
     </div>

      <div class="col-md-2">

         <!-- upper part -->
         <div class="row">
             <div class="col-md-12"></div>
         </div> 

          <!-- lower part -->
          <div class="row">
             <div class="col-md-12"></div>
         </div> 
     </div>

      <div class="col-md-2">

         <!-- upper part -->
         <div class="row">
             <div class="col-md-12"></div>
         </div> 

          <!-- lower part -->
          <div class="row">
             <div class="col-md-12"></div>
         </div> 
     </div>
     <!-- end of Middle Section -->


      <!-- Last Pane --> 
     <div class="col-md-2"></div>

</div>

Upvotes: 0

John Bupit
John Bupit

Reputation: 10618

You can do this using default bootstrap classes. Use this markup, inside a .container:

<div class="row">
   <!-- First Pane -->
   <div class="col-md-2">...</div>

   <!-- Middle Section -->
   <div class="col-md-8">
        <!-- First row of 4 divs -->
        <div class="row">
            <div class="col-md-3">...</div>
            <div class="col-md-3">...</div>
            <div class="col-md-3">...</div>
            <div class="col-md-3">...</div>
        </div>


        <!-- Second row of 4 divs -->
        <div class="row">
            <div class="col-md-3">...</div>
            <div class="col-md-3">...</div>
            <div class="col-md-3">...</div>
            <div class="col-md-3">...</div>
        </div>
   </div>

   <!-- Last Pane -->
   <div class="col-md-2">...</div>

</div>

To add 7 columns in a row, this answer provides a great solution. Basically, it overrides the row's behaviour by setting it to seven-cols using the following CSS, and then use 7 col-md-1s inside that row to have 7 equal columns (see the code snippet for the demo):

@media (min-width: 768px){
  .seven-cols .col-md-1,
  .seven-cols .col-sm-1,
  .seven-cols .col-lg-1  {
width: 100%;
*width: 100%;
  }
}

@media (min-width: 992px) {
  .seven-cols .col-md-1,
  .seven-cols .col-sm-1,
  .seven-cols .col-lg-1 {
width: 14.285714285714285714285714285714%;
*width: 14.285714285714285714285714285714%;
  }
}

HTML:

<div class="row seven-cols">
    <div class="col-md-1">...</div>
    <!-- 6 more of these -->
</div>

View the results in full page, to make sure that .col-md-* rules work. If you want the grid to work on small screens as well, simply replace all .col-md-* classes to .col-xs-* (or .col-sm-* based on your requirements). 

.col-md-1, .col-md-2, .col-md-3 {
background: rgba(0, 0, 0, 0.1);
outline: 1px #000 solid;
}

@media (min-width: 768px){
  .seven-cols .col-md-1,
  .seven-cols .col-sm-1,
  .seven-cols .col-lg-1  {
width: 100%;
*width: 100%;
  }
}

@media (min-width: 992px) {
  .seven-cols .col-md-1,
  .seven-cols .col-sm-1,
  .seven-cols .col-lg-1 {
width: 14.285714285714285714285714285714%;
*width: 14.285714285714285714285714285714%;
  }
}

/**
 *  The following is not really needed in this case
 *  Only to demonstrate the usage of @media for large screens
 */    
@media (min-width: 1200px) {
  .seven-cols .col-md-1,
  .seven-cols .col-sm-1,
  .seven-cols .col-lg-1 {
width: 14.285714285714285714285714285714%;
*width: 14.285714285714285714285714285714%;
  }
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row">
   <!-- First Pane -->
   <div class="col-md-2">First<br><br>Pane</div>

   <!-- Middle Section -->
   <div class="col-md-8">
        <!-- First row of 4 divs -->
        <div class="row seven-cols">
            <div class="col-md-1">R11</div>
            <div class="col-md-1">R12</div>
            <div class="col-md-1">R13</div>
            <div class="col-md-1">R14</div>
            <div class="col-md-1">R15</div>
            <div class="col-md-1">R16</div>
            <div class="col-md-1">R17</div>
        </div>


        <!-- Second row of 4 divs -->
        <div class="row">
            <div class="col-md-3">R21</div>
            <div class="col-md-3">R22</div>
            <div class="col-md-3">R23</div>
            <div class="col-md-3">R24</div>
        </div>
   </div>

   <!-- Last Pane -->
   <div class="col-md-2">Last<br><br>pane</div>

</div>

Output screenshot: Screenshot of output

Upvotes: 4

Falguni Panchal
Falguni Panchal

Reputation: 8981

html

 <div class="row">
        <div class="col-md-2">
            text</div>
        <div class="col-md-8">
            <div class="row">
                <div class="col-md-3">
                    text</div>
                <div class="col-md-3">
                    text</div>
                <div class="col-md-3">
                    text</div>
                <div class="col-md-3">
                    text</div>
                <div class="col-md-3">
                    text</div>
                <div class="col-md-3">
                    text</div>
                <div class="col-md-3">
                    text</div>
                <div class="col-md-3">
                    text</div>
            </div>
        </div>
        <div class="col-md-2">
            text</div>
    </div>

Upvotes: 1

Related Questions