# Layout Using CSS

1

i am trying to make Responsive layout using bootstrap as shown i the figure.and how can i do it with minimal code without using table

#.png880×562 548 Bytes

2

So you need three rows with four columns? Would something like this be in the ball park?

3

Yes . column may be 3 or four.

4

And do you need to have those borders? Or you are just showing the layout?

5

Here’s the docs for Bootstrap grid to get you started.

Here’s a few hints, with things taken straight from the docs:

  • Containers—.container for fixed width or .container-fluid for full width—center your site’s contents and help align your grid content.
  • Rows are horizontal groups of columns that ensure your columns are lined up properly.
  • Column classes indicate the number of columns you’d like to use out of the possible 12 per row.

Try it on your own, and if things look wonky, come back and let us know. Show us the code that you’ve written, and say what you expected to happen, and what you’re experiencing instead. You’ll learn so much more by trying it yourself than by us just straight-up giving you the answer.

6

I’ve created a simple design for you here on codepen.

HTML used for it:

<div class="container">
  <div class="row">
    <div class="col-xs-3">Row 1 Col 1</div>
    <div class="col-xs-3">Row 1 Col 2</div>
    <div class="col-xs-3">Row 1 Col 3</div>
    <div class="col-xs-3">Row 1 Col 4</div>
  </div>
  <div class="row">
    <div class="col-xs-3">Row 2 Col 1</div>
    <div class="col-xs-3">Row 2 Col 2</div>
    <div class="col-xs-3">Row 2 Col 3</div>
    <div class="col-xs-3">Row 2 Col 4</div>
  </div>
  <div class="row">
    <div class="col-xs-3">Row 3 Col 1</div>
    <div class="col-xs-3">Row 3 Col 2</div>
    <div class="col-xs-3">Row 3 Col 3</div>
    <div class="col-xs-3">Row 3 Col 4</div>
  </div>
</div>

I’ve used col-xs-3, this will make it be width 25% across all devices (desktop, tablet, mobile, etc)

7

I need that border as shown in the reference image.For first child div no border-left and no border-top and for last child div no border-right and border top like etc.

8

And how to bordering the grid elemnts? as in the reference image ?

9

Well, this is a bit trickier and I am on a phone, but I’ll try to explain and change it later for better looking code:

You need to get 5 things:

  1. Put the border to all the col divs, this is simple with: .col-xs-3{ border: 1px solid black }
  2. Remove the top border for the cols from the 1st row:.row:first-of-type .col-xs-3 { border-top: 0 }
  3. Remove the border bottom for the cols from the last row: .row:last-of-type .col-xs-3 { border-bottom: 0 }
  4. Remove the border left from all first cols: .col-xs-3:first-of-type { border-left: 0 }
  5. Remove the border right from all the last cols:.col-xs-3:last-of-type { border-right:0 }

This should work, if I didn’t made a mistake in the code as I am on the mobile. :slight_smile:

1 Like
10

Thank You so much for your help and time and i just updated your codepen demo http://codepen.io/nikhilrajnair/pen/yVEmoq

11

And i have one more doubt can we apply a background overlay half of the portion of background-image ?