What is the best way to seamlessly integrate a Bootstrap Navigation and Carousel within a 100vh space?

I'm having trouble getting the bootstrap navigation and carousel to fit perfectly on the screen without any overflow. My goal is to have both elements occupy 100vh seamlessly, with no scrolling necessary.

My first attempt was adding img-fluid: 100vh;, but this caused the carousel to overflow when I scrolled to the very top.

Next, I tried wrapping the Navigation and Carousel in a div and setting 100vh to that element, but unfortunately, that solution didn't work either.

If you'd like to take a look at the code, it's available on Codepen as well. Thank you for your assistance. https://codepen.io/christiangutierrezreyez/pen/vwpQdN

<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <!--BOOTSTRAP CSS-->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <!-- FONTAWESOME CSS -->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
    integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
  <!--TITLE-->
  <title>Document</title>

<!-- CUSTOM CSS -->
<style>
.img-fluid {
  height: 100vh;
}
</style>
</head>

<body>
  <!-- BODY -->
  <div id="navslider-vh"></div>
  <!-- NAVIGATION -->
  <nav class="navbar navbar-expand-sm navbar-light bg-light mb-3">
    <div class="container">
      <!-- BRAND -->
      <a class="navbar-brand" href="#">Navbar</a>
      <button class="navbar-toggler" data-toggle="collapse" data-target="#navbarNav">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item">
            <!-- LINK 1 -->
            <a class="nav-link" href="#">Home</a>
          </li>
          <li class="nav-item">
            <!-- LINK 2 -->
            <a class="nav-link" href="#">About</a>
          </li>
          <li class="nav-item">
            <!-- LINK 3 -->
            <a class="nav-link" href="#">Services</a>
          </li>
          <li class="nav-item">
            <!-- LINK 4 -->
            <a class="nav-link" href="#">Contact</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
  <!-- END NAVIGATION -->


  <!-- CAROUSEL -->
  <div id="MagicCarousel" class="carousel slide" data-ride="carousel">
    <!-- CAROUSEL INDICATORS-->
    <ol class="carousel-indicators">
      <li data-target="#MagicCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#MagicCarousel" data-slide-to="1"></li>
      <li data-target="#MagicCarousel" data-slide-to="2"></li>
      <li data-target="#MagicCarousel" data-slide-to="3"></li>
      <li data-target="#MagicCarousel" data-slide-to="4"></li>
    </ol> <!-- END CAROUSEL INDICATORS-->
    <div class="carousel-inner" role="listbox">
      <!-- SLIDE 1 -->
      <div class="carousel-item active">
        <img class="d-block w-100 img-fluid" src="https://source.unsplash.com/random/1920x1080" alt="First Slide">
        <div class="carousel-caption">
          <h3>Cinderalla</h3>
          <p>Lorem ipsum dolor sit amet.</p>
        </div>
      </div>

      <!-- SLIDE 2 -->
      <div class="carousel-item">
        <img class="d-block w-100 img-fluid" src="https://source.unsplash.com/random/1920x1080" alt="Second Slide">
        <div class="carousel-caption">
          <h3>Cinderalla</h3>
          <p>Lorem ipsum dolor sit amet.</p>
        </div>
      </div>

      // more slides...

      <!-- CONTROLS -->
      <a href="#MagicCarousel" role="button" data-slide="prev" class="carousel-control-prev">
        <span class="carousel-control-prev-icon"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a href="#MagicCarousel" role="button" data-slide="next" class="carousel-control-next">
        <span class="carousel-control-next-icon"></span>
        <span class="sr-only">Next</span>
      </a>


    </div><!-- END CAROUSEL INNER -->
  </div><!-- END CAROUSEL -->
  </div> <!-- END NAVSLIDER-VH -->>

</body> <!-- END OF BODY -->
<!-- JQUERY JS-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
  integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

<!-- POPPER JS-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
  integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>

<!-- BOOTSTRAP JS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
  integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

</html>


  [1]: https://codepen.io/christiangutierrezreyez/pen/vwpQdN
cssbootstrap-4

Answer №1

When the mb-3 class is removed from the nav element, this CSS code will be effective:

#MagicCarousel,
#MagicCarousel > div,
#MagicCarousel > div > div > img{
    height: calc(100vh - 56px);
}

In this code, "56px" represents the height of the nav element.

Answer №2

#MagicCarousel{
  height:90vh;
}
.navbar{
  height:10vh
}
.carousel-inner , .carousel-item{
height:100%;

}
.carousel-item{
    overflow:hidden;
}
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <!--BOOTSTRAP CSS-->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <!-- FONTAWESOME CSS -->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
    integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
  <!--TITLE-->
  <title>Document</title>

<!-- CUSTOM CSS -->
</head>

