React Bootstrap CSS: I want my Container element to fill more of the entire page horizontally

Question

In Reactjs, I am creating a container with three equally sized columns. Currently my code creates the three columns but they only occupy the center section of the page, leaving a lot of space to the right and left of the columns.

I want the three columns to take up more of the entire row horizonatally.

Here is my js code:

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

import classes from './PainPoints.css';

const painPoints = (props) => {
    return (
        <div className={classes.ContentBoxLarge}>
            <div>
                <div className={classes.SectionHeader}>
                    <h1>Industry Pain Points:</h1>
                </div>
            </div>
            <Container>
                <Row>
                    <Col className={classes.Column}>
                        <div>Excessive Fees</div>
                    </Col>
                    <Col>
                        <div>Middleman Price Markups</div>
                    </Col>
                    <Col>
                        <div>Anonymous Ticket Holders</div>
                    </Col>
                </Row>
            </Container>
        </div>
    )
}

export default painPoints;

Here's my CSS code:

.ContentBoxLarge {
    padding: 80px 0;
}

.Column {
    width: 1170px;
}

.SectionHeader {
    text-indent: 150px;
    margin: 0 0 0 0;
}

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

@media (min-width: 992px) {
   .container {
   width: 970px;
   }
}

@media (min-width: 1200px) {
  .container {
   width: 1170px;
   }
}

ravibagul91 · Accepted Answer · 2019-08-12 15:12:09Z

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
}

Note: Don't set width to column like,

.Column {
    width: 1170px;
}

answered Aug 12, 2019 at 15:12

ravibagul91

20.9k6 gold badges40 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

smile Over a year ago

From documentation: "You can use <Container fluid /> for width: 100% across all viewport and device sizes" react-bootstrap.github.io/layout/grid

SoufianeL · Accepted Answer · 2019-08-12 15:10:15Z

0

Try passing a "width : 100%" to all the parent elements that require it (Container, ContentBoxLarge and maybe Row). Then add the following css

.row{
   display: flex;
   justify-content: space-between;
}
.col{
   flex: 1 1;
}

answered Aug 12, 2019 at 15:10

SoufianeL

1662 silver badges7 bronze badges

Collectives™ on Stack Overflow

React Bootstrap CSS: I want my Container element to fill more of the entire page horizontally

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related