Struggling to make the height attribute work in Bootstrap 4 alpha

I'm currently in the process of learning Bootstrap, and I've encountered an issue with the height attribute in version 4 (for example: "row h-25") not functioning properly.

I attempted to add another CSS rule that sets the height of "container-fluid", as well as html and body elements to 100%, which was suggested as a solution by someone else. Unfortunately, this did not resolve the problem. Upon checking in Visual Studio under "NuGet - Solution", it shows that the bootstrap version being used is 'v4.0.0-alpha'.

Any assistance on this matter would be highly appreciated.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <link href="Content/bootstrap.min.css" rel="stylesheet" />
    <link href="Content/custom.css" rel="stylesheet" /> 
    <script src="scripts/angular.min.js"></script>
</head>
<body>
    <div class="container-fluid" style="background-color: #e7fdd6">
        <div class="row h-25" style="background-color: #eee">
            <div class="col-xs-6 col-sm-6 col-md-3 col-lg-3"><p>Customer</p><!-- These are just rough drafts while I learn the grid system. --></div>
            <div class="col-md-3 col-lg-3 hidden-xs hidden-sm"><p>Power</p></div>
            <div class="col-md-3 col-lg-3 hidden-xs hidden-sm"><p>Panels</p></div>
            <div class="col-xs-6 col-sm-6 col-md-3 col-lg-3"><p>Projects</p></div>
        </div>

        <div class="row h-25" style="background-color: #eee">
            <div class="col-xs-6 col-sm-6 col-md-3 col-lg-3"><p>Customer-slider</p></div>
            <div class="col-md-3 col-lg-3 hidden-xs hidden-sm"><p>Power amount</p></div>
            <div class="col-md-3 col-lg-3 hidden-xs hidden-sm"><p>Panels</p></div>
            <div class="col-xs-6 col-sm-6 col-md-3 col-lg-3"><p>Projects-slider</p></div>
        </div>

        <div class="row h-25">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"><img src="Content/picture.jpg" alt="Park" align="middle" /> <!-- Image --></div>
        </div>

        <div class="row h-25">
            <div class="col-lg-6 col-md-6-col-sm-12 col-xs-12"><!-- Graph 1 --></div>
            <div class="col-lg-6 col-md-6 hidden-sm hidden-xs"><!-- Graph 2 --></div>
        </div>

    </div>
</body>
</html>

custom.css:

.container-fluid {
    height: 100%;
}

html, body {
    height: 100%;
}

Answer №1

When using Bootstrap 4 alpha, the h-25 class functions properly. It is important to specify the height for the parent element, such as container-fluid, in pixels, rems, or ems. Avoid setting the parent's height in percentage.

.container-fluid {
    min-height: 200px;
}

A recommended approach is to apply styles to a custom class within the parent element instead of directly modifying the bootstrap core classes.

Answer №2

Bootstrap Alpha v6 brought in the h- classes such as h-25, so make sure your Bootstrap version is up to date if you want to utilize these.

Answer №3

It appears that the NuGet reference you are using is an older alpha version of Bootstrap 4. The most recent version, currently, is 4.0.0-beta2.

If you open the VS NuGet Package Manager (right-click on the solution and select "Manage NuGet Packages for Solution..."), you should notice available updates for the package. If not, ensure that the "Include prerelease" option is selected.

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

Improved AJAX Dependency

A few days ago, a question was posted with messy code and other issues due to my lack of experience (please forgive the form handling as well). However, I have made some improvements and added context. The main problem now lies in the second AJAX call. Ch ...

Is there a simple and efficient method to transition the loading of a regular website to AJAX for the entire site?

Is it feasible to easily and quickly change all links on a website to load the URL that the user clicked via AJAX, rather than refreshing the webpage? My website currently has standard links, but in order to create a mobile application for iPhone, I need ...

Having trouble accessing NSE Bhavcopy zip file in R due to a HTTP status of '403 Forbidden'

My current project involves automating the process of downloading a zip file in R. On the specific webpage I am working with, I can easily download the zip file by clicking on it or by right-clicking and saving the file. However, my challenge lies in down ...

The div element's width does not match the width of the textbox

