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 Column Ordering and Offsetting

mohammed mayat
mohammed mayat
4,228 Points
Posted by mohammed mayat
mohammed mayat
4,228 Points

.hidden-xs-down

i tried hidding image when in portratin view on phone it does not seem to work

<img class="img-fluid rounded .hidden-xs-down" src="images/portland.jpg" alt="portland Conference">

nico dev
nico dev
20,364 Points
nico dev
nico dev
20,364 Points

Try removing the dot before hidden-xs-down.

Does it work as expected now or not yet?

mohammed mayat
mohammed mayat
4,228 Points
mohammed mayat
mohammed mayat
4,228 Points

i removed the dot still not working

Ivo Vieira
Ivo Vieira
5,443 Points

Hi Mohammed,

Boostrap beta has been released and with it they removed the .hidden class. The course will need to be updated. Check my other question, because I also speak about it and it also has to do with the changes of the beta release: https://teamtreehouse.com/community/bootstrap-4-beta-has-been-released-and-i-think-they-removed-the-pull-and-push-is-that-correct

Quinton Dobbs
Quinton Dobbs
5,149 Points
Quinton Dobbs
Quinton Dobbs
5,149 Points

I don't know if you still need help, I couldn't find a definitive answer in the comments. But, I got it to work by typing:

<img class="mb-3 img-fluid rounded d-none d-sm-block" src="img/portpan.jpg"

Instead of (.hidden-xs-down), do (.d-none) then (.d-sm-block). I think the first class makes it hidden for every size going from extra small to extra large. But the second class blocks it at the small size, only making the extra small size hidden.

nico dev
nico dev
20,364 Points
nico dev
nico dev
20,364 Points

Wow, great spot, Ivo Vieira, I didn't notice that Bootstrap has released the 4 Beta!!

You're totally right that they might need to update the course.

However, just to avoid confusion if someone finds this question in the meantime, anyone can still go to this page and, from the dropdown at the top right corner, select the V 4 alpha 6, and work from there. I am not suggesting that's better than getting acquainted with the newer version, but at least if they feel more comfortable with the notes of the course, until it's updated, that could help.

Quinton Dobbs, the definitive answer in the comments was that Mohammed was using the Bootstrap 3.3.7 (see the last lines of code in the Best Answer comment), and he was encouraged to use the V4 alpha 6 for his code to work. Take into account what Ivo commented too. The Beta 4 has been released and it also brings some changes, so follow his link if you want to use the Beta 4 and get acquainted with the changes.

Audra Ogilvy
Audra Ogilvy
3,142 Points
Audra Ogilvy
Audra Ogilvy
3,142 Points

Bootstrap 4 beta took out the hidden classes. Instead, put these class codes in your img tag: "d-none d-sm-block".

So the img tag will look like this:

<img class="mb-3 img-fluid rounded d-none d-sm-block" src="img/pdx.jpg" alt="Portland">

4 Answers

mohammed mayat
mohammed mayat
4,228 Points
mohammed mayat
mohammed mayat
4,228 Points 
<!DOCTYPE html>
<html lang="en">
  <head>
        <title>Full Stack Conf</title>
    <!-- Required meta tags always come first -->
    <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">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="bootstrapFramework3.3.7/css/bootstrap.min.css">

    <!--My stylesheet-->
    <link rel="stylesheet" href="css/mystyles.css">
  </head>
  <body class="bg-default">

<!-- nav bar start-->
  <nav class="navbar navbar-inverse bg-primary navbar-fixed-top">
   <div class="container">
    <ul class="nav navbar-nav navbar-left">
      <li class="nav-item active">
        <a class="nav-link" href="#Home">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#about">About</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#speakers">Speakers</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#scedule">Scedule</a>
      </li>
    </ul>
    <ul class="nav navbar-nav navbar-right">
    <a class="nabvar-brand" href="https://teamtreehouse.com/home">Prersented by Treehouse</a>
       </ul>
  </div>
</nav>
<!--navbar finish update in your own styles   -->

<!--jumbotron start  -->
  <div class="jumbotron jumbotron-fluid bg-info">
  <div class="container text-center bg-info">
    <h1 class="display-2">Full Stack Conf</h1>
    <p class="lead">One Day Conferenece about all thing Javascript</p>
  </div>
      </div>
<!--jumbotrone end  jumbrotron jumbrotone-fluid -->


   <div class="container text-center">
    <h1 class="display-1 m-t-3">Full Stack Conf</h1>
    <p class="lead m-b-3">Coming Soon, a One day conference about all things Javascript</p>

     <div class="col-lg-6 col-md-offset-3">
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Enter Your Email for Info...">
      <span class="input-group-btn">
        <button class="btn btn-primary" type="button">Sign Up</button>
      </span>
    </div>
  </div>
      </div>

      <div class="container pt-5">
<!--  about    -->
  <div class="row">
    <div class="col-sm-6 col-sm-push-3">
<!-- when pushing or pulling column do opposite example "col-sm-6 col-sm-push-3"
"col-sm-3 col-sm-pull-6"> -->
     <h3 class="mb-4">About Full Stack Conf</h3>
     <img class="img-fluid rounded hidden-xs-down" src="images/portland.jpg" alt="portland Conference" width="100%">
<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-3 col-sm-pull-6">
     <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-3">
      <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 end-->

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

<!-- signup form -->
<hr>
<div class="row py-4 text-muted">
  <div class="col-md-6 col-xl-5 offset-xl-2">
    <p><strong>About Treehouse</strong></p>
    <p>Treehouse brings affordable technology education to people everywhere to help them achieve their dreams and change the world.</p>
  </div>
  <div class="col-md-6">
    <p><strong>Stay up-to-date on Full Stack Conf</strong></p>
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Email">
      <span class="input-group-btn">
        <button class="btn btn-primary" type="button">Sign up</button>
      </span>
    </div>
  </div>
</div>
<hr><!-- /signup form -->
</div><!--container end-->

    <!-- jQuery first, then Bootstrap JS. -->
    <script src="bootstrapFramework3.3.7/jquery/jquery-3.2.1.min%20(2).js"></script>
    <script src="bootstrapFramework3.3.7/js/bootstrap.min.js"></script>
  </body>
</html>
nico dev
nico dev
20,364 Points
nico dev
nico dev
20,364 Points

Thank you Mohammed for sharing your code. That definitely helps.

Now I must comment you this before debugging any further. Because I think this could be your issue. I noticed that you didn't include the Bootstrap from the CDN like I think Guil did in:

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script>

... but maybe you have your reasons for it (like Internet connectivity, etc.) so it's alright. However, I've noticed particularly that the name of your Bootstrap folder seems to be bootstrapFramework3.3.7. Now if I'm not wrong, it's probably that you've downloaded the Bootstrap 3, instead of v4, and trust me, they have a world of differences!

This is where you get the Bootstrap 4, as opposed to this that's only the Bootstrap 3 (although you could always use the cdn, like Guil in the link shown above in the code snippet, which can be sometimes be more efficient for many reasons).

Please check and try that and tell me if using Bootstrap 4 it worked. I bet you it does (I tried it myself with Bootstrap 4 and the image boom, vanishes!).

Don't worry, this stuff happens a lot, but I have to say congrats for your persistence and effort: that makes the difference between getting stuck and remain there, or getting stuck, solving it and learning from it. :)

nico dev
nico dev
20,364 Points
nico dev
nico dev
20,364 Points

OK, what about your environment, Mohammed?

a) Are you working with workspaces or your own editor?

b) Try this: open the page in the browser in your computer and reduce it until the size of the portrait (less than 544px according to the docs). Does it work in that environment?

Thanks!

mohammed mayat
mohammed mayat
4,228 Points
mohammed mayat
mohammed mayat
4,228 Points

working on brackets i have reduce it portrait mode check the class still not working

nico dev
nico dev
20,364 Points
nico dev
nico dev
20,364 Points

Hmm, I see. What about if you inspect the image in your browser? What do you see when you inspect it? Do all these classes appear there?

Well, as much as I wanted to avoid this, I guess I will then have to ask you to share your code. Would that be possible? Context would help a lot. And I am assuming your code is a little different from the one in the video, because in the downloads, there is no portland.jpg image, and the folder is named differently (img, instead of your images), so I guess you'll need to really share your code if possible, and if you can comment your folder structure a little, too.

Rhys Kearns
Rhys Kearns
4,976 Points
Rhys Kearns
Rhys Kearns
4,976 Points

"img-fluid rounded hidden-xs-down" Should work perfectly aslong as you have the correct classes