I allow myself to post my problem because I can't find a solution and I'm starting to pull my hair out.
I would like to make my second column the same height as my first column.
Concern is that since the content is larger than the initial size, it enlarges the parent div and therefore increases the content of the page.
I specify that I use Boostrap 5
My code:
<div className="row g-2">
<div className="col-md-5">
<div className='border border-primary border-4 bg-secondary' style={{ height: 400 + "px" }}></div>
</div>
<div className="col-md-7">
<div className='border border-primary border-4 bg-dark p-2 h-100 overflow-auto'>
<div className="bg-danger" style={{ height: 800 + "px" }}>
<span className="text-white fs-1">Hello World </span>
</div>
</div>
</div>
</div>
The problem in question
Here is what I want
Adding fixed height to parent element can be a solution. Also don't forget overflow class to parent.
<div className="row g-2 overflow-hidden" style={{ height: '400px' }}>
<div className="col-md-5">
<div
className="border border-primary border-4 bg-secondary"
style={{ height: 400 + 'px' }}
></div>
</div>
<div className="col-md-7">
<div className="border border-primary border-4 bg-dark p-2 h-100 overflow-auto">
<div className="bg-danger" style={{ height: 800 + 'px' }}>
<span className="text-white fs-1">Hello World </span>
</div>
</div>
</div>
</div>
Update:
What I'm really looking for is that column two is the same height as column one (its height will be automatic with the content).
You can achieve this by making second column relative and its child absolute. Also add top, bottom, left and right to 0
<div className="row g-2">
<div className="col-md-5">
<div
className="border border-primary border-4 bg-secondary"
style={{ height: 400 + 'px' }}
></div>
</div>
<div className="col-md-7 position-relative">
<div className="border position-absolute top-0 start-0 end-0 bottom-0 border-primary border-4 bg-dark p-2 h-100 overflow-auto">
<div className="bg-danger" style={{ height: 800 + 'px' }}>
<span className="text-white fs-1">Hello World </span>
</div>
</div>
</div>
</div>
I create react js app and use simple bootstraps 5 cards. I want to make the whole card select as radio like if male or female options and whole card checked like checkable or something we identify selected card.
<div class="card" style="width:400px">
<img class="card-img-top" src="" alt="Card image" style="width:100%">
<div class="card-body">
<h4 class="card-title">John Doe</h4>
<p class="card-text">Some Text</p>
</div>
</div>
and normal card see below like
and after selected see border-color dark and width
and after selecting, I want the selected card id or values.
There are many ways to solve this problem. I showing you a very simple example. At first, you set a state and then use this code const [check, setcheck] = useState('');
<div class="card" style={check === 'male' ? border: '5px solid #000'} : null} onClick={() => setcheck('male')}>
<img class="card-img-top" src="" alt="Cardimage" />
<div class="card-body">
<h4 class="card-title">John Doe</h4>
<p class="card-text">Some Text</p>
</div>
</div>
<div class="card" style={check === 'female' ? {border: '5px solid #000'} : null} onClick={() => setcheck('female')} >
<img class="card-img-top" src="" alt="Cardimage" />
<div class="card-body">
<h4 class="card-title">John Doe</h4>
<p class="card-text">Some Text</p>
</div>
</div>
So I want to align the text next to the image, but here is what I get
Here is my code
<Card>
<div class='container'>
<div className='row'>
<div className='col-12 col-md-5 mt-3'>
<CardImg src={history.image} alt={history.name} />
</div>
</div>
<div className='row'>
<div className='col-12 col-md-5 mt-3'>
<CardBody>
<CardText>{history.description}</CardText>
</CardBody>
</div>
</div>
</div>
</Card>
Any ideas?
Thanks,
Theo.
Try using flex property to container!
Using CSS:
.container {
display: flex;
}
I think you are using Bootstrap, this might be helpful to you!
Flex Property Bootstrap
I have a reactJS application where I display a heading at the top of the view and then some text under the heading. I am using this code to generate the view:
render() {
return (
<div>
<div className="container">
<div className="enrollment_heading_background">
<div className="row">
<div className="col-12 text-center">
<label>Online Enrollment</label>
</div>
</div>
</div>
</div>
<div className="container">
<div className="enrollment_background">
<div className="row">
<div className="col-12 text-center text_15">
<label>Participant Agreement for OnLine Enrollment</label>
</div>
</div>
</div>
</div>
</div>
)
}
And I have the following in my style sheet:
.enrollment_heading_background {
background-color: #b3ccff;
padding-top: 5px;
padding-left: 0px;
padding-right: 0px;
}
.enrollment_background {
background-color: #ffe6b3;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
padding-right: 5px;
}
This is what is showing in the view:
If you notice, there is whitespace on the left and on the right. I have been unsuccessful in getting the blue background of the heading to occupy the entire view and I have been unsuccessful in getting the beige background to occupy the entire view.
Any suggestions would be greatly appreciated.
Try:
<div className="enrollment_heading_background">
<div className="container">
<div className="row">
<div className="col-12 text-center">
<label>Online Enrollment</label>
</div>
</div>
</div>
</div>
<div className="enrollment_background">
<div className="container">
<div className="row">
<div className="col-12 text-center text_15">
<label>Participant Agreement for OnLine Enrollment</label>
</div>
</div>
</div>
</div>
The padding from your container is causing the white space. You can still keep the container padding but bring the background divs out so they wrap both containers and keep their 100% width.
I have a bootstrap grid layout in my web app I want to align all on the same line. For example, when loading in full screen, the cards look as follows:
However, when the page is resized, the cards appear as follows
I need to make them look like the first image regardless of how the page is resized, jut not sure how to go about doing this.
Below is my code:
<div className="d-flex col-sm-6">
<div className="" style={{backgroundColor: 'white', borderRadius: 5, border: '1px solid #EAE8E8'}}>
<div className="row">
<div className="d-flex col-md-8">
<div className="row" style={{paddingTop: 20, paddingBottom: 20, paddingLeft: 40}}>
<h4>
<b>{this.props.restaurant.name}</b>
{this.props.restaurant.dietaryRestrictions.map(function(dietaryRestriction, index) {
return(<div key={index}><span className="badge-sm badge-secondary" style={{color: 'white', backgroundColor: '#DA9550', fontSize: 9}}>{dietaryRestriction}</span> </div>);
})}
</h4>
{this.props.restaurant.description}
<br /><br />
<span className="munchtime pointer"><i className="fas fa-check"></i> <b>Add to Cart</b></span><br /><br />
<b><s>${this.props.restaurant.price}</s></b> <span className="discount"><b>${this.props.restaurant.price * this.props.restaurant.restaurant.discount}</b></span>
</div>
</div>
<div className="d-flex col-md-4">
<img src={this.props.restaurant.images[0]} style={{width: '100%', height: 250, objectFit: 'cover'}} />
</div>
</div>
</div>
</div>
just divide the grid in 5 by 3 manner for all views (xs, sm, md) as container total width is 8.
media queries breakpoints : grid-media-queries
example is below with the
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex col-md-8">
<div class="" style="background-color: 'white', border-radius: 5, border: '1px solid #EAE8E8'">
<div class="row">
<div class="d-flex col-xs-5 col-sm-5 col-md-5">
<div class="row" style="padding-top: 20, padding-bottom: 20, padding-left: 40">
<h4>
<b> restaurant name</b>
<div key=1><span class="badge-sm badge-secondary" style="color: 'white', background-color: '#DA9550', font-size: 9">dietaryRestriction</span> </div>
</h4>
restaurant description
<br /><br />
<span class="munchtime pointer"><i class="fas fa-check"></i> <b>Add to Cart</b></span><br /><br />
<b><s>$2000</s></b> <span class="discount"><b>20%</b></span>
</div>
</div>
<div class="d-flex col-xs-3 col-sm-3 col-md-3">
<img src='https://picsum.photos/200/300
' style="width: '100%', height: 250, objectFit: 'cover'" />
</div>
</div>
</div>
</div>
In your code, you are using col-md-8 which will work from min-width of 992px. you can replace md with xs, so that it will work for all resolutions.
<div className="d-flex col-sm-6">
<div className="" style={{backgroundColor: 'white', borderRadius: 5, border: '1px solid #EAE8E8'}}>
<div className="row">
<div className="d-flex col-xs-8">
<div className="row" style={{paddingTop: 20, paddingBottom: 20, paddingLeft: 40}}>
<h4>
<b>{this.props.restaurant.name}</b>
{this.props.restaurant.dietaryRestrictions.map(function(dietaryRestriction, index) {
return(<div key={index}><span className="badge-sm badge-secondary" style={{color: 'white', backgroundColor: '#DA9550', fontSize: 9}}>{dietaryRestriction}</span> </div>);
})}
</h4>
{this.props.restaurant.description}
<br /><br />
<span className="munchtime pointer"><i className="fas fa-check"></i> <b>Add to Cart</b></span><br /><br />
<b><s>${this.props.restaurant.price}</s></b> <span className="discount"><b>${this.props.restaurant.price * this.props.restaurant.restaurant.discount}</b></span>
</div>
</div>
<div className="d-flex col-xs-4">
<img src={this.props.restaurant.images[0]} style={{width: '100%', height: 250, objectFit: 'cover'}} />
</div>
</div>
</div>
</div>
You should only have to adjust the "col" className so that it is always 8 and 4 on any breakpoint.