I attempted to implement the following code in HTML. However, I am puzzled as to why the text box and div width are not the same size. Here is what I have experimented with. <style> .test { border:1px solid red;width:100px;height:30px;padding:3p ...

The alignment of SVG is not in sync with the aspect ratio

I've been struggling with this issue for some time now, trying to align the SVGs correctly for different width and height values. My viewBox has an aspect ratio of 16:9, and I want to scale the SVG accordingly. It's working fine for certain combi ...

Utilizing Knockout to Render JSON List Items

Utilizing Knockout.js to dynamically update a view from JSON response has been my current focus. The structure of the JSON is as follows: var data = { "Properties": { "Engine Capacity": "1499cc", "Doors": 3, "Extras": [ "LED lights", ...

What is the best way to loop through ng-repeat with key-value pairs in order to display each

I need to loop through and show the data stored in "detailsController". <div ng-controller="detailsController"> <div ng-repeat="data in details" id="{{data.Id}}"> {{data.Name}} </div> </div> ...

What is the best way to assign a value to an option element for ordering purposes?

My select element is being populated with fruits from a database, using the following code: <select name="fruitsOption" id="fruitsOptionId" ngModel #fruitRef="ngModel"> <option *ngFor="let fruit of fruits">{{fruit}}</option> </selec ...

What is the reasoning behind the return type of void for Window.open()?

There is a difference in functionality between javascript and GWT in this scenario: var newWindow = window.open(...) In GWT (specifically version 1.5, not sure about later versions), the equivalent code does not work: Window window = Window.open("", "", ...

What is the reason for background images not loading when using `display: none`?

I'm really struggling to understand this puzzle: When the page loads, will mypic.jpg be downloaded by the browser? #test1 { display: none; } #test2 { background-image: url('http://www.dumpaday.com/wp-content/uploads/2017/01/random-pic ...

Conceal elements of a rectangular shape using CSS

https://i.stack.imgur.com/ebaeI.jpg I need help hiding the second rectangular shape on my website. I want the width to be 100% and responsive, but whenever I use position: absolute; with right:-10%, it's not working as expected. Even trying body { ma ...

The overflow hidden property does not seem to be effective when used in conjunction with parallax

The issue arises when I attempt to use the overflow hidden property in combination with parallax scrolling. Although everything seems to be working correctly with JavaScript for parallax scrolling, setting the overflow to hidden does not contain the image ...

Is there a way to adjust the width of the info panel in an SVG to automatically match the width of the SVG itself?

I am looking to place the information panel at the bottom of my SVG map and have it adjust its width according to the width specified in the viewBox. This way, even if I resize the map, the info panel will automatically adjust to fill completely based on t ...

Issues with modals appearing improperly after transitioning to NG-Bootstrap 15 and Bootstrap 5 upgrade

UPDATED following a thorough examination: In the process of upgrading our application from NG-Boostrap v11 with bootstrap 4 to NG-Boostrap v15 with Bootstrap 5 and Popper, we also made the switch from Angular 15 to Angular 16. Despite successfully resolvi ...

HTML5 validation fails to activate

Addressing the issue head-on Check out the form I have created: <form action="<?php echo base_url()?>" method="post" id="formfield"> <center> <label>How much? <small>( Minimum of 100 )</small></label&g ...

Achieve a div to fill the remaining width while using list-style-position: inside

I have been attempting to make another div occupy the remaining space in the numerical list item using list-style-position: inside, but it does not seem to be working for me. While I could opt for list-style-position: outside and add some spacing to avoid ...

Struggling to stack two forms on top of each other within a Bootstrap row class

I am trying to incorporate 2 forms on a web page, one below the other. Here is what I have: <body id="Signup"> <form class="row col-lg-6"> <legend>Légende</legend> <div class="form-group"> ...

What is the best way to access all sections of a JSON file containing nested objects within objects?

Here is an example of my JSON file structure: [{ "articles": [ { "1": { "sections": [ {"1": "Lots of stuff here."} ] } }, { "2": { "sections": [ {"1": "And some more text right here"} ] } } }] The c ...

Three columns with the first column having a flexible width

On various coding forums, I've come across multiple examples using floats, but none have provided a solution for my specific issue. I have three column divs with varying widths - the first column is dynamic while the other two are fixed. Looking for a ...

How to align several lines of text in a table cell

I've been trying to center multiple lines of text in a table cell using the table method, but no matter how many online guides and SO posts I follow, I just can't seem to get it right. What I'm aiming for is to have the text perfectly cente ...