title: Can't hide an element with bootstrap 4?
body: <p>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:</p>
  
  <pre><code>&lt;div class="container-fluid row mini-nav"&gt;
              &lt;!-- Logo Section --&gt;
              &lt;div class="col-xl-3 col-md-4 col-sm-6 col-xs-6 site-logo"&gt;
                  &lt;a href="#" class=""&gt;&lt;img src="img/logo.png" alt="Logo Image"&gt;&lt;/a&gt;
              &lt;/div&gt;
              &lt;!-- Header Social Links --&gt;
              &lt;div class="col-xl-4 col-md-4 col-sm-4 header-social-media"&gt;
                  &lt;ul class="list-inline"&gt;
                      &lt;li class="list-inline-item"&gt;
                          &lt;a class=""&gt;
                              &lt;i class="fab fa-facebook-f"&gt;&lt;/i&gt;
                          &lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li class="list-inline-item"&gt;
                          &lt;a class=""&gt;
                              &lt;i class="fab fa-twitter"&gt;&lt;/i&gt;
                          &lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li class="list-inline-item"&gt;
                          &lt;a class=""&gt;
                              &lt;i class="fab fa-google-plus-g"&gt;&lt;/i&gt;
                          &lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li class="list-inline-item"&gt;
                          &lt;a class=""&gt;
                              &lt;i class="fab fa-pinterest-p"&gt;&lt;/i&gt;
                          &lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li class="list-inline-item"&gt;
                          &lt;a class=""&gt;
                              &lt;i class="fab fa-linkedin-in"&gt;&lt;/i&gt;
                          &lt;/a&gt;
                      &lt;/li&gt;
  
                  &lt;/ul&gt;
              &lt;/div&gt;
              &lt;!-- Login and Signup Buttons --&gt;
              &lt;div class="col-xl-5 col-md-4 col-sm-6 col-xs-6 text-right login-section"&gt;
                  &lt;button class="btn btn-light"&gt;LOGIN&lt;/button&gt;
                  &lt;button class="btn btn-outline-light"&gt;SIGN UP&lt;/button&gt;
                  &lt;a href="#"&gt;&lt;p style="display: inline-block;"&gt;MENU&lt;/p&gt;&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>