Question 287262 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Add extra grid size in React Bootstrap 5

Is it possible to add an extra size to react bootstrap?
Right now the bootstrap sizes are as follows:

      WPW    Container Max-Width
sx < 576px - none
sm > 567px - 540px
md > 768px - 720px
lg > 992px - 960px
xl > 1200px - 1140px
xxl > 1400px - 1320px

I would like to add another one like
xxl > 1580px – 1500px

I want to add this because I want a container with a max width of 1500px and be able to divide columns of the row in such a way as to fit 5 columns on a row.

So far I added this to my CSS

@media (min-width: 1580px) {
  .container,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl,
  .container-xxl {
    max-width: 1500px;
  }
}

This only makes the container bigger, doesn’t adjust the col sizes and if I use xxl={2} or xxl={2.2} I still get 4 items/row.

Tags:

2

Answers


  1. 0

    In Bootstrap 5, the grid system is based on flex containers and flex items. If you want to customize the grid system for an additional breakpoint, you can create a custom CSS class for the new breakpoint and apply it to the specific elements.

    Here’s an example of how you can create a custom class for a new breakpoint and use it with React Bootstrap:

    CSS Code:

    /* Custom breakpoint */
@media (min-width: 1580px) {
  .custom-container {
    max-width: 1500px;
  }

  .custom-col {
    flex: 0 0 20%; /* Adjust the width as needed for 5 columns */
  }
}

    Then, in your React component, you can use this custom class:

    import React from 'react';
import { Container, Row, Col } from 'react-bootstrap';
import './YourCustomStyles.css'; // Import your custom styles

const YourComponent = () => {
  return (
    <Container className="custom-container">
      <Row>
        <Col className="custom-col">Column 1</Col>
        <Col className="custom-col">Column 2</Col>
        <Col className="custom-col">Column 3</Col>
        <Col className="custom-col">Column 4</Col>
        <Col className="custom-col">Column 5</Col>
      </Row>
    </Container>
  );
};

export default YourComponent;
    Login or Signup to reply.
  2. 0

    As explained here, there is no way to get react-bootstrap attributes to recognize the additional breakpoint (ie: xxxl={5})

    However, you can add the extra breakpoint to Bootstrap using SASS, and then refer the appropriate Bootstrap row-cols-{breakpoint}-{size} class as className.

    https://codeply.com/p/z7Oqx8giVL

    Here’s how to generate the extra xxxl grid breakpoint using SASS. Just adding container size changes in CSS won’t be enough…

    SASS:

    @import "functions";
@import "variables";

$grid-breakpoints: (
  xxs: 0,
  xs: 375px,
  sm: 544px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1300px,
  xxxl: 1500px
);

$container-max-widths: (
  xxs: 375px,
  xs: 375px,
  sm: 544px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1300px,
  xxxl: 1500px
);

@import "bootstrap";

    Markup:

          <Container className="App" fluid={true}>
        <Row className="row-cols-xxl-4 row-cols-xxxl-5">
            <Col>
              Col 1
            </Col>
            <Col>
              Col 1
            </Col>
            ...
        </Row>
      </Container>

    Demo

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search