I am trying to hide few columns on mobile screens but its not working for some reason. Here's my code:
<Row>
<Col className="col-md-2">Route Image</Col>
<Col className="col-md-3">
<Row>
<Col>Route Name</Col>
</Row>
<Row>
<Col>Route Location</Col>
</Row>
</Col>
<Col className="col-md-3 hidden-xs-down">Route Difficulty</Col>
<Col className="col-md-2 hidden-xs-down">Route Length</Col>
<Col className="col-md-2 hidden-xs-down">View Details</Col>
</Row>
Can someone please tell me what I am doing wrong?
Since Bootstrap v4.x, all .hidden- classes have been removed. You should use d-none .d-sm-block instead if you want to hide your element only on xs
Related
I have two columns with setup like this:
<Row>
<Col xs={24} lg={12}>
<p>Column 1</p>
</Col>
<Col xs={24} lg={12}>
<p>Column 2</p>
</Col>
</Row>
How can I use push or pull from the ANT Design Doc to make Column 2 to be above Column 1 in smaller screen?
We can't push/pull on the xs column because each column takes up the full width. Instead we can put column 2 on top initially and change the order when the viewport is large. At the large breakpoint we can push Column 2 to the right and pull Column 1 to the left.
The Grid API allows us to pass objects containing props such as span, push, and pull for the breakpoint.
<Row>
<Col xs={24} lg={{span: 12, push: 12}}>
<p>Column 2</p>
</Col>
<Col xs={24} lg={{span: 12, pull: 12}}>
<p>Column 1</p>
</Col>
</Row>
so i have divs created in react basically they are components and i want to style them using bootstrap like this:
div div div
div div
div div
so basically there are 5components,the top 3 should be small and stack next to each others with small margin. the middle two are bigger and they are under the right and left divs and the bottom ones the same as the middle divs.
i have tried doing like col-6 for the middle and col-4 for the top ones but they were all over the place and messy.
this is what i tried without using css just bootstrap:
<div className="container">
<div className="row">
<div className="col-lg-4">
<Card />
<ActualLineChart data={systolic}/>
<ActualLineChart data={Diastolic}/>
</div>
</div>
<div className="row">
<div className="col-lg-6">
<div>
<ActualBarChart data={systolicAndDiastolicAndPulseAverageNew}/>
</div>
<ActualScatterChart data={systolicAndDiastolicAndPulseAverageNew}/>
</div>
</div>
<div className="row">
<div className="col-lg-6">
<DistributionChart/>
<DistributionChart />
</div>
</div>
</div>
how can i do this behavior?
I am guessing that if you are using react-bootstrap you probably have already installed it and included react component in your app.js file using this
import { Container, Row, Col } from 'React-Bootstrap';
Then you can simply use this for your desired output.
<Container>
<Row>
<Col xs="4">
component 1
</Col>
<Col xs="4">
component 2
</Col>
<Col xs="4">
component 3
</Col>
</Row>
<Row className="justify-content-between">
<Col xs="4">
component 4
</Col>
<Col xs="4">
component 5
</Col>
</Row>
<Row className="justify-content-between">
<Col xs="4">
component 6
</Col>
<Col xs="4">
component 7
</Col>
</Row>
</Container>
Output will be look like this:
I was got a row of buttons I like to adjust to changes in screen resolution or browser window resizing. Right now, when I change the screen resolution or browser window size, the button starts to overlap to the second row. I read that bootstrap and adjust the size of the buttons or text to handle the changes.
I read another post and added the following code but its not quite working
<Grid fluid={true}>
<Row">
<Col md={3}>
<Button ...>
</Col>
<Col md={3}>
<Button ...>
</Col>
<Col md={3}>
<Button ...>
</Col> <Col md={3}>
<Button ...>
</Col>
</Row>
</Grid>
When I resize the screen View from 100% and below, the buttons are resizing in height and all buttons stays on the same row. However, when I change the view resizing with Ctrl + mouse wheel to over 100%, the buttons overlap to the next line. I also see the button row overlap when resizing the browser window size.
Is there a way to resize the buttons when over 100% and changing the browser window size?
I tried to add max-width: 90% !important in the css styling, but that did not work.
Any help is appreciated. Thanks
A solution is to use react-bootstrap Grid system like this:
This behaviour will make sure that the Columns (aka your buttons in this case) to flow automatically when there is no space left, they will start from next line and not overlap as you have now:
import { Container, Row, Col } from 'react-bootstrap'
...
<Container>
<Row>
<Col xs='auto'><Button ... /></Col>
<Col xs='auto'><Button ... /></Col>
<Col xs='auto'><Button ... /></Col>
<Col xs='auto'><Button ... /></Col>
<Col xs='auto'><Button ... /></Col>
<Col xs='auto'><Button ... /></Col>
<Col xs='auto'><Button ... /></Col>
<Col xs='auto'><Button ... /></Col>
<Col xs='auto'><Button ... /></Col>
</Row>
</Container>
Or if you're only using css:
<div className='container'>
<div className='row'>
<div className='col'><Button ... /></div>
<div className='col'><Button ... /></div>
<div className='col'><Button ... /></div>
<div className='col'><Button ... /></div>
</div>
</div>
i have to create an autocomplete react component. Initially there must be 5 autocomplete fields. I set a state as an array of 5 input elements like
this.state {activities : ['','','','','']}
i apply a map function over these to display 5 autocomplete boxes.
I have a list of values to be listed as options of autocomplete.
Row>
{this.state.activities.map((newrow,index)=>{
return (
<Col md={12}>
<Row className="form-row">
<Col md={11} sm={10} xs={9}>
<div className="form-input">
<AutoComplete
className="autosearch"
dataSource={options}
onSelect={this.onSelect.bind(this, index)}
filterOption={(inputValue, option) => option.props.children.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1} />
</div>
</Col>
<Col md={1} sm={2} xs={3}>
<Button className="delete-row" onClick={this.deleterow.bind(this,index)}><i className="fa fa-trash"></i></Button>
</Col>
</Row>
</Col>)
})
}
</Row>
now i have to create an autocomplete which also has the option to allow me add an option if it is not present in the list .
please help me out. i am new to react and thanks in advance.
This is the website i referred for the autocomplete boxenter link description here
and i referred the basic example code of it
I'm looking to start styling my React app. I have previously used Bootstrap's Grid system and am now looking for the React grid system. What do React developers commonly use for their App's Grid system / Layout?
If you are targeting only modern browsers (i.e. those with flexbox support) you may want to investigate react-flexbox-grid which offers a set of React components that implement the usual grid concepts like Row and Column. I've used in successfully in a couple of projects.
This option avoids the need to pull in a whole UI library and only use the grid portions.
I have just used bootstrap, either styling directly with bootstrap css or via this react-bootstrap library.
I'm not sure what you mean by React Grid system as it's always CSS grid system. However in my projects I am using react-bootstrap library and I'm guessing it is something you are looking for. The only caveat is that you have to include bootstrap css file (for example from c.d.n.), other than that its working really fine and has great documentation.
P.S. If you would like to only use Grid system, you would then have to find css with bootstrap Grid only, and then import only Grid components from library - Grid, Row and Col.
I used bootstraps grid system for a long time, but after a while I got tired of adding a bunch of classes and it started to make my HTML unreadable. I would suggest using flexbox. It's a great replacement and is becoming the standard for responsive designs. It's also supported by all major browsers which is nice.
Take a look at fluid-react I built. It doesn't need extra CSS.
<Container>
<Row>
<Col xs="12" sm="6" md="4" lg="3" xl="2">1</Col>
<Col xs="12" sm="6" md="4" lg="3" xl="2">2</Col>
<Col xs="12" sm="6" md="4" lg="3" xl="2">3</Col>
<Col xs="12" sm="6" md="4" lg="3" xl="2">4</Col>
<Col xs="12" sm="6" md="4" lg="3" xl="2">5</Col>
<Col xs="12" sm="6" md="4" lg="3" xl="2">6</Col>
<Col xs="12" sm="6" md="4" lg="3" xl="2">7</Col>
<Col xs="12" sm="6" md="4" lg="3" xl="2">8</Col>
<Col xs="12" sm="6" md="4" lg="3" xl="2">9</Col>
<Col xs="12" sm="6" md="4" lg="3" xl="2">10</Col>
<Col xs="12" sm="6" md="4" lg="3" xl="2">11</Col>
<Col xs="12" sm="6" md="4" lg="3" xl="2">12</Col>
</Row>
</Container>