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

Ben Ahlander
Ben Ahlander
7,528 Points
Posted by Ben Ahlander
Ben Ahlander
7,528 Points

Why is my image not staying in its column?

<!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>

    <div class="container pt-5">
  <div class="row">
    <div class="col-sm-4">
      <h3 class="mb-4">About Full Stack Conf</h3>
      <img class="mb-3 img-fluid rounded" src="img/pdx.jpg" alt="Portland">
<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>

      <!-- speakers -->
<h1 class="display-4 text-center my-5 text-muted">Speakers</h1>
[Speaker bios go here]

<!-- schedule -->
<h1 class="display-4  text-center my-5 text-muted">Schedule</h1>
[Conference schedule goes here]

</div>


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

    <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

  </body>
</html>
John Stratton
John Stratton
18,726 Points

You'll need to create your own custom CSS file and adjust the styling. Just using bootstrap's CSS will only get you started. I'm using bootstrap for a project, but I have to overwrite much of the styling from bootstrap.css to make it work for what I'm doing.

I haven't completed this course myself, so I don't know if the custom CSS is something they will have you do later.

I'm not sure if this is your actual issue, as I don't have the image file you're using, but adjusting max-width: in your custom CSS for the image may help.

.mb3 {
  max-width: 100%;
}

This will keep the image constrained to the width of it's parent container.

Just remember, you will have to create your own CSS to overwrite bootstrap's to adapt it to what you're doing.