Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS Framework Basics Prototyping with Bootstrap Using the Grid System

Posted by orange sky
.a{fill-rule:evenodd;}techdegree
orange sky
Front End Web Development Techdegree Student 4,945 Points

how to align these with grid

Hello,

To anwser this question, you will need to be connected to boostrap files. Please look at the head section for the file you will need.

When you run this code you will see a row of 4 red squares and a column of 3 small pinks quares. I would like the row of pink squares to stand right next the to the square that says 'col1'. I would like it to look like a L shape with the column of pink squares right next to the row of red squares. WOuld you happen to know how to achieve this effect.

thanks

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap Starter</title>

    <!-- Bootstrap -->
     <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
     <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css" rel="stylesheet" />


    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
    .red{
    width:100px;
    height:100px;
    background:red;
    margin-right:10px;

    }
    .pink{
    width:25px;
    height:25px;
    background:pink;
    margin-bottom:5px;
    }

    </style>

  </head>
  <body>
  <div class="container ">

    <div class="row">
        <div class="col-md-8">

            <h1>My great Site</h1>

        </div>




    </div>
    <div class="row">
        <div class="row">
            <div class="col-sm-2 pink"></div>
       </div>
       <div class="row">
            <div class="col-sm-2 pink"></div>
       </div>
       <div class="row">
            <div class="col-sm-2 pink"></div>
       </div>
        <div class="col-md-3 red">Col 1 </div>
        <div class="col-md-3 red">Col 2 </div>
        <div class="col-md-3 red">Col 3 </div>
        <div class="col-md-3 red">Col 4 </div>

    </div>


  </div>


 <script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

  </body>
</html>
Cameron Bourke
Cameron Bourke
10,198 Points
Cameron Bourke
Cameron Bourke
10,198 Points

Hey, when asking questions like this in the future you might have a better chance of getting an answer if you put your code into something like a pen @ http://codepen.io/,

All the best!

David Rynn
David Rynn
10,554 Points
David Rynn
David Rynn
10,554 Points

I had to adjust your code to be consistent with bootstrap, as I understand it. I believe this code does what you want in a large browser window:

<!DOCTYPE html>


    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap Starter</title>

    <!-- Bootstrap -->
     <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
     <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css" rel="stylesheet" />


    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
    .red{

    background:red;


    }
    .pink{

    background:pink;

    }

    </style>
<div class="container">
    <div class="row">
        <div class="col-md-12">

            <h1>My great Site</h1>

        </div>
    </div>

        <div class="row">
            <div class="col-sm-3 pink">Row 1</div>
       </div>
       <div class="row">
            <div class="col-sm-3 pink">Row 2</div>
       </div>
       <div class="row">
            <div class="col-sm-3 pink">Row 3</div>
       </div>
       <div class="row">
             <div class="col-md-3 red">Row 4, Col 1 </div>
             <div class="col-md-3 red">Row 5, Col 2 </div>
            <div class="col-md-3 red">Row 6, Col 3 </div>
            <div class="col-md-3 red">Row 7, Col 4 </div>
         </div>
</div>

Remember, you want each row to add up to 12 column spaces, in general. So if you get that "L" shape, it will only be like that in a large browser window. The whole point of bootstrap is that it changes the layout with the size of the browser window. So all the row and column labels will be irrelevant when you resize the window. And the "L" shape is not really compatible with a bootstrap framework.