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

Emily Easton
Emily Easton
13,575 Points
Posted by Emily Easton
Emily Easton
13,575 Points

BOOTSTRAP - .hidden isn't working for me. Please help!

I've tried using the class .hidden-sm to hide "Yo!' in small viewports and below but it isn't working and I don't know what I'm doing wrong? Could someone give me some advice please? Ive looked on the 'get bootstrap' website but I still can't seem to understand how to do it :(

<!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 hidden-sm"><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

Vinicius Peixoto Rocha
Vinicius Peixoto Rocha
1,300 Points
Vinicius Peixoto Rocha
Vinicius Peixoto Rocha
1,300 Points

Hi Emily in the bootstrap 4 the hidden classes are removed, see this link

https://getbootstrap.com/docs/4.0/migration/#responsive-utilities

i use the media queries to make my breakpoints, its like a

@media screen and (min-width:421px) { .visible-xs {display:none} } @media screen and (max-width:420px) { .visible-xs {display:block} }

Vinicius Peixoto Rocha
Vinicius Peixoto Rocha
1,300 Points

maybe you need to use this version to apply the hidden and visible classes

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

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

Emily Easton
Emily Easton
13,575 Points
Emily Easton
Emily Easton
13,575 Points

As if, trust me to use something that they have taken out! Haha thank you!

Vinicius Peixoto Rocha
Vinicius Peixoto Rocha
1,300 Points
Vinicius Peixoto Rocha
Vinicius Peixoto Rocha
1,300 Points

:) haha i already had the same problem