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

HTML

Posted by Jade Clarke
Jade Clarke
349 Points

How do I get my layout to work. I am using bootstrap to create a website. Help?

Creating a website using bootstrap but the layout is not consistent across all devices and the column-small is responding really strange.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Template</title>
  <meta charset="utf-8">    
  <meta name="viewport" content="width=device-width">   
  <link href="file:///Macintosh HD/Users/Edaj/Documents/Interactivity Design 2/bootstrap-3.3.5-dist/css/bootstrap.css" rel="stylesheet" media="screen">
  <link href="mystyles.css" rel="stylesheet" media="screen">
</head>
<body>
  <div class="container">
    <header class="row">
        <div class="col-lg-8 col-md-6 col-sm-4">
            <div id="feature"></div>
        </div>
        <div class="col-lg-4 col-md-4 col-sm-4">
            <div id="content">

                    <div class="col-lg-4 col-md-4 col-sm-4">
                        <div id="logo"></div>
                    </div>

                        <div id="navigation">


                                <p class="first"><a href="#">Shoes</a> <a href="#">Accessories</a><br><hr></p>

                                <p class="second"><a href="#">Locations</a> <a href="#">AboutUs</a></p>



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

        </div>

    </header>
    <section class="row">

    </section>
 </div>     
</body>
</html>

@charset "UTF-8";
/* CSS Document */

header {
  margin: 15px 0px;
}   

#feature {
    background-image:url(../images/congruent_pentagon.png);
    height:1347px;

}

#content {
    height:372px;
    background-color:#D15A5C;

}

#logo {
    background-image:url(../images/shoelogo.png);
    background-repeat:no-repeat;
    width:192px;
    height:106px;
    margin-left:70px;
    margin-top:80px;


}


.first {
    word-spacing:120px;
    padding-left:20px;
    padding-top:210px;
}

.second {
    word-spacing:120px;
    padding-left:20px;
}

#navigation {
    padding-top:60px;
}


a {
    text-decoration:none;
    color:#FFFFFF;
    font-size:16px;
    font-family: 'Open Sans', sans-serif;
}

a:hover {
    color:#CD3D47;
}

/* visited link */
a:visited {
    color:#FFFFFF;
}

/* mouse over link */
a:hover {
    color:#FFFFFF;
}

/* selected link */
a:active {
    color:#6D4DF9;
}

*EDIT: Please see how i formated the code properly by editing your answer, look what i did to ahcieve this effect.

2 Answers

Konrad Pilch
Konrad Pilch
2,435 Points
Konrad Pilch
Konrad Pilch
2,435 Points

Well, i think if you look at this convention or how its formated, and adjust it to yours , or adjust yours so it follows the same pattern:

<!-- Main jumbotron for a primary marketing message or call to action -->
    <div class="jumbotron">
      <div class="container">
        <h1>Hello, world!</h1>
        <p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
        <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more &raquo;</a></p>
      </div>
    </div>

    <div class="container">
      <!-- Example row of columns -->
      <div class="row">
        <div class="col-md-4">
          <h2>Heading</h2>
          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
          <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
        </div>
        <div class="col-md-4">
          <h2>Heading</h2>
          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
          <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
       </div>
        <div class="col-md-4">
          <h2>Heading</h2>
          <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
          <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
        </div>
      </div>

Look how the row is at the top and then the layout is nested and all in container so it stays in the middle etc..

Konrad Pilch
Konrad Pilch
2,435 Points

Remember that the row or columns add up to 12.
Its a good idea to comment your endings div because in the beginning it can get messy for sure.

Daniel Marlin
Daniel Marlin
8,128 Points
Daniel Marlin
Daniel Marlin
8,128 Points

Bootsrap makes use of a variety of pre-styled classes, each of which will have their own specified margins and padding. If you write your own CSS styles to overwrite these pre-styled classes (Especially with regards to positioning, padding and margins) all sorts of layout issues can occur.

So although you may have overwritten the styles of an element using your own custom CSS, these changes may only take effect on devices with a certain screen width. I would imagine your custom CSS doesn't overwrite some of the Bootstrap media queries for the elements that seem to be bothering you.