How to implement small column sizes in Bootstrap Grid?

Question

I am trying to design this using React Bootstrap Grid, How do I make my grid so that the COLORBAR takes only a very small width?

I am trying this

<Grid>
  <Row>
    <Col lg={1}>
      <ColorBar/>
    </Col>

    <Col lg={11}>
      <Content>
    </Col>
  </Row>
</Grid>

But the ColorBar takes a big chunk of the 12 section layout

I would also have a lot of Row elements in the content that needs to be responsive, hence I'm trying to stick to the Row-Col-Row convention

Answer 1

You could simply define your own custom column width as Tobia explains here:

Answer 2

Why not using Custom <div> instead. Give it a styling of width and height as per your requirement.

This is what you are looking for:

<Row className="rowss">
  <div className="line2" />
  <Row className="margin-left column-width">
    <Col xs={12}>
    <h4> Header </h4>
    </Col>
    <Col xs={3} className="content2">
    <p> Content 1 </p>
    </Col>
    <Col xs={3} className="content2">
    <p> Content 2 </p>
    </Col>
    <Col xs={3} className="content2">
    <p> Content 3 </p>
    </Col>
    <Col xs={3} className="content2">
    <p> Content 4 </p>
    </Col>
  </Row>
</Row>

Examples separated in Grids as per your requirement.

const Grid = ReactBootstrap.Grid;
const Row = ReactBootstrap.Row;
const Col = ReactBootstrap.Col;
const Test = React.createClass({
  render() {
    return (
      <Grid>
        
        <Row className="rowss">
          <div className="line2" />
          <Row className="margin-left column-width">
            <Col xs={12}>
              <h4> Header </h4>
            </Col>
            <Col xs={3} className="content2">
              <p> Content 1 </p>
            </Col>
            <Col xs={3} className="content2">
              <p> Content 2 </p>
            </Col>
            <Col xs={3} className="content2">
              <p> Content 3 </p>
            </Col>
            <Col xs={3} className="content2">
              <p> Content 4 </p>
            </Col>
          </Row>    
        </Row>
        
        <Row className="rowss">
          <div className="line" />
          <Col xs={12} className="content">
            <p> Here is the content </p>
          </Col>
        </Row>
        <Row className="rowss">
          <div className="line1" />
          <Col xs={3} className="content1">
            <p> Content 1 </p>
          </Col>
          <Col xs={3} className="content1">
            <p> Content 2 </p>
          </Col>
          <Col xs={3} className="content1">
            <p> Content 3 </p>
          </Col>
          <Col xs={3} className="content1">
            <p> Content 4 </p>
          </Col>
        </Row>
        
        
      </Grid>
    );
  }
});

ReactDOM.render(<Test />, document.getElementById("app"));

.col-x {
  border: 1px solid red;
}

.line {
  width: 20px;
  height: 200px;
  background-color: green;
}

.line1 {
  width: 20px;
  height: 200px;
  background-color: red;
}

.line2 {
  width: 20px;
  height: 200px;
  background-color: blue;
  border-right:2px solid white;
}

.margin-left {
  margin-left: 0px !important;
  margin-right: 0px !important;
}

.column-width {
  width: 100%;
}

.content {
  border: 1px solid red;
}

.content1 {
  border: 1px solid orange;
  background-color: lightgrey;
}

.content2 {
  background-color: grey;
  border:1px solid white;
  height: 161px;
}

.rowss {
  display: flex;
  flex-direction: row;
  border: 1px solid black;
  margin:10px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.29.4/react-bootstrap.min.js"></script>
<div id='app'></div>