Can't hide an element with bootstrap 4?

Question

I'm trying to hide an element with bootstrap 4 .d-hide class, but it's not working. Any help will be appreciated. I want to hide the header-social-media in small devices. Here is my code:

<div class="container-fluid row mini-nav">
            <!-- Logo Section -->
            <div class="col-xl-3 col-md-4 col-sm-6 col-xs-6 site-logo">
                <a href="#" class=""><img src="img/logo.png" alt="Logo Image"></a>
            </div>
            <!-- Header Social Links -->
            <div class="col-xl-4 col-md-4 col-sm-4 header-social-media">
                <ul class="list-inline">
                    <li class="list-inline-item">
                        <a class="">
                            <i class="fab fa-facebook-f"></i>
                        </a>
                    </li>
                    <li class="list-inline-item">
                        <a class="">
                            <i class="fab fa-twitter"></i>
                        </a>
                    </li>
                    <li class="list-inline-item">
                        <a class="">
                            <i class="fab fa-google-plus-g"></i>
                        </a>
                    </li>
                    <li class="list-inline-item">
                        <a class="">
                            <i class="fab fa-pinterest-p"></i>
                        </a>
                    </li>
                    <li class="list-inline-item">
                        <a class="">
                            <i class="fab fa-linkedin-in"></i>
                        </a>
                    </li>

                </ul>
            </div>
            <!-- Login and Signup Buttons -->
            <div class="col-xl-5 col-md-4 col-sm-6 col-xs-6 text-right login-section">
                <button class="btn btn-light">LOGIN</button>
                <button class="btn btn-outline-light">SIGN UP</button>
                <a href="#"><p style="display: inline-block;">MENU</p></a>
            </div>
        </div>

The [documentation](https://getbootstrap.com/docs/4.0/utilities/display/) says: use `.d-{value}` for `xs` and `.d-{breakpoint}-{value}` for `sm`, `md`, `lg`, and `xl` — Alexander, Feb 22 '18 at 12:36

score 2 · Accepted Answer · answered Feb 22 '18 at 12:28

Use the below code :

    <!DOCTYPE html>
<html>
<head>
    <title>Bootstrap 4</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="d-lg-none">hide on screens wider than lg</div>
<div class="d-none d-lg-block">hide on screens smaller than lg</div>
</body>
</html>

If the above code works then upvote it. – Braj Ankit Feb 22 '18 at 12:34 — Braj Ankit, Feb 22 '18 at 12:34

score 1 · Answer 2 · answered Feb 22 '18 at 12:29

According to this link on bootsrap documentation, you need to use this class to hide an element in a breakpoint :

.d-sm-none

This will hide the element in the small devices. If this code is not working, then maybe you have another style that is overwriting bootstrap styles.

score 0 · Answer 3 · answered Feb 22 '18 at 12:32

Assuming you're using the latest Bootstrap 4 release, there are a couple of methods that are referenced in the documentation.

Firstly - you have classes for 'hidden' and 'visible'. You could use these in media queries in your CSS via the mixins that are provided.

Secondly - Bootstrap 4 has various responsive/breakpoint-based display classes. In your case, you could apply:

.d-none .d-md-block

For the element to be hidden on screen below the 'sm' breakpoint and, set to 'display: block;' once the screen is larger.

Sources: Visibility documentation: using '.hidden' and '.visible'

Responsive, based on 'display: none;'

Can't hide an element with bootstrap 4?

3 Answers3