I need assistance in making three buttons span the entire width of a column.
The grid consists of 3 sections for the buttons and 9 sections for other components.
Here's a visual reference. Essentially, the buttons should take up the space highlighted in red and utilize the full column width of 3.
Below is the snippet from App.js where I have imported the component:
<div className="container-full padding-0" style={{overflow:'hidden', overflowY:'hidden'}}>
<div className="row">
<div className="col-sm-3" style={{borderRight:"1px solid #000"}}>
<div className="row no-gutters mt-auto">
<div className="col-sm-3">
<COMPONENT1/>
</div>
<div className="col-sm-9">
<COMPONENT2/>
</div>
</div>
<COMPONENT3 store={store} style={{overflow:'hidden'}}/>
<COMPONENT4/>
<BUTTONS/> --------------------------> The buttons go here
</div>
<div className="col-sm-9" style={{paddingRight: 0, paddingLeft: 0}}>
<COMPONENT6 = {store} style={{overflow:'hidden'}}/>
<br/>
<COMPONENT7/>
<COMPONENT8 store={store} clicked={this.clicked}/>
</div>
</div>
</div>
Snippet for the buttons component:
<div className="row no-gutters mt-auto" style={{paddingTop:10}}>
<div className="col-sm-4">
<Button variant="raised" style={buttonStyle}>A</Button>
</div>
<div className="col-sm-4">
<Button variant="raised" style={buttonStyle}>B</Button>
</div>
<div className="col-sm-4">
<Button variant="raised" style={buttonStyle}>C</Button>
</div>
</div>
CSS code for styling the buttons:
const buttonStyle = {
fontSize: 20,
textAlign: 'center',
display:'inline-block',
width:'100%',
height:100
}
UPDATE: Check out this image for a preview of the UI design