<body>
  <!-- BODY -->
  <div id="navslider-vh"></div>
  <!-- NAVIGATION -->
  <nav class="navbar navbar-expand-sm navbar-light bg-light">
    <div class="container">
      <!-- BRAND -->
      <a class="navbar-brand" href="#">Navbar</a>
      <button class="navbar-toggler" data-toggle="collapse" data-target="#navbarNav">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item">
            <!-- LINK 1 -->
            <a class="nav-link" href="#">Home</a>
          </li>
          <li class="nav-item">
            <!-- LINK 2 -->
            <a class="nav-link" href="#">About</a>
          </li>
          <li class="nav-item">
            <!-- LINK 3 -->
            <a class="nav-link" href="#">Services</a>
          </li>
          <li class="nav-item">
            <!-- LINK 4 -->
            <a class="nav-link" href="#">Contact</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
  <!-- END NAVIGATION -->


  <!-- CAROUSEL -->
  <div id="MagicCarousel" class="carousel slide" data-ride="carousel">
    <!-- CAROUSEL INDICATORS-->
    <ol class="carousel-indicators">
      <li data-target="#MagicCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#MagicCarousel" data-slide-to="1"></li>
      <li data-target="#MagicCarousel" data-slide-to="2"></li>
      <li data-target="#MagicCarousel" data-slide-to="3"></li>
      <li data-target="#MagicCarousel" data-slide-to="4"></li>
    </ol> <!-- END CAROUSEL INDICATORS-->
    <div class="carousel-inner" role="listbox">
      <!-- SLIDE 1 -->
      <div class="carousel-item active">
        <img class="d-block w-100" src="https://source.unsplash.com/random/1920x1080" alt="First Slide">
        <div class="carousel-caption">
          <h3>Cinderalla</h3>
          <p>Lorem ipsum dolor sit amet.</p>
        </div>
      </div>

      <!-- SLIDE 2 -->
      <div class="carousel-item">
        <img class="d-block w-100 " src="https://source.unsplash.com/random/1920x1080" alt="Second Slide">
        <div class="carousel-caption">
          <h3>Cinderalla</h3>
          <p>Lorem ipsum dolor sit amet.</p>
        </div>
      </div>

      <!-- SLIDE 3 -->
      <div class="carousel-item">
        <img class="d-block w-100" src="https://source.unsplash.com/random/1920x1080" alt="Third Slide">
        <div class="carousel-caption">
          <h3>Snow White</h3>
          <p>Lorem ipsum dolor sit amet.</p>
        </div>
      </div>

      <!-- SLIDE 4 -->
      <div class="carousel-item">
        <img class="d-block w-100 " src="https://source.unsplash.com/random/1920x1080" alt="Fourth Slide">
        <div class="carousel-caption">
          <h3>Snow White</h3>
          <p>Lorem ipsum dolor sit amet.</p>
        </div>
      </div>

      <!-- SLIDE 5 -->
      <div class="carousel-item">
        <img class="d-block w-100 " src="https://source.unsplash.com/random/1920x1080" alt="Fifth Slide">
        <div class="carousel-caption">
          <h3>Beauty and the Beast</h3>
          <p>Lorem ipsum dolor sit amet.</p>
        </div>
      </div>

      <!-- SLIDE 6 -->
      <div class="carousel-item">
        <img class="d-block w-100" src="https://source.unsplash.com/random/1920x1080" alt="Sixth Slide">
        <div class="carousel-caption">
          <h3>Pokahauntes</h3>
          <p>Lorem ipsum dolor sit amet.</p>
        </div>
      </div>

      <!-- CONTROLS -->
      <a href="#MagicCarousel" role="button" data-slide="prev" class="carousel-control-prev">
        <span class="carousel-control-prev-icon"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a href="#MagicCarousel" role="button" data-slide="next" class="carousel-control-next">
        <span class="carousel-control-next-icon"></span>
        <span class="sr-only">Next</span>
      </a>


    </div><!-- END CAROUSEL INNER -->
  </div><!-- END CAROUSEL -->
  </div> <!-- END NAVSLIDER-VH -->

</body> <!-- END OF BODY -->
<!-- JQUERY JS-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

<!-- POPPER JS-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>

<!-- BOOTSTRAP JS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

</html>

this information is intended to be helpful!

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

What is the optimal method for organizing JavaScript and CSS files within my Play2 application?

Trying to figure out the best way to organize my js and css files for my app. If I examine the structure of a play2 app: app → Source code for the application └ assets → Compiled asset sources └ stylesheets ...

javascriptcssplayframeworkgoogle-closure-compilerplayframework-2.2

Angular-dc bar graph failing to display properly

I'm having some trouble creating a bar chart using crossfilter, dc.js, and angular-dc. The rowchart is working properly, but the barchart is not displaying the bars. When I inspect the element in Chrome, I can see the values, and when I force focus, t ...

javascriptcssangularjsdc.js

Html2Canvas: Variability in PDF Image Output on Different Devices

Challenge Overview: I am facing discrepancies in the PDF images generated with Html2Canvas on various devices. While the design looks fine on my laptop, it shows inconsistencies on other devices like phones or different laptops. I suspect that these diffe ...

cssreactjsvitehtml2canvas

Convert HTML form input into a JSON file for safekeeping

