Body component of Bootstrap4 is not displaying

.navbar-btn {
    color: white;
    background-color: rgba(255, 255, 255, 0);
}
.navbar-btn:hover {
    color: skyblue;
    background-color: rgba(255, 255, 255, 0);
}
.dropdown-item {
    color: white;
}
.dropdown-item:hover {
    color: skyblue;
    background-color: rgba(255, 255, 255, 0);
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<nav class="navbar fixed-top navbar-inverse bg-inverse">
  <div class="flex-container">
    <div class="navbar-header pull-left">
      <a class="navbar-brand" href="#">Title</a>
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
      <!-- Do this better somehow -->
      <button class="navbar-toggler" type="button"><span class="navbar-toggler-icon"></span>
      </button>
    </div>
    <div class="dropdown pull-right">
      <button class="btn navbar-btn dropdown-toggle" type="button" id="btnSettings" data-toggle="dropdown">
        <i class="fa fa-cog fa-lg"></i>
      </button>
      <div class="dropdown-menu dropdown-menu-right bg-inverse" aria-labelledby="btnSettings">
        <!--<button class="dropdown-item"><i class="fa fa-sign-in fa-lg"></i>&nbsp;Login</button>-->
        <!-- fa-address-card -->
        <button class="dropdown-item"><i class="fa fa-user fa-lg"></i>&nbsp;Profile</button>
        <button class="dropdown-item"><i class="fa fa-sign-out fa-lg"></i>&nbsp;Logout</button>
        <div class="dropdown-divider"></div>
        <h6 class="dropdown-header">Global Config</h6>
        <button class="dropdown-item"><i class="fa fa-globe fa-lg"></i>&nbsp;Lang</button>
        <button class="dropdown-item"><i class="fa fa-window-maximize fa-lg"></i>&nbsp;Theme</button>
      </div>
    </div>
  </div>
</nav>
<div style="color:black;">Greetings Universe!</div>

I have created a delightful bootstrap 4 fixed top navigation bar, yet alas, the greetings universe text at the end refuses to display. What could be causing this perplexing dilemma? I am unable to discern any logical reason for its invisibility.

Could this be a quandary born of CSS complexities or hidden within the labyrinth of HTML intricacies? I have meticulously inspected my code across various online platforms and it appears to be error-free, eliminating the possibility of external influences.

htmlcsstwitter-bootstrap

Answer №1

There is a solution for the element hidden behind the nav - just add a margin-top to bring it into view:

.hello{
  margin-top: 100px;
}

Solution 1: (add margin-top):

.navbar-btn {
    color: white;
    background-color: rgba(255, 255, 255, 0);
}
.navbar-btn:hover {
    color: skyblue;
    background-color: rgba(255, 255, 255, 0);
}
.dropdown-item {
    color: white;
}
.dropdown-item:hover {
    color: skyblue;
    background-color: rgba(255, 255, 255, 0);
}

.hello{
  margin-top: 100px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<nav class="navbar fixed-top navbar-inverse bg-inverse">
  <div class="flex-container">
    <div class="navbar-header pull-left">
      <a class="navbar-brand" href="#">Title</a>
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
      <!-- Do this better somehow -->
      <button class="navbar-toggler" type="button"><span class="navbar-toggler-icon"></span>
      </button>
    </div>
    <div class="dropdown pull-right">
      <button class="btn navbar-btn dropdown-toggle" type="button" id="btnSettings" data-toggle="dropdown">
        <i class="fa fa-cog fa-lg"></i>
      </button>
      <div class="dropdown-menu dropdown-menu-right bg-inverse" aria-labelledby="btnSettings">
        <!--<button class="dropdown-item"><i class="fa fa-sign-in fa-lg"></i>&nbsp;Login</button>-->
        <!-- fa-address-card -->
        <button class="dropdown-item"><i class="fa fa-user fa-lg"></i>&nbsp;Profile</button>
        <button class="dropdown-item"><i class="fa fa-sign-out fa-lg"></i>&nbsp;Logout</button>
        <div class="dropdown-divider"></div>
        <h6 class="dropdown-header">Global Config</h6>
        <button class="dropdown-item"><i class="fa fa-globe fa-lg"></i>&nbsp;Lang</button>
        <button class="dropdown-item"><i class="fa fa-window-maximize fa-lg"></i>&nbsp;Theme</button>
      </div>
    </div>
  </div>
</nav>
<div class="hello">Hello World!</div>

Solution 2: (remove fixed-top and use sticky-top) to avoid content shifting:

.navbar-btn {
    color: white;
    background-color: rgba(255, 255, 255, 0);
}
.navbar-btn:hover {
    color: skyblue;
    background-color: rgba(255, 255, 255, 0);
}
.dropdown-item {
    color: white;
}
.dropdown-item:hover {
    color: skyblue;
    background-color: rgba(255, 255, 255, 0);
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<nav class="navbar sticky-top navbar-inverse bg-inverse">
  <div class="flex-container">
    <div class="navbar-header pull-left">
      <a class="navbar-brand" href="#">Title</a>
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
      <!-- Do this better somehow -->
      <button class="navbar-toggler" type="button"><span class="navbar-toggler-icon"></span>
      </button>
    </div>
    <div class="dropdown pull-right">
      <button class="btn navbar-btn dropdown-toggle" type="button" id="btnSettings" data-toggle="dropdown">
        <i class="fa fa-cog fa-lg"></i>
      </button>
      <div class="dropdown-menu dropdown-menu-right bg-inverse" aria-labelledby="btnSettings">
        <!--<button class="dropdown-item"><i class="fa fa-sign-in fa-lg"></i>&nbsp;Login</button>-->
        <!-- fa-address-card -->
        <button class="dropdown-item"><i class="fa fa-user fa-lg"></i>&nbsp;Profile</button>
        <button class="dropdown-item"><i class="fa fa-sign-out fa-lg"></i>&nbsp;Logout</button>
        <div class="dropdown-divider"></div>
        <h6 class="dropdown-header">Global Config</h6>
        <button class="dropdown-item"><i class="fa fa-globe fa-lg"></i>&nbsp;Lang</button>
        <button class="dropdown-item"><i class="fa fa-window-maximize fa-lg"></i>&nbsp;Theme</button>
      </div>
    </div>
  </div>
</nav>
<div class="hello">Hello World!</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Creating an SVG element that adjusts to the size of its parent container: tips and tricks

I'm attempting to achieve the following: Displaying an SVG square (with a 1:1 aspect ratio) inside a div element. When the width of the div is greater than its height, the square should adjust to fit within the container based on the height (red box ...

csssvg

Is there a way to ajax just specific HTML table rows instead of transmitting all the form inputs?

For weeks, I've been struggling to use AJAX POST with a JSP script to update my HTML table rows without success. Can anyone provide guidance on this? Below is what I have attempted so far. window.addEventListener("DOMContentLoaded", function () { ...

javascriptjqueryhtmlajaxjsp

How can I choose the first n children up to a certain class using CSS?

Take a look at this HTML : <div class="container"> <a id="1"></a> <a id="2"></a> <a id="3"></a> <a id="4"></a> <a id="5" class="specific"></a> <a id="6"></a ...

htmlcss

Confirmation of numerous checkbox selections

I am facing a challenge with a form that contains multiple questions answered through checkboxes. I need to validate that at least one checkbox is selected in all the questions, otherwise an alert message should pop up. Is it possible to achieve this val ...

javascriptjqueryhtml

Element translation results in the expansion of the page's width

I am in need of assistance with translating multiple divs stacked on top of each other so that each layer slides away. I have attempted to use animate.css for animation and jQuery to detect when the animation ends and add a class to hide the container to p ...

jqueryhtmlcss

Is jQuery the solution for tidying up messy HTML code?

Is there a way to clean up this markup using jQuery? <span style="font-size:19px"> <span style="font-size:20px"> <span style="font-size:21px"> Something </span> </span> </span> I'm looking to tra ...

jqueryhtml

Is there a way to ensure certain items are displayed on different lines?

Currently, I am working on styling an HTML list with the following properties: font-weight: bold; padding: 0px; margin: 0px; list-style-type: none; display: block; width:700px; font-size: 14px; white-space: pre-wrap; The individual cells within this list ...

htmlcsshtml-lists

Modifying attributes for individual components in Vue.js classes

Recently, I integrated a reusable component called "LightBox" into my website, which displays images in higher resolution. The LightBox functionality is linked to each element having a thumbnail. However, I encountered an issue. There are multiple elements ...

javascriptcssvue.jsvue-componentvuejs3

Adaptable background visuals

Struggling to find a solution for a seemingly simple problem. I am looking to create responsive/fluid images that scale relative to the viewport size. I also need to load them using CSS with the background property for selective loading of different versio ...

htmlcssresponsive-design

Grid of squared CSS elements contained within a wrapper div that is set to a maximum

When attempting to create a CSS grid layout with square boxes, I encountered an issue. While the first row of squares remains square when setting the maximum height of the wrapper, subsequent rows are cropped into rectangles instead. The culprit seems to b ...

htmlcsscss-grid

Tips for assigning an AngularJS data-bound value to the href attribute of an anchor tag

I need to include multiple email ids separated by commas from an angularjs binded value in the mailto field of an anchor tag. The team.emails variable can contain either a single email id or multiple email ids separated by commas. <tr ng-repeat="team ...

htmlangularjs

Is it possible to use the same HTML select/dropdown menu for multiple rows in a table?

I am working with an HTML table that usually has between 10-30 rows, each containing a column for "item name". The drop down menu consists of about 75 products to choose from. In order to reduce the page size, I want to use a single drop down list for all ...

javascriptjqueryhtml

Issue with presenting the scrollbar alongside the Dropdown menu

I'm in the process of creating a menu with multiple items and sub-items. I'd like to have a scroll bar appear alongside the items if they become too numerous. The same goes for sub-menus and so forth. Check out this example to see what I mean. ...

htmlcssmenu

How do I center an SVG vertically inside a button using Bootstrap 5?

Is there a way to center the SVG vertically within the button while using Bootstrap for styling? <a href="#home" class="navbar-home"> <button type="button" class="btn btn-outline-warning"> & ...

htmlcssbootstrap-5

What is the best way to align multiple form elements both horizontally and vertically within a frame?

Issue I have checked out various resources, like this one and this one, but I am still struggling to center my form elements both vertically and horizontally on the screen. I have tried using flex, padding, and stretching but nothing seems to work. Even a ...

htmlcssflexbox

What could be the reason that my Bootstrap dropdown menu is not appearing on my website

I am currently utilizing Angular in my project. I have incorporated bootstrap and jQuery via NPM install, and specified them as dependencies in angular.json. The navbar on my site contains a dropdown menu. When I hover over the dropdown menu, it should di ...

htmlcssangulartwitter-bootstrapbootstrap-5

Is it possible to execute PHP without using Ajax when clicking on a Font Awesome icon?

So, besides using Ajax, is there another solution to achieve the same result? Can a font-awesome icon be turned into a button without Ajax? In case you're unfamiliar with what I mean by a font-awesome icon, here's an example: <i id="like1" on ...

javascriptphpjqueryhtmlajax

What is the best way to attach a button to a mat-drawer?

I am facing an issue with aligning a button to a mat drawer located to the right of the screen to ensure a clear overall design. Check out this example How can I achieve this alignment? My current approach involves placing the button inside the drawer an ...

htmlcssangularangular-material

Empty the localStorage when terminating the IE process using the Task Manager

Utilizing HTML5 localStorage to keep track of my application session has been a useful feature. Here is a snippet of the code I am currently using: if(typeof(Storage)!=="undefined") { if(sessionStorage.lastname=="Smith") { alert("Your ses ...

javascripthtml

What is the best way to detect if a user has reached the end of a container div while implementing Infinite Scroll

I am in the process of implementing infinite scroll on our website's dashboard, but I am currently facing a challenge in determining the bottom of the container div in my jsfiddle mockup. The original function works on a blank page with no container ...

javascriptjqueryhtmlinfinite-scroll