Achieve Full Height with Bootstrap 4!

I have gone through numerous threads on this issue and attempted all the suggestions, but nothing seemed to work for me.

Here is the code I am currently using:

<div class="container-fluid d-flex flex-column" style="height: 100vh;">
                <div class="row d-flex flex-column no-gutters">
                    <app-top class="col"></app-top>

                    <div class="row flex-row no-gutters" style="margin-top: 38px;">
                        <app-left class="col flex-shrink-0"></app-left>

                        <div class="col">
                            <router-outlet></router-outlet>
                        </div>

                        <app-right class="col flex-shrink-0"></app-right>
                    </div>
                </div>
            </div>

The content in my code isn't extending as desired. It should display a Navbar at the top followed by three columns, each with full height.

htmlcssangulartwitter-bootstrapbootstrap-4

Answer №1

Get rid of the 100vh styles on the div and incorporate a bootstrap 4 class for achieving 100% height

<div class="h-100"></div>

Answer №2

Here's the solution you're looking for. Make sure to avoid using inline styles.

<div class="container-fluid h-100">

For a similar answer, check out this link: Bootstrap 4, how to make a col have a height of 100%?

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

Outputting undefined values when processing an http post array

I seem to have encountered a major issue. Despite my efforts, I am seeing an undefined value when trying to display this JSON data. {"StatusCode":0,"StatusMessage":"OK","StatusDescription":{ "datas": [ {"sensor_serial":"SensorSerial1", "id":"11E807676E3F3 ...

arraysjsonangulartypescriptpost

Angular Material 2: Tips for Differentiating Multiple Sortable Tables in a Single Component

Greetings, esteemed members of the Stackoverflow community, As per the Angular Material 2 documentation, it is mentioned that you can include an mdSort directive in your table: Sorting The mdSort directive enables a sorting user interface on the colum ...

angulartypescriptangular-materialangular-material2angular-directive

The dropdown menu in CSS is displaying only the final item on the list

Can anyone help me with my drop-down menu issue? It's only displaying the last items and I suspect there is something wrong with my CSS. Here are the details: HTML Code: <div class="menuBar"> <nav class="Menu"> <ul class="mai ...

htmlcssdrop-down-menunavigationlistitem

Problem with Jquery HTML CSS Slideshow

Currently I am working on integrating two sliders into one webpage using the demo available at . One of the sliders is customized from the Linking demo and I have named them slider1 and slider2 with different styling using global.css for slider-1 and text. ...

javascriptjqueryhtmlcss

Error in altering element width dimension

For my Bootstrap card project, I have some specific rules in mind: The card should have a minimum width of 250px (card #1 - looks good) If the first line exceeds 250px in length, the card should increase its width without wrapping the line (card #2 - widt ...

htmlcsstwitter-bootstrapbootstrap-5

"Enhance Your Search Input with Dynamic Suggestions from JSON Data Integrated with

Hello! I am looking to create an autosuggest feature using a PHP file that returns a JSON Object. I then parse it in JavaScript to generate a link with the correct ID (refer to the provided JSON data). JSON data from search_new.php: {"Data":{"Recipes":{ ...

phpjavascriptjqueryhtmljson

error TS2559: The type 'BookInterface[]' does not share any properties with the type 'BookInterface'

Hello, I am currently working on a project using Angular 7 and encountering the error TS2559: Type 'BookInterface[]' has no properties in common with type 'BookInterface'. Despite making changes to the code, the issue persists. Below is ...

javascripthtmlangulartypescript

Pass JSON data from Angular service to component

I have encountered a challenge while trying to pass JSON data from my API service to a component without directly subscribing in the component. The issue arises when attempting to access the data outside of the subscription block, as it returns something u ...

angularapihttpservice

Issues with Angular 5 application functionality on IOS8 using Browserstack

I encountered an issue while testing my Angular 5 app on an iPhone 6 with IOS8 (Safari) and in Browserstack. The app fails to run, only showing an empty page along with a Javascript error. Any advice or suggestions on how to resolve this? https://i.sstat ...

iosangular

Issue occurred while trying to update the MySQL database with an HTML form and Ajax integration

I am facing an issue with my form that uses a drop-down box and a hidden form field to send information to a PHP page. Everything works as expected when I submit the form directly to the PHP page, but when I try using AJAX to pass the information, it doesn ...

htmlajax

Drop the prohibited cursor before dragging

https://i.sstatic.net/WIBWr.jpg Is there a way to change the cursor behavior during element drag using HTML5 default drag and drop with TypeScript? I have tried various methods like changing from ev.target.style.cursor to "grab" cursor, adjusting dropEffe ...

htmlangulardrag-and-dropdrag

Rearrange the order of the next button to appear after the dropdown instead of the

When a button is clicked, the paragraph area should display while pushing down the next button/div and the rest of the page below it. In simpler terms, clicking on the button reveals the box without overlapping other elements. I apologize for any language ...

javascripthtmlcss

Can you provide me with information on how to indicate the activated menu item by highlighting the triggering button in Angular 14 and Material Design?

Is there a way to highlight the triggering button in an Angular Material menu, while also highlighting a menu item that matches a routerLink? <button mat-button [matMenuTriggerFor]="animals">Animal index</button> <mat-menu #animals ...

cssangularangular-materialmenu

Is it possible to transmit fixed routing information utilizing a path that can be customized with parameters?

Within my route definition, I am passing static data like this: const routes: Routes = [{ path: '/map', component: MapComponent, data: { animation: 'mapPage' } }]; To access this data ...

angularangular2-routing

Is there a way for me to detect variations in the input and subsequently alter the text?

I'm facing a situation with my HTML code: <label for="date">START DATE: <input id="date" name="date" type="number"> <span>days</span> <label> I am looking for a way to change the text inside the span element based o ...

javascripthtmlangular

Expandable sidebar using responsive Twitter Bootstrap

I am in search of a CSS solution to implement a button that can toggle a sidebar on and off using twitter bootstrap. Is there a specific term for those small icons seen on webpages that resemble pull tabs when the sidebar is closed and then move along wit ...

jquerycsstwitter-bootstrapsidebar

How come the values keep appearing without any loops or subsequent calls being made to the PHP file?

Here is a demo example showcasing 'Server Sent Events(SSE)': Embed HTML code(index.html) : <!DOCTYPE html> <html> <body> <h1>Receiving server updates</h1> <div id="result"></div> <script> if(type ...

javascriptphpjsonhtmlserver-sent-events

What steps can be taken to resolve a serve error specifically in a production environment caused by the absence of package

How do I resolve the following error: > ng "serve" "0.0.0.0" "--poll=2500" "--disable-host-check" "--prod=true" WARNING Running a server with --disable-host-check is a security risk. See https://medium.com/webpack/webpack-dev-server-middleware-securit ...

angularnpmnode-modulespackage.jsonwebpack-production

Bootstrap: Arrange multiple images horizontally within a row

I am trying to design a list item for a game that includes a background, an iconholder with an icon, a title, description, and up to three resources. I have been experimenting with Bootstrap and attempted using a container-fluid with an inner row but the i ...

htmlcssangularbootstrap-4

When I adjust the size of my browser, the elements on my HTML page shift around

I'm facing an issue where all my elements move when I resize my browser, and I cannot figure out why. How can I ensure that they stay in their respective positions even when the browser is resized? Is there a CSS solution for this? Thank you! body ...

htmlcss