<div class="email"> <section class="subscribe"> <div class="subscribe-pitch"> </div> <form action="#" method="post" class="subscribe-form" id="emails_form"> <input type="email" class="subscribe-input" placeholder="Enter ema ...

javascriptjqueryhtmlcssjson

Striving to convert Celsius to Fahrenheit using ReactJS

I am currently attempting to convert Celsius into Fahrenheit within this specific div. Despite being fairly new to React, I’m finding it challenging to determine where exactly to place the conversion calculation. return ( <div className="app& ...

cssreactjs

Dropdown Menu with Bootstrap 4 Toggle Checkbox

Within a Bootstrap 4 dropdown menu, I integrated a checkbox styled with the Bootstrap Toggle Plugin. However, upon clicking the toggle switch, the menu abruptly closes. To address this issue, I added onclick="event.stopPropagation();" to the menu item, as ...

javascriptjquerybootstrap-4

(Applied jQuery) Trouble with div height in responsive layout

I have created jQuery full-page sliding panels that work perfectly on desktop devices. However, when the browser window is resized smaller, the panel divs fail to fill the page. If you want to view the issue in action, you can check out the JSFiddle demo ...

javascriptjquerycsshtml

Achieving dynamic height in a parent div with a sticky header using mui-datatables

Here are the settings I've configured for my mui-datatables: const options = { responsive: "standard", pagination: false, tableBodyHeight: '80vh', }; return ( <MUIDataTable title={"ACME Employee ...

javascriptcssreactjsdatatablesmaterial-ui

Arranging elements in a single line using Bootstrap 4

I need to align links in a row at the bottom, such as "Link 1 left bottom", "Link 2 center bottom", "Link 3 right bottom" but "Link 2" is not centered on PC and mobile devices. HTML: <div> <a id="contact" hre ...

htmlcsstwitter-bootstrapbootstrap-4

Concealing a column in a printed output on Internet Explorer 9

Our application features a webgrid with a hidden reference column that is concealed using CSS. While this method works seamlessly on most browsers, we encounter an issue when it comes to printing. In our print.css file, where the column is hidden similar t ...

cssinternet-explorerprinting

"CSS Troubleshooting: Why Isn't My Background Image

Could someone assist me in understanding why this code is not functioning properly? I have experimented with both background-image and background properties, as well as adjusting the height and width attributes. <html> <head> <link ...

htmlcssimagebackground

Having trouble with jQuery Animate when trying to change the background-color property?

So, I was experimenting with the jQuery .animate() function and decided to change the background color of a div based on how many pixels the user scrolled. Surprisingly, it didn't work as expected. After switching to the .css() function instead, every ...

javascriptjquerycssjquery-animate

What's the best way to shrink the size of a hyperlink without affecting the height of the text alignment?

I am currently designing a straightforward menu layout similar to this <div className="main-menu"> <ul> <li className="main-menu__app-menu"><a href="#">link 1</a></li> ...

htmlcsssass

navigation menu 'selective emphasis' feature

I have created a JQuery script that will highlight the 'About', 'My Projects', or 'Contact Me' text on the navigation bar when the corresponding section of the page is in view. To achieve this, I am using a scroll() event list ...

javascriptjquerycsstwitter-bootstrap

Exploring the various viewport sizes in Bootstrap breakpoints

I'm currently working on a responsive cropping tool for multiple devices using cropperjs. Right now, I am estimating the viewport sizes for each bootstrap breakpoint but I need to determine the actual height in order to establish a ratio. You can view ...

javascripttwitter-bootstrapbootstrap-4cropperjs

Having trouble with SCSS styles not being applied after refactoring to SCSS modules?

Currently, I am in the process of restructuring an application to ensure that component styles are separated from global styles using CSS modules. However, I have come across an issue where the styles are not being applied correctly. The original code sni ...

javascriptcssreactjssassnext.js

Issues with the Bootstrap Grid system

I seem to be facing an issue with my Bootstrap Grid. Shouldn't it be filling up the entire row? View image of potential incorrect behavior <div class="container min-vh-100 pt-5"> <h5 class="text-white mt-2">{{event?.tea ...

htmlbootstrap-4gridbootstrap-5bootstrap-grid

The Angulajrjs popup timepicker is not located within the input row

Currently, I am working on creating a popup timepicker within a modal. My main goal is to have the button inside the input field rather than after it. Does anyone know how I can achieve this? Thank you. If you need more context, you can check out my plun ...

jquerycssangularjstimepicker

Ways to focus on a specific div using JavaScript

I am attempting to create a 'snow' effect on the background of a particular div with a red border. Here is the code, but you can also view it here: <!-- language: lang-js --> var width = getWidth(); var height = getH ...

javascriptjqueryhtmlcss

Display each column within a single row on an HTML page without extending into the next row

My HTML page layout is structured as follows: https://i.sstatic.net/elwVs.png The issue at hand is that I want the MSAN and Users columns to be in the same row, or else, for a large number of records, it won't be feasible. Here's my HTML file. ...

htmlcssangulartypescriptspring-boot