Achieving a Full Utilization of Available Space in Bootstrap

I'm working on an app using react-bootstrap and I'm looking for guidance on how to utilize the remaining space in the main section, excluding the header and footer. Any suggestions?

import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";
import { Navbar } from "react-bootstrap";

export default function App() {
  return (
    <Row>
      <Col xs={12}>
        <Navbar bg="dark" variant="dark">
          <Navbar.Brand href="#home" className="bold-text">
            NAV
          </Navbar.Brand>
        </Navbar>
      </Col>
      <Col xs={12}>
        <div
          className="mt-4"
          style={{
            backgroundColor: "#cbcbcb"
          }}
        >
          Main Content
        </div>
      </Col>
      <Col xs={12}>
        <Navbar
          fixed="bottom"
          bg="dark"
          variant="dark"
          className="justify-content-md-center"
        >
          <Navbar.Brand href="#home" className="text-center">
            Footer
          </Navbar.Brand>
        </Navbar>
      </Col>
    </Row>
  );
}

View the output here: https://codesandbox.io/embed/affectionate-noether-hkk6z?fontsize=14&hidenavigation=1&theme=dark

Thank you in advance!

cssreactjstwitter-bootstrapreact-bootstrapbootstrap-5

Answer №1

In various discussions on how to make a row stretch to the remaining height, the solution involves utilizing the flex-grow and height classes. It is important to ensure that the row is contained within a container. Below is an example of how you can implement this in your React application:

     <Container className="vh-100" fluid={true}>
          <Row className="flex-column h-100">
              <Col xs={12}>
                <Navbar bg="dark" variant="dark">
                  <Navbar.Brand href="#home" className="bold-text">
                    NAV
                  </Navbar.Brand>
                </Navbar>
              </Col>
              <Col xs={12} className="flex-grow-1">
                <div
                  className="h-100"
                  style={{
                    backgroundColor: "#cbcbcb"
                  }}
                >
                  Main Content
                </div>
              </Col>
              <Col xs={12}>
                <Navbar
                  fixed="bottom"
                  bg="dark"
                  variant="dark"
                  className="justify-content-md-center"
                >
                  <Navbar.Brand href="#home" className="text-center">
                    Footer
                  </Navbar.Brand>
                </Navbar>
              </Col>
            </Row>
     </Container>

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

Issue with Material UI: The "styled" child component is failing to apply the specified CSS rules

I encountered a problem while trying to use the styled function to customize a React component, but for some reason, the styles are not being applied as expected. In the provided example, I anticipated that the Child component would be styled with color: r ...

reactjsmaterial-ui

Click on the button to add a new question and watch as another row magically appears

Working with ReactJS My goal is to display 10 rows by default, followed by a button labeled "Add a new question" which would create the 11th row. View current row image here Currently, only one row is being shown [referencing the image below]. I aim to ...

javascriptjqueryreactjsnpmmaterial-ui

I'm facing an issue with my react-router Links not functioning properly when placed within a Bootstrap 5 dropdown navbar button. What could

I have encountered an issue while working on a React project. I copied the navbar code from Bootstrap and made some adjustments to work with React, such as changing "class" to "className". However, no matter what changes I make, the links in the navbar do ...

reactjsreact-routernavbarreact-bootstrapbootstrap-5

Is the accuracy of Chrome's inspect device not up to par?

I'm currently testing how the page appears on a 1366x768 laptop. When inspected in the device, it looks perfect: https://i.sstatic.net/OECnx.png However, on the actual laptop screen, it's completely off: https://i.sstatic.net/chaeY.png It&ap ...

htmlcssgoogle-chromescreen-resolution

Using -webkit-transform with varying transition durations for rotateX and rotateY properties

Is it possible to have different transition times for both rotateX and rotateY in CSS3? I know you can use -webkit-transition to set a time, but it seems like setting separate transition times for both is not doable. It appears that you can only set it for ...

jqueryhtmlcsswebkit

Ways to align list items in the middle of a webpage with CSS

Currently, I am working on a website and looking to create a customized list where the pictures act as clickable links. You can check out the website here. My goal is to have the links adjust to align left based on the browser size, and also have the imag ...

htmlcsswordpressresponsive-designhtml-lists

