Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-bootstrap-grid-component

Package Overview
Dependencies
Maintainers
10
Versions
6
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-bootstrap-grid-component

React Bootstrap Grid

  • 0.2.5
  • latest
  • npm
  • Socket score

Version published
Maintainers
10
Created
Source

React Bootstrap Grid Component

React Bootstrap Grid is a made to make your life easier while using Bootstrap Grid inside your React project. Main concepts of the grid have been transformed into react components such as Container, Row and Column. By adding attributes that are defined bellow you can easily implement the grid to your liking or given specification.

Installation

Install react-bootstrap-grid-component npm install react-bootstrap-grid-component

Components

Container

A Container should always wrap Rows as children.

Usage
import 'bootstrap/scss/bootstrap.scss';
import 'react-bootstrap-grid-component/dist/sizingbreakpoints.scss';
import { Container } from "react-bootstrap-grid-component/dist/Container";
import { Column } from "react-bootstrap-grid-component/dist/Column";
import { Row } from "react-bootstrap-grid-component/dist/Row";

<Container>
    <Row>
        <Column />
    </Row>
</Container>
Properties

The only property that this component support is the isFlud which when is defined sets the .container-fuild class on the wrapping tag

/**
 *  https://getbootstrap.com/docs/4.1/layout/grid/#how-it-works
 */
isFluid?: boolean

Row

Usage
import 'bootstrap/scss/bootstrap.scss';
import 'react-bootstrap-grid-component/dist/sizingbreakpoints.scss';
import { Container } from "react-bootstrap-grid-component/dist/Container";
import { Column } from "react-bootstrap-grid-component/dist/Column";
import { Row } from "react-bootstrap-grid-component/dist/Row";

<Container>
    <Row>
        <Column />
    </Row>
</Container>
Properties
/**
 * https://getbootstrap.com/docs/4.0/layout/grid/#vertical-alignment
 */
verticalAlignment?: "center" | "baseline";
/**
 * https://getbootstrap.com/docs/4.0/layout/grid/#horizontal-alignment
 */
horizontalAlignment?: "start" | "center" | "between" | "end";
/**
   * https://getbootstrap.com/docs/4.0/layout/grid/#no-gutters
   */
  noGutters?: boolean;
/**
  * Rows must contain only columns to prevent negative margin issues
  */
children: Array<React.ReactElement<Column>> | React.ReactElement<Column>;

Column

import 'bootstrap/scss/bootstrap.scss';
import 'react-bootstrap-grid-component/dist/sizingbreakpoints.scss';
import { Container } from "react-bootstrap-grid-component/dist/Container";
import { Column } from "react-bootstrap-grid-component/dist/Column";
import { Row } from "react-bootstrap-grid-component/dist/Row";

<Container>
    <Row>
    <Column size="6">
        <div>Content</div>
    </Column>
    <Column size={xs:12,md:6}>
        <div>Content</div>
    </Column>
    </Row>
</Container>
Properties
direction?: "row" | "col";

size?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;

verticalAlignment?: "top" | "center" | "bottom" | "justify";

horizontalAlignment?: "left" | "right" | "center" | "stretch";

offset?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;

order?:  0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | "first" | "last";

Note: If you set size to be equal to 0 the column will disappear

Additional CSS

./src/components/sizingbreakpoints.scss

This SCSS-File extending the Bootstrap default width declaration (h-w-25, h-w-50, h-w-75, h-w-100) with breakpoints.

Prefixes

If you want to override some of the default classes of the bootstrap grid, use prefixes. There are prefixes for container, rows and columns

Depending if you want to apply changes globaly or only in one/couple of components then define the prefix on top of desired page

import prefixes from 'react-bootstrap-grid-component/dist/PrefixManager';

prefixes.container | prefixes.column | prefixes.row = 'h-';
$helper-css-prefix: "h-";

FAQs

Package last updated on 03 May 2020

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc