Guide to adjusting the height of a row in bootstrap

Currently, I am utilizing the Bootstrap framework and implementing the grid system. Here is a snippet of the code I am working with:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row" style="background-color: aliceblue;">
    <div class="col-lg">
        First
    </div>
</div>
<div class="row" style="background-color: red;">
    <div class="col-lg">
        Second
    </div>
</div>

I am looking to adjust the first row to occupy 90% of the screen while the second row should take up only 10%. Can anyone provide guidance on how this can be achieved?

Your assistance is greatly appreciated.

cssbootstrap-4

Answer №1

Define the viewport height as the visible area of a website within the browser window

<div class="row" style="background-color: aliceblue; height: 90vh;"> </div>

<div class="row" style="background-color: red; height: 10vh;"> </div>

Answer №2

To start, ensure that the Body and Container (the parent of rows) both have a height set to 100%.

html, body {
    height: 100%;
}

.fill { 
    min-height: 100%;
    height: 100%;
}
<link rel="stylesheet" type="text/css" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">

<body>
    <div class="container-fluid fill">
        <div class="row-fluid vh-40" style="background-color: blue;">
            <div class="col-lg">
                d90
            </div>
        </div>
        <div class="row-fluid vh-10" style="background-color: red;">
            <div class="col-lg">
                d10
            </div>
        </div>
    </div>
</body>

For further details:

https://getbootstrap.com/docs/4.4/layout/grid/

https://getbootstrap.com/docs/4.4/utilities/sizing/

When working on responsive design, consider using vh units for height relative to the viewport size.

Keep up the good work!

_Teddy_

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 exactly is the function of $fix-mqs within the IE Sass mixins created by Jake Archibald?

I'm really struggling to understand the purpose behind using $fix-mqs in the mentioned link: Although I can grasp how the rest of the mixin functions, this particular part has me stumped. In a project where I've utilized this pattern, everything ...

cssinternet-explorersass

Can I trust PHP to create my stylesheet using file_put_contents securely?

In an effort to build websites that are easy to maintain, I came up with a solution to use PHP to call in HTML lines and generate a stylesheet with only the necessary CSS. This way, I can make changes to the CSS once and have it apply to multiple elements. ...

phphtmlcssstylesheettemporary-files

What are some ways to customize the appearance of React Semantic components?

Is there a way to apply CSS for react semantic UI when using create react app? I have installed semantic-ui-react and included the CSS CDN: loginForm.js: import React from "react"; import { Button, Form, Header } from "semantic-ui-react"; import styles f ...

javascriptcssreactjs

Tips for adjusting the arrangement of Horizontal Cards on mobile using Materialize CSS

I'm currently working on a design layout similar to this example. The goal is to have the image and text displayed side-by-side on desktop and tablet devices, while on mobile they should be stacked on top of each other. I'm utilizing the Horizont ...

htmlcssmaterializeresponsive

I am having trouble understanding why dropdown menus with the same content have varying widths

My issue is illustrated in the screenshots below: first-dropdown: second-dropdown: The second dropdown appears slightly wider on the right side. Despite Google Chrome's claim that the widths are the same. HTML code: <div class="row menu"> ...

htmlcsstwitter-bootstrap

Unable to activate tr:hover override feature in Dash app

Although I am new to Dash, I am well-versed in Python, HTML, and CSS. I have a simple structure that displays a DataTable. Here is the code snippet: def render_datatable(df=None, id=None): dt1= dash_table.DataTable( id=id, columns=[{&q ...

cssplotly-dash

Is there a way to alter visibility once a radio button has been selected?

I have a shape resembling a cube with 4 faces, all of which are currently visible. However, I would like to hide the other 3 faces when one face is showing. For example: I attempted setting the opacity of the other cube sides to 0 when the first radio but ...

javascripthtmlcss

Apply a unique design to a class by clicking on a button

There are 3 identical boxes with the same classes and a button: function changeColorAndAddPadding() { /* ??? */ } .box { border: 1px solid; display: inline; } <button onclick="changeColorAndAddPadding();">Click Here</button> <d ...

javascripthtmlcss

Is there a method to use media queries to dynamically switch JavaScript files based on the user's device?

I've been working on optimizing the mobile layout of my website, and while I have successfully implemented a media query with a different stylesheet for mobile devices, I'm struggling to determine if it's feasible to also load a separate Jav ...

javascriptcssmedia-queries

Challenges in customizing the bootstrap navigation bar links

Having an issue with the bootstrap navbar link displaying on small devices. Here is the template I'm using: https://i.sstatic.net/jSy1b.png The last item is displaying in two lines. ...

cssresponsivebootstrap-5

Troubleshooting problem with CSS layout when adjusting the height of a section

I recently delved into creating a simple website using HTML5 and have successfully set up the site structure. Everything has been smooth sailing so far. However, I've encountered a section of the site that seems to have a mind of its own. When I ass ...

csshtml

What is the best way to center text vertically in a <div> using CSS?

This is my first attempt at creating a chrome extension, and I am currently working on centering text. Right now, I am using text-align: centre; to align the text horizontally, but I am struggling to figure out how to align it vertically. As a result, my t ...

htmlcssgoogle-chromegoogle-chrome-extension

jQuery will not carry out the initial trigger action more than once

I've successfully implemented a feature where clicking on one of the 3 divs causes the main container to slide half away by 600px and reveal a new container with additional options. However, I'm facing an issue where after closing the new content ...

javascriptjqueryhtmlcss

What methods can I use to customize the appearance of the acceptance label in a contact form created with

I am currently developing a WordPress website using the Contact Form 7 plugin. However, I am facing an issue with styling the "I accept" button and text when clicking on the "registrace" button. I would like to center them and create some proper margin aro ...

htmlcsswordpresscontact-form-7

Adjust the height of the element to prevent the need for a double-scroll

Currently, I have created a webpage for a client that includes a PDF using an iframe tag. The issue arises when the PDF is rather large, resulting in two scrollbars - one for the page and one for the embedded PDF within the iframe (loaded through the integ ...

javascripthtmlcssajax

Step-by-step guide on repairing a countdown clock using JavaScript, HTML, and

I'm having issues with my JS on my website. I am new to this and currently in the process of setting up a website. I want to add a timer to show when the site will be active. It seems like there is an error somewhere in the JS code that I can't ...

javascriptjqueryhtmlcss

What is the best way to combine flex-direction and flex-wrap in one row?

I'm working with a React component that looks like this: <Card className='form-margin width card' zDepth='3'> <CardText> <strong>Test</strong><br /> This is some text </Card ...

cssreact-nativeflexboxreact-native-flexbox

How can CSS incorporate the color of a different class?

Is it feasible to reference a color from one CSS class to another? Or generate a universal color definition that can be applied to multiple classes, eliminating the need to update in various places when changing a color? For instance, if I have a CSS clas ...

csstwitter-bootstrapbootstrap-4css-variables

Unable to adjust the width of a label element using CSS specifically in Safari browsers

Here's the issue I'm facing with my HTML code <input type="checkbox" asset="AAA" name="assets[AAA]" value="AAA" id="assets[AAA]" class="c_green" checked="checked"> <label for="assets[AAA]"></label> In my CSS, I have the follow ...

javascripthtmlcsssafari

How to position ion-title at the center using position:absolute

I am a newcomer to the world of Ionic Framework. Recently, I created a page that features a swipe-back-button located on the left side of the navigation bar. This positioning causes the title to shift slightly to the right, as demonstrated by the addition ...

cssionic-framework