Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

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,008 Points
class="col-md-6"

Lol. Woops.

Class, ID...same thing right?

Kevin Korte
Kevin Korte
28,135 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,135 Points

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

jason chan
jason chan
31,008 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.

Nope, same issue.

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