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 Bootstrap 4 Basics (Retired) Responsive Layouts with the Bootstrap Grid Styling Content

Posted by Collin Zvenhamo
Collin Zvenhamo
7,683 Points

My html code using bootstraps is not responsive. 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Full Stack Conf</title>
    <!-- bootstrap css -->

  </head>
  <body>
<!--About-->
<div class="container">
  <div class="row">
    <div class="col-sm-4">
        <h3>About Full Stack Conf</h3>
        <p>The beautiful city of Portland, Oregon will be the host city for Full Stack Conf!</p>
        <p>Explore the future of JavaScript with a lineup of industry professionals. Discover new techniques to advance your career as a web developer.</p>
    </div>
    <div class="col-sm-4">
      <h3>Expert Speakers</h3>
      <p>Our expert speaker lineup was just announced, so don't wait too long before grabbing your tickets!</p>
      <p>Want to meet the international JavaScript community and share skills with some of the world's top experts, hackers, and makers? Be the first to know what to expect for the future of JavaScript.</p>
      <p>Full Stack Conf is committed to being inclusive and welcoming for everyone. We look forward to another intensive day of learning and sharing.</p>    </div>
    <div class="col-sm-4">
                <h3>What You'll Learn</h3>
          <ul>
            <li><strong>MongoDB</strong>: NoSQL database</li>
            <li><strong>Angular</strong>: JavaScript framework</li>
            <li><strong>Express</strong>: Framework for Node</li>
            <li><strong>Node.js</strong>: JavaScript environment</li>
            <li><strong>ES2015</strong>: Latest version of JavaScript</li>
            <li><strong>Babel</strong>: JavaScript compiler</li>
          </ul>
    </div>
  </div>
<!--  /about-->
</div>
    <!--/container-->

    <!-- jQuery first, then bootstrap js -->

  </body>
</html>
Christian Andersson
Christian Andersson
8,712 Points

I cannot read this code mate, please format it.

Collin Zvenhamo
Collin Zvenhamo
7,683 Points

oops I forgot to check it formatted from the source. Let me c what I can do.

Kristopher Van Sant
Kristopher Van Sant
Courses Plus Student 18,830 Points
Kristopher Van Sant
Kristopher Van Sant
Courses Plus Student 18,830 Points

Hey there Collin! I went ahead and added the needed markdown around your code so that it displays properly. When you have a chance, review the markdown cheatsheet. For code to display properly it needs three back-ticks, ```, before and after it.

3 Answers

Matt Milburn
Matt Milburn
20,786 Points
Matt Milburn
Matt Milburn
20,786 Points

Assuming that the <!-- bootstrap css --> comment is a placeholder for Bootstrap actually being loaded into the <head>, this looks satisfactory for a responsive site.

The only thing I see that is out of place to me, is the shrink-to-fit part of the <meta name="viewport"> tag. That property is specific to safari so it may be of little-to-no use to you. In fact... I'm not 100% sure about this, but it may be possible that this property is unknown to other browsers and therefore the whole attribute on the tag becomes ignored.

If that's the case, then that would be the reason you aren't getting a responsive layout. Otherwise, we will need to have a better understanding of your code.

Sherrie Gossett
Sherrie Gossett
14,924 Points
Sherrie Gossett
Sherrie Gossett
14,924 Points

Add this after your code comment: <!-- bootstrap css -->

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css" integrity="sha384-2hfp1SzUoho7/TsGGGDaFdsuuDL0LX2hnUp6VkX3CUQ2K4K+xjboZdsXyp4oUHZj" crossorigin="anonymous">

Add this after your code comment: <!-- jQuery first, then bootstrap js --> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js" integrity="sha384-THPy051/pYDQGanwU6poAc/hOdQxjnOEXzbT+OuUAFqNqFjL+4IGLBgCJC3ZOShY" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js" integrity="sha384-Plbmg8JY28KFelvJVai01l8WyZzrYWG825m+cZ0eDDS1f7d/js6ikvy1+X+guPIB" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/js/bootstrap.min.js" integrity="sha384-VjEeINv9OSwtWFLAtmc4JCtEJXXBub00gtSnszmspDLCtC0I4z4nqz7rEFbIZLLU" crossorigin="anonymous"></script>
Kristopher Van Sant
PLUS
Kristopher Van Sant
Courses Plus Student 18,830 Points
Kristopher Van Sant
Kristopher Van Sant
Courses Plus Student 18,830 Points

I agree with what Matt said. Is this copied directly from your code? Or have you removed bits for this post and replaced them with comments? As he mentioned you have a comment for where your reference to bootstrap should be, <!-- bootstrap css --> . In addition to that you also have a comment for where your jQuery and Javascript should be, <!-- jQuery first, then bootstrap js --> , which I believe you need in place as well for Bootstrap to work properly.