What is the best way to adjust the height of the header image within a Bootstrap layout?

I'm attempting to create a full-width header image that occupies about 25% of the page's height for my website. I am relatively new to using bootstrap and I am facing issues changing the height of the image/container. I have tried adding the "h-25" class, as well as applying inline styles. Additionally, I attempted to create a separate CSS file to override the bootstrap settings (by setting .container-fluid {height:25%;}). Unfortunately, despite all my efforts, I am unable to adjust the height of the image.

        <div class="container-fluid p-0 h-25">
            <img src="Photos/2019 SB Photos/AudienceSet+Tvs_darkened.JPG" class="img-fluid" height="25%;" alt="Responsive image">
        </div>
        <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
            <a class="navbar-brand" href="#">SSS</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item active">
                        <a class="nav-link" href="#">The Party<span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Current Stadium</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">RSVP</a>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            Stadium History
                        </a>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                            <a class="dropdown-item" href="#">2017 Stadium</a>
                            <a class="dropdown-item" href="#">2018 Stadium</a>
                            <a class="dropdown-item" href="#">2019 Stadium</a>
                        </div>
                    </li>
                </ul>
            </div>
        </nav>

The container is positioned at the top, and I have included the navbar section as additional context regarding the image boundaries.

Answer №1

I'm a bit puzzled about your requirement to allocate 25% of the page for the header image, but keep in mind that height attributes set as percentages must have a parent div with a defined height. This also applies to Bootstrap utility classes like h-25.

In my approach, I revised your code by establishing a fixed header area and a fixed nav. The outcome is a fully responsive header and nav section, which you can view here: >>>

CSS

body {
    padding-top: 18rem;
}

.header {
    height: 12rem;
    width: 100%;
    position: fixed;
    top: 0;
}

.headerImage { 
    height: 12rem;
    width: 100%;
}

.navbar {
    top: 12rem;
}

HTML

<div class="container-fluid header">
    <div class="row">
       <img class="headerImage" src="stadiumLarge.jpg" alt="stadium header">
    </div><!-- /.row -->
</div><!-- /.container -->

<nav class="navbar navbar-expand-lg navbar-dark fixed-top bg-dark">

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

When the user clicks on the body, I want the element to slide up, which will then slide down when the button is clicked

As a novice in Jquery, I am currently implementing a simple slide toggle on a button. Initially, the div is set to display none, and when the button is clicked, the slide toggle function is triggered. This works well. However, I also want the div to slide ...

When attempting to host a web application built using the Impact JavaScript game engine on a local server, Chrome throws CORS errors

Currently, I am working on a webapp created with the Impact JS game engine that needs to run locally without using a localhost (using file:///C:/...). The issue I am facing is with Chrome, as it is blocking the loading of images (mainly png/jpg) from the m ...

An easy way to enable mobility for BootstrapDialog on mobile devices

Currently, I am utilizing the library available at https://github.com/nakupanda/bootstrap3-dialog in order to create a dialog box. However, my issue arises when viewing the dialog on mobile devices where it exceeds the screen size. On desktops, adjusting t ...

Change the width of specific <li> elements to create variation

My goal is to configure a ul element with varying widths using flex. Specifically, I want the first two items in the ul to be 60% width while the last two items should be 40%. However, my flex-basis property doesn't seem to be working as expected. ...

How to achieve smooth transitions in CSS3 with dynamic height changes?

Currently, I am in the process of designing a unique layout. The main challenge lies in toggling between two classes for a div element, one of which has a height of 0px. To achieve this, I have successfully utilized CSS3 animations that effectively scale t ...

Is there a way to adjust the dimensions of individual pictures?

Dealing with a variety of images within a resizing container can be tricky. I have a solution for adjusting each image to a specific size without affecting the others. Currently, the container's CSS is set to resize images based on browser size: .con ...

Issues with form submission and JavaScript functionality have been detected in Internet Explorer, Firefox, and Safari, but are functioning properly in Chrome

Hey there! I've encountered a puzzling issue with a form I've created. It's programmed to determine the next page to redirect to using JavaScript after submission. Oddly enough, everything functions perfectly when I test it out in my IDE (C ...

Positioning the video tag bar in HTML is a crucial element to

**Take a look at what I'm discussing here(http://jsfiddle.net/VpLyR/). I'm dealing with a simple code that includes a video tag (html) and a menu bar with a fixed position. The issue arises when I scroll down to the point where both the menu bar ...

Vue multi-page application encounters compilation errors when attempting to include CSS within the <style> elements

Within my MPA app, I have integrated vue.js as a vital component. Below is a simple test setup: the relevant sections of my template .... <div id='app-basket-checkout'> <h1>Expecting Something Special</h1> </div> ... ...

Storing notes using HTML5 local storage

I recently developed a unique note-taking web application where users can create multiple notes and switch between them using tabs on the left side. My next step was to implement local storage for saving these notes, so I inserted the following code: $(d ...

Guide to sequentially playing multiple video objects with buffering

As I work on developing a reference player application that utilizes node.js, javascript, and HTML5, I have encountered an issue. Currently, my player successfully loads a single video and generates diagnostic data from it. However, I am striving to enhanc ...

Problem: Tailwind CSS styles are not being applied on responsive screens in Next.js.Issue: Despite

I'm attempting to apply a custom class to a div that should only be active on "md" screens. However, it doesn't seem to be working - <div className="md:myclass"/> tailwind-config.ts theme: { screens:{ 'sm': { ...

What is the best way to make my div equal in height to its preceding div sibling?

I want my new div to match the height of the previous one. I'm using percentages for width and height to ensure it displays properly on mobile devices as well. I've tried setting the parent elements to 100% width and height based on suggestions f ...

Loading HTML div content on demand using AngularJS

I have been working on a project where I retrieve data from the server to update the data model on the client browser using one-way data binding. The structure of the data model is outlined below. In relation to this data model, I am displaying the conten ...

Is the first part of the URL in Express susceptible to injections when using two-level URLs?

I am currently utilizing Node.js and Express for my project. When dealing with a single-level URL like: /estonia All scripts and styles are loading correctly. However, when it comes to a two-level URL such as: /estonia/tallinn The scripts and styles i ...

Arrange five columns in a bootstrap layout with the first column aligned to the left, the last column aligned to the right, and the remaining columns spaced

I am looking to update my template that was originally created using bootstrap 3.3. There is a div with the following classes: col-md-offset-2 col-md-8 Within this div, there are two rows. The second row will have five social media icons, but I am struggl ...

Is there a way to adjust the font size of a select option?

Looking to customize the appearance of a select option dropdown list. Wondering if it's possible to change the font sizes of individual options rather than keeping them all the same? For instance, having the default: -- Select Country -- displayed a ...

Choosing the Right Alignment for Your Selection Box

How can I adjust the alignment of the select box to make it inline with the others? I also need to apply this alignment to the three option input boxes. CSS: #newwebsiteSection, #websiteredevelopmentSection, #otherSection{ display:none; } #newwebsite ...

Limited functionality: MVC 5, Ajax, and Jquery script runs once

<script> $(function () { var ajaxSubmit = function () { var $form = $(this); var settings = { data: $(this).serialize(), url: $(this).attr("action"), type: $(this).attr("method") }; ...

Aligning text vertically in the center using Bootstrap

How can I center text vertically within a division with a height of 100vh? Here's what I've tried: .about-header { height: 100vh; background: #000; } .about-header p { font-size: 5em; } <link rel="stylesheet" href="https://maxcdn.boot ...