CODEWITHSUNDEEP
htmlcssreactjsreact-bootstrap
Rafael C
Rafael C

Reputation: 83

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

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;
   }
}

Upvotes: 0

Views: 5915

Answers (2)

ravibagul91
ravibagul91

Reputation: 20755

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;
}

Upvotes: 1

SoufianeL
SoufianeL

Reputation: 166

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;
}

Upvotes: 0

Related Questions