React-Bootstrap Rows/Columns are not the full width of the screen (Only 50% of it)

Question

My experience with CSS and Bootstrap, when it comes to positioning and resizing elements on the screen, has been bloody awful ever since I started writing HTML. All I am trying to do (in my React project) is position 2 elements on the screen side by side, the element on the left needs to be 80% of the screens width and the element on the right has to be 20% of the screens width. Obviously for bootstrap to be able to do this, it requires 4 weeks writing code, 20+ stack overflow questions and 1 human sacrifice.

Below is the main app component with a <React.Fragment/> tag and a <Container/> with <Row/> and <Col/> inside that:

import React, { Component } from "react";
import { Container, Row, Col } from "react-bootstrap";

class App extends Component {
  state = {};
  render() {
    return (
      <React.Fragment>
        <Container>
          <Row>
            <Col>Hello</Col>
            <Col>Hello2</Col>
          </Row>
        </Container>
      </React.Fragment>
    );
  }
}

export default MainContent;

Expected result? Hello will be on the left of screen and Hello2 will be on the right of screen smack bang in the middle. Just as the docs suggest here.

But of course that doesn't happen. The row is centered in the middle of the screen and is about half of the screen size in total width.

To illustrate: 25% Whitespace | Hello1 | Hello2 | 25% Whitespace

Honestly, I have no idea what to do. Setting the margins to 0 will put it on the left of screen but it is still not the full width.

Someone please help me, I've had enough :(

Solution 1

By default in bootstrap, container width and max-width is set to some px like,

@media (min-width: 768px)
.container {
    max-width: 720px;
}

@media (min-width: 576px)
.container {
    max-width: 540px;
} 

.container {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

You have to set max-width: 100% like,

.container {
  max-width: '100%'  //This will make container to take screen width
}

Or, Another way is, you can add fluid prop to Container,

fluid - Allow the Container to fill all of it's availble horizontal space.

<Container fluid>
  ...
</Container>

Note: Here Col will take by default equal space.

The Col lets you specify column widths across 5 breakpoint sizes (xs, sm, md, large, and xl).

For example,

<Row>
    <Col xs={6} md={8}>
      xs=6 (6 parts of screen on small screen) md=8 (8 parts of screen on medium screen)
    </Col>
    <Col xs={6} md={4}>
      xs=6 md=4
    </Col>
</Row>

Solution 2

I had the same issue, and my root component wasn't 100% wide. Setting the width to 100% fixed the issue.

#root {
    width: 100%;
}

Solution 3

Width anywhere can be given in single or double quotes, use width part of the style as shown below:

    style={{
      width: "80%",
      paddingLeft: 100,
      paddingRight: 200,
      paddingTop: 30,
      paddingBottom: 30,
      border: "3px solid lightGray",
    }}

Solution 4

I don't know much about this technology... but this should work.

  <React.Fragment>
    <Container>
      <Row>
        <Col md={{ span: 3 }}>Hello</Col>
        <Col md={{ span: 3 }}>Hello2</Col>
      </Row>
    </Container>
  </React.Fragment>

EDIT: I might have read wrong your question. Are you referring to screen width? Or "container" div width?

View more solutions

Comments

[Admin]

Does 6 parts of the screen mean 6 / N of the screen, and if so what is N?

[ravibagul91]

@Pixel The Grid is divided into 12 parts. So N = 12.

[Admin]

thank you - is this true always? Can we not change N somehow?

[nycynik]

it's always 12 - there is a science behind it.