Unable to establish the maximum height in relation to the screen height for a div using bootstrap

I am currently utilizing Bootstrap in conjunction with Django, and I have been attempting to establish the maximum height of a div to be 75% of the screen's height due to it containing a large image. However, my efforts to resize the parent div of the image to occupy 75% of the device screen have proven fruitless. I have attempted using class="mh-75", but to no avail. Furthermore, I even tried loading a static CSS file to apply styling with max-height: 75%, yet this approach also failed. Here is the code snippet:

img-wid style defined:


.img-wid{
    max-width: 99.999%;
}
htmlcssdjangobootstrap-4

Answer №1

To achieve a layout where a div takes up 100% of the screen and then use bootstrap to make it 75%, you can follow these steps:

.main-container{
  height: 100vh;
}

<div class="main-container">
  <div class="h-75">
    //Add your content here
  </div>
</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

expanding menu options in a dynamic design

My webpage features a logo alongside a menu: Here's the HTML code: <div id="logomenuwrapper"> <div id="logo"><img src="img/logo_light.jpg"/></div> <div id="menu"> <ul> <li><a href="#">About ...

htmlcssresponsive-designfluid

Overlapping sliding toggles with jQuery on multiple elements

Just starting out with jQuery and I've come across a few examples of slideToggle but they are all overlapping. Here's the code I have so far: jQuery: <script src="jquery-1.9.1.js"> </script> <script> $ (document).ready(fun ...

jqueryhtmlcss

Having trouble accessing @minimum_password_length in sign up modal using Rails, Devise, and Bootstrap?

I've set up a Bootstrap modal for Devise sign up, which can be accessed through a link on the landing page navbar. The modal is functioning correctly, allowing users to sign up. However, when I attempt to include a hint about the minimum password leng ...

ruby-on-rails-4devisehamlbootstrap-modalbootstrap-4

The Angular 7 template falls short of occupying the entire page

I am currently working on converting an HTML page into my Angular project. While it functions correctly in the HTML version, it does not fill up the entire page when transferred to Angular. You can view an example of this issue on StackBlitz at the followi ...

cssangularangular7

Showing loading spinner when clicked

I created a spinning animation in CSS, but now I want to hide it and only display it when a button is clicked. I've tried to achieve this using the following code, but the spinner doesn't appear when I click the submit button. To hide the spinne ...

javascriptbootstrap-4

Explore three stylish ways to showcase dynamic JavaScript content using CSS

Objective: For Value 1, the CSS class should be badge-primary For Value 2, the CSS class should be badge-secondary For all other values, use the CSS class badge-danger This functionality is implemented in the handleChange function. Issue: Current ...

javascriptcssreactjs

Using jQuery to Validate Input Text Control Depending on Radio Selection

How can I ensure that the input text linked to the selected radio option is filled in? For instance, in the example above: If Contact 1's Email radio option is chosen, the Email text field for Contact 1 must not be empty, while the Phone and US Mai ...

javascriptjqueryhtml

Wheel of fortune - The chosen option does not align with the indicator

I am looking to create a game similar to a "Spinning Wheel" where users can select three possible outcomes and then spin the wheel. If any of the chosen three options appears when the wheel stops, the user wins. In the demo provided below, you may notice ...

javascriptjqueryhtml

What is the best way to extract text from a dynamically changing element using jQuery?

I've been struggling with a coding issue. Despite trying numerous approaches, I keep encountering the same problem where every new button I add ends up having the same text or, alternatively, nothing seems to work as expected. $j serves as my variabl ...

javascripthtmljquerynext.js

Random occurrences of TemplateDoesNotExist errors within the Django framework

Currently, I am facing an issue with my Django (v1.1.1) website running on a server with Python 2.4. The site works perfectly fine on my localhost/development computer. However, when I upload the files to the production server, everything seems to be in or ...

pythondjangodjango-templates

Using JQuery and Ajax, what is the best way to transfer information from a popup form to a PHP page?

I've noticed that my question has been asked a few times already, but I'm still struggling to get my code working. It seems like I'm using the same code as those solutions, so I can't figure out what's going wrong. Currently, I am ...

phpjqueryhtmlajax

Using jQuery to smoothly fade in elements and slide them up with a delay

Seeking assistance in adding a slideUp effect to my set of posts/divs in Wordpress that currently fade in one by one using jQuery. I want the posts to slide up and fade in simultaneously, similar to this example: where they animate on filter click. I&ap ...

jqueryhtmlcsswordpress

Using React.js to dynamically change a CSS class depending on a certain condition

I am trying to assign a CSS class to a div based on a specific condition. The issue I am facing is that it always takes the last condition. Below is the code snippet: When I run the code, I receive logos.length as 3 <div className= "${ (this.state. ...

javascripthtmlreactjs

New to CSS/Ruby - What causes two adjacent buttons to have varying sizes?

The varying sizes of my search and login buttons located beside each other are puzzling me. Could it be due to the fact that the search button is enclosed within a submit_tag argument while the login button is not? If this is indeed the case, how can I mak ...

htmlcssruby

Using BeautifulSoup to Retrieve JPEG from an Image Tag's Src Attribute

Struggling with scraping this webpage for personal use. I am having trouble extracting the thumbnails of each item on the page. Despite being able to see image tags containing the required .jpgs when using "inspect" to view the html DOM, I cannot find the ...

javascriptpythonhtmlweb-scrapingbeautifulsoup

Leveraging both onmouseover and onmouseout for container expansion

My goal is to utilize JavaScript along with the HTML events "onmouseover" and "onmouseout" to create a dynamic container. Essentially, I want the container to act as simply a heading when the mouse is not hovering over it, but expand to display additional ...

javascripthtmlcssonmouseoveronmouseout

Challenges with the Megakit theme

I recently downloaded a Bootstrap theme called Megakit from Unfortunately, I noticed that the theme does not support scrolling with arrow keys or page up/page down buttons. Instead, I have to manually use the scroll bar on my mouse. Upon inspecting the f ...

javascripthtmlbootstrap-4

Utilize Angular Material to assign the value of a mat-select component based on the FormControlName property

I am using Angular version 7 and have encountered an issue with a form I am creating. The form includes a dropdown select to choose an option, but when the page loads, the pre-defined value is not showing up. This page is specifically designed for editing ...

htmlangularangular-material

Using Django: DetailView - primary key or a slug

Previous views.py from django.views.generic.detail import DetailView ... def foo: ... return object_detail(request, queryset, id, template_object_name = 'group') New views.py class TestDetailView(DetailView): def get_context_data(self, ...

pythondjango

Is there a way to trigger the opening of a new file or page when a CSS animation comes to an end?

Is there a way to delay the loading of a function or page until after an animation has finished running in JavaScript, HTML, and CSS only? For instance, I'd like to run an animation first and then have a different website or content load afterwards fo ...

javascripthtmlcss