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

Posted by Eric Conklin
Eric Conklin
8,350 Points

Bootstrap Col-MD-6, Row and Container headers not displaying properly

I have imported bootstrap into my landing page design and am working on polishing up a design I started in photoshop.

Anyways, the Col-MD-6 classes aren't displaying as expected. I contained them within a Bootstrap container and row so they would display side by side with responsive functionality.

However, they just float to the left side. Blah.

<!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">
    <meta name="generator" content="Webinar Event Landing Page by Eric Conklin">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>Event Lander</title>
  </head>
  <body>
  <!--Blue Header-->
  <div class="header-rectangle">
       <h1 class="whiteheadline">Join Us for a Free Webinar!</h1>
  </div>
  <!--Header image and form-->
  <div id="header-bg" align="center">
       <div id="cta-rectangle">
            <h1>Hello!</h1>
       </div>
  </div>

  <!--Hero-->
  <div class="hero">
       <h1 class="hero-quote">“I can’t thank you enough for your coaching and support. My business has never been more profitable or easier to manage. Thank you!” <br> -Jim Smith</h1>
  </div>

  <!--Section for content-->
  <section class = "body-content">
    <div class="container">
         <div class="row">
                   <div id="col-md-6">
                        <h1>Col-MD-6 Header</h1>
                   </div>
                   <div id="col-md-6">
                   <h1>Col-MD-6 Header</h1>
                   </div>
         </div>
    </div>
  </section>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

* {
  margin: 0px;
}

body {
width: 1024;
 }

/*Blue header*/


.whiteheadline {
    font-size: 48px;
    font-family: "Open Sans";
    color: rgb(255, 255, 255);
    font-weight: bold;
}

.header-rectangle { 
    background-color: rgb(104, 115, 251);
    text-align: center;
    line-height: 143px;
    width: 1024px;
    position: relative;
    margin: 0 auto;
}

#header-bg {
background-image: url(http://ppc-genius.com/wp-content/uploads/2015/11/sliceimage.png);
background-repeat:no-repeat;
height:426px;
width: 1024px;
position: relative;
margin: 0 auto;
z-index: 1;
overflow:auto;
}

/*CTA Rectangle and form*/

#cta-rectangle {
  background-color: rgb(224, 223, 223);
  box-shadow: 0px 9px 11.18px 1.82px rgba(0, 0, 0, 0.55);
  position: relative;
  width: 451px;
  height: 334px;
  z-index: 2;
  margin: 40px auto;
}

/*Hero separator and testimonial text*/

.hero {     
    position:relative;
    background-color: rgb(104, 115, 251);
    height:128px;
    width:1024px;
    margin: 0 auto;
    text-align:center;

}

.hero:after {
    content:'';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 0;
    height: 0;
    border-top: solid 50px rgb(104, 115, 251);
    border-left: solid 50px transparent;
    border-right: solid 50px transparent;
}

.hero-quote {
  font-size: 26px;
  font-family: "Open Sans";
  color: rgb(255, 255, 255);
  font-style: italic;
  line-height: 1.2;
  text-align: center;
  position: absolute;
  width: 989px;
  height: 88px;
  padding-top: 15px;
}

/*Body content and images*/

.body-content {
font-size: 36px;
  font-family: "Open Sans";
  color: rgb(0, 0, 0);
  line-height: 1.2;
  text-align: left;
  position: absolute;
  width: 548px;
  height: 37px;
  margin: 0 auto;
 }

3 Answers

jason chan
jason chan
31,009 Points
jason chan
jason chan
31,009 Points 
class="col-md-6"
Eric Conklin
Eric Conklin
8,350 Points

Lol. Woops.

Class, ID...same thing right?

Kevin Korte
Kevin Korte
28,148 Points
Kevin Korte
Kevin Korte
28,148 Points

Easy mistake, classes and id's are far from the same, but seem like they are, so it's easy to make this mistake

Kevin Korte
Kevin Korte
28,148 Points
Kevin Korte
Kevin Korte
28,148 Points

Your html has them as id=col-md-6. You have to, and should use a class instead.

jason chan
jason chan
31,009 Points
jason chan
jason chan
31,009 Points 
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css

Use a CDN instead, might be hierarchy of the files could be tricky. This is easier fix.

Eric Conklin
Eric Conklin
8,350 Points

Nope, same issue.

The col-md-6 elements appear on the far left of the screen stacked on top of each other.