Using useEffect to pass data from a checkbox element to its parent component

Looking for some React practice, I created a checkbox component to manage a list of devices. My goal is to have the parent element, App, display the name of the device when it's checked. Despite my attempts, I haven't been successful in achieving ...

reactjscheckboxreact-hooks

Displaying Material UI Styles: A Challenge

Currently working on a website using Material-UI and React. Strangely, the styling applied through Material-UI's Hook API functions perfectly on codesandbox.io but fails to work when running locally. Notably, the border radius feature fails to update ...

javascriptreactjsmaterial-uistylingcodesandbox

How can you retrieve the value of a CSS file in Javascript and CSS?

Imagine there is an element with the class .selector. This class defines its style. Once the page has finished loading, some JavaScript code is executed - the specifics are not important. What matters is that the CSS properties have set the object's ...

javascriptjquerycss

There is a type error: The term 'Post' is referencing a value when it is being used as a type here. Were you intending to use 'typeof Post' instead?

After creating a blog app using Nextjs + Sanity, I encountered an issue in my [slug].tsx file. The error message reads: Type error: 'Post' refers to a value but is used as a type here. Did you mean 'typeof Post'? The file has the .t ...

reactjsnext.js

What steps can be taken to troubleshoot and resolve the API problem causing a 400 error in a react

I'm currently working on my react project and attempting to add a new page. I've set up all the models, controllers, and routes, but unfortunately, the data from the form on my newly added page isn't being posted into the MongoDB collection. ...

node.jsreactjs

Tips for customizing fonts in react-pdf

I am having difficulty in changing fonts within react-pdf. // Register Font Font.register({ family: "Roboto", src: "https://cdnjs.cloudflare.com/ajax/libs/ink/3.1.10/fonts/Roboto/roboto-light-webfont.ttf" }); The default f ...

javascriptreactjspdfnpmfonts

React is capable of rendering just a single GraphQL Query at a time

I am currently in the process of creating a bar chart using 4 different GraphQL queries to display various data points. This is my first attempt at building dashboards, so I am looking to gain more experience. In the image below, you can see that I am onl ...

reactjsgraphqlplotlyplotly-dashstrapi

Different ways to position two header tags on top of each other instead of next to each other

I am attempting to adjust the placement of my header tags so that the second header sits directly below the first one, rather than side by side. Currently, I am using h1 and h2 tags for my headers. I have experimented with placing both headers inside an h ...

htmlcssheadertags

Tips for handling catch errors in fetch POST requests in React Native

I am facing an issue with handling errors when making a POST request in React Native. I understand that there is a catch block for network connection errors, but how can I handle errors received from the response when the username or password is incorrec ...

javascriptreactjstypescriptreact-native

Adjust the appearance of elements depending on whether the user has activated dark mode or

What is the most efficient way to implement both dark and light themes in my Vue app? One option is to create a 'dark.scss' file and use the '!important' property to override styles defined in components. Another option is to utilize pr ...

javascriptcssvue.jsthemes

Maintaining an active link in a navigation list: A guide for Twitter Bootstrap

How can I make a link appear active when clicked, and keep it active while the user is on that page? (Using Symfony2 with Twitter bootstrap) <ul class="nav nav-list"> <li class="active"> <a href="/link1">Link</a> </li> &l ...

jquerysymfonytwitter-bootstrap

Fetching data from React Router v6 Navigate

When I navigate to a new route, I am encountering an issue with passing state data in TypeScript. The error message says: Property 'email' does not exist on type 'State'." The parent functional component looks like this: naviga ...

reactjstypescriptreact-router

Exploring CSS Outlining in Visual Studio 2013

Back in the days of Visual Studio 2010, whenever you opened a CSS file, a window would automatically pop up displaying all the classes and IDs for easy navigation within the file. However, in Visual Studio 2013, I seem to be unable to locate this helpful ...

cssvisual-studio-2013

Instructions on how to bring in the Helper class in a React component

I have been working on a helper class in React, and I'm encountering some issues. The setup is shown in the image below: https://i.sstatic.net/4eweA.png In my App.js file, I initially tried importing the Helpers class like this: import Helpers fr ...

javascriptreactjs