React Bootstrap: How to use all columns for small devices and fixed width for medium devices - react-bootstrap

Question

I have a React Bootstrap column which right now looks this way:
<Col xs={12} md={3}>
I want to modify it so it has a fixed width of 500 for medium devices and tried to apply
className="d-flex flex-md-grow-0 flex-md-shrink-0" but that doesn't seem to work. Also I don't know how to set flex-basis to apply the 500px width or do I have to combine it with w-500?
Many thanks in advance

Answer 1

You can set an css max-width at col-md-
const Grid = ReactBootstrap.Grid;
const Row = ReactBootstrap.Row;
const Col = ReactBootstrap.Col;
const Hello = React.createClass({
getInitialState() {
return { showModal: false };
},
render() {
return (
<Grid>
<Row>
<Col className="hello" xs={12} md={12}>
Hello
</Col>
</Row>
</Grid>
);
}
});
ReactDOM.render(
<Hello name="World" />,
document.getElementById('container')
);
html, body {
height: 100%;
}
.col-md-12 {
max-width: 500px;
background-color: red;
}
<link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css' rel='stylesheet'>
<div id="container"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.5/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.28.1/react-bootstrap.min.js"></script>