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

HTML

Posted by Emily Easton
Emily Easton
13,575 Points

BOOTSTRAP - how do I make 'Yo!' hidden in xs and sm viewports?

Ive tried using d-sm-none as its what .hidden has been changed too ( as shown on https://getbootstrap.com/docs/4.0/migration/#responsive-utilities ) but it isn't working for me? I don't know how you are meant to use this... I am soooooooo confused :( HELP

<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- /Required meta tags -->

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
    <link rel="stylesheet" href="custom.css">
    <!-- /Bootstrap CSS -->

</head>

<body>
    <!-- Nav Bar -->
    <header>
        <nav class="navbar navbar-expand-xs navbar-light bg-light">
            <a class="navbar-brand font-weight-bold">Text</a>
            <div class="dropdown">
                <button class="btn btn-info dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Menu</button>
                <div class="dropdown-menu">
                    <a class="dropdown-item" href="index.html">Home</a>
                    <a class="dropdown-item" href="about.html">text</a>
                    <a class="dropdown-item" href="MyMoney.html">text</a>
                </div>
            </div>
        </nav>
    </header>
    <!-- /Nav Bar -->



    <h1 class="text-center"> heading heading heading heading</h1>
    <h5 class="text-center">content content content content content content content content content content</h5>

    <!-- Log In Forms-->
    <br>
    <div class="row justify-content-md-center">
        <div class="col col-md-6 col-lg-4">
            <h3 class="text-center">Existing User? Log in:</h3>
            <form class="mx-auto" style="width: 80%;">
                <div class="form-group">
                    <label for="exampleInputEmail1">Email Address</label>
                    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
                </div>
                <div class="form-group">
                    <label for="exampleInputPassword1">Password</label>
                    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
                </div>
                <button type="submit" class="btn btn-info">Submit</button>
            </form>
        </div>

        <div class="col-xl-1 d-sm-none"><p>Yo!</p></div>

        <div class="col col-md-6 col-lg-4">
            <h3 class="text-center">New user? Create an Account:</h3>
            <form class="mx-auto" style="width: 80%;">
                <div class="form-group">

                    <div class="form-row">
                        <div class="col">
                            <label for="exampleInputFirstName1">First Name</label>
                            <input type="text" class="form-control" placeholder="First name">
                        </div>
                        <div class="col">
                            <label for="exampleInputLastName1">Last Name</label>
                            <input type="text" class="form-control" placeholder="Last name">
                        </div>
                    </div>

                    <label for="exampleInputEmail1">Email Address</label>
                    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter Email">
                </div>

                <div class="form-group">
                    <label for="exampleInputPassword1">Create a Password</label>
                    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
                </div>
                <button type="submit" class="btn btn-info">Submit</button>
            </form>
        </div>
    </div>
    <!-- /Log In Forms -->
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</body>

</html>

2 Answers

nico dev
nico dev
20,364 Points

Sorry, I guess I didn't read correctly the first time. You want to do the opposite, to hide it at xs and sm size, and the rest make it displayed. Sorry for my misunderstanding!!

In that case, I think one easy way to achieve that is to

  1. Give the yo paragraph an id like id="yo".

  2. Then, from your custom.css set it to display: none.

  3. Then, give to the yo paragraph in the HTML the class d-sm-block or d-md-block, (whichever you prefer in this case).

Does that make sense?

Emily Easton
Emily Easton
13,575 Points

Thats worked! Thank you! When using this method, it makes the columns stay side by side in sm instead of wrapping around, do you have an idea why this is or how to resolve it? Is there anywhere that you learnt this from? Just so I could get a full understanding of it all?

nico dev
nico dev
20,364 Points

Great!

About your questions, I'll be glad to share anything, but I'd need you to define two things first: a) 'this' and 'it all'. :)

If by 'this' you meant the fact that you can first hide an element and then show it with a library/framework (like Bootstrap or jQuery, depending), I got this tip from an answer of Steven Parker and never forgot it again! :)

About 'it all', not sure really what you mean, but if you mean the combination/interaction between different languages/frameworks/libraries/etc. but I guess I just watch the explanations in the courses, then read the docs of the language/library, and then do a lot of mistakes and experiments, til things sink in little by little.

Let me know if I misunderstood some definition, or if I can help in anything else. And even more importantly, keep it up!!

nico dev
nico dev
20,364 Points

Oops, sorry again! I hadn't read your full question, I think.

Now, the thing is you had the col property, I think to make sure that the two columns (with forms) and the yo column will distribute the space, regardless of the breakpoint, right?

So you can fix that by making explicit the column size for each larger breakpoint that actually uses them as columns, and then remove the col property, since now you don't need it anymore (when they are columns, you made it explicit how much width each one has, right?).

So, in other words:

  1. Remove the col property from the three columns (the two long-in forms columns, and the yo div's column), and then making their width explicit when they are columns. For example:
<!-- Log In Forms-->
    <br>
    <div class="row justify-content-md-center">
        <!-- No need to `col` here, and then 6-width for large and 4 when xl.-->
        <div class="col-lg-6 col-xl-4">  
            <h3 class="text-center">Existing User? Log in:</h3>
            <form class="mx-auto" style="width: 80%;">
                <div class="form-group">
                    <label for="exampleInputEmail1">Email Address</label>
                    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
                </div>
                <div class="form-group">
                    <label for="exampleInputPassword1">Password</label>
                    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
                </div>
                <button type="submit" class="btn btn-info">Submit</button>
            </form>
        </div>

        <!-- No need to col here. 
       You can however specify width differently for different breakpoints if applicable . -->
        <div id="yo" class="col-xl-1 d-md-block"><p>Yo!</p></div>   

        <!-- Same here, no `col`, and then explicit width for lg and xl.  -->
        <div class="col-lg-6 col-xl-4">   
            <h3 class="text-center">New user? Create an Account:</h3>
            <form class="mx-auto" style="width: 80%;">
                <div class="form-group">

                    <div class="form-row">
                        <div class="col">
                            <label for="exampleInputFirstName1">First Name</label>
                            <input type="text" class="form-control" placeholder="First name">
                        </div>
                        <div class="col">
                            <label for="exampleInputLastName1">Last Name</label>
                            <input type="text" class="form-control" placeholder="Last name">
                        </div>
                    </div>

                    <label for="exampleInputEmail1">Email Address</label>
                    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter Email">
                </div>

                <div class="form-group">
                    <label for="exampleInputPassword1">Create a Password</label>
                    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
                </div>
                <button type="submit" class="btn btn-info">Submit</button>
            </form>
        </div>
    </div>
    <!-- /Log In Forms -->

Does this work as you expect? Test it out! :) And let me know if there was something you don't quite grasp there.

Emily Easton
Emily Easton
13,575 Points

Ahhhhhh ok, I'm with you now! Thats worked! What would I do without you ayyy :) Is there anything about my fundamental code that you think I could improve on?

nico dev
nico dev
20,364 Points

Great stuff! You will still need to fine-tune each breakpoint, though. But at least it already works.

I don't think I could improve it. I think the code is great. Awesome work there, especially considering that you took on the challenge to leap from the alpha to the beta with all the changes that implied!

Just more of a question than a suggestion, though, about this bit:

aria-describedby="emailHelp"

I particularly liked that you pay attention to accessibility there. Unfortunately, that's something a lot of people don't do. I want to learn more about it but I'm not quite there yet.

However, I cannot find where is that attribute pointing at? Is there any element with that ID that you purposely did not include in the code above? Or maybe it is your plan to include it later?

Thanks and keep it up!

Emily Easton
Emily Easton
13,575 Points

I have no idea haha, I've just started using it so I've been copying off of the get bootstrap site haha, also on my site (that is shown) the drop down menu doesn't stay in the viewport you have to scroll to the right to see the whole thing. How do I make it so that it stays within the viewport like it should?

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

Hi Emily Easton ,

Congrats on your efforts for this migration!

I don't know exactly what you want to achieve, but if your goal is to hide it at viewports larger than sm, you've already done it! :) I can confirm I'm testing it as I write this in a Chrome 61 (Win 10) and it's working wonders.

If you can't see it disappear as you enlarge the page, could it be a cache issue, maybe?

Or if you're testing with the size in ems, take into account this:

Note that the changes to the grid breakpoints in v4 means that you’ll need to go one breakpoint larger to achieve the same results.

Emily Easton
Emily Easton
13,575 Points

I want it hidden in viewports sm and below, and I wasn't making the screen bigger as I wasn't checking the larger view ports because I only wanted it gone in sm and xs! Haha I was doing it the wrong way around! Thank you, do you happen to know how I would do this? ( So that yo! is hidden in xs, sm but not in any other sizes?