CODEWITHSUNDEEP
javascripthtmlreactjsbootstrap-5responsive-images
Tpcool
Tpcool

Reputation: 59

Responsive Images in Bootstrap 5 with Given Layout

I am trying to create a web page that has one image per section. The image should be on either side of the text when viewed on a large screen, as displayed below:

Desktop view

However, I would like for each image to stack on top of each section once viewed on a smaller screen instead of continuing to be displayed side-by-side. Below is how it should look:

enter image description here

…but given the current implementation, this is how it looks right now:

enter image description here

How should I be coding this page so the images are displayed appropriately on both desktop and on mobile? I would like for the code to be able to replicate the first image on big screens, and the second image on smaller screens. However, if this is not a smart front end design and should be approached differently, I am open to different designs, especially if they are more generally accepted.

I am using Bootstrap 5 to achieve this layout. My code below is also using Javascript/React, but that should not be much of a factor.

Below is the code used in the first and third images:

class AboutSection extends Component {
render() {
    const startImage = "float-start me-4";
    const endImage = "float-end ms-4";
    var imageClass = "img-fluid my-4 rounded w-25 " + (IsOdd(this.props.index) ? startImage : endImage);

    return (
        <>
            <section class="p-4">
                <div class="container">
                    <div class="d-sm-flex">
                        <div>
                            <img class={imageClass} src={Test} alt={this.props.imageAltText} />
                            <h2>{this.props.header}</h2>
                            <p class="lead my-3">{this.props.body}</p>
                            {this.props.subsection.map((item) => {
                                return (
                                    <AboutSubsection subheader={item.subheader} subbody={item.subbody} />
                                );
                            })}
                        </div>
                    </div>
                </div>
            </section>
        </>
    );
}

Below is the code I changed to achieve the design of the second image:

class AboutSection extends Component {
render() {
    const startImage = "float-start me-4";
    const endImage = "float-end ms-4";
    var imageClass = "img-fluid my-4 rounded " + (IsOdd(this.props.index) ? startImage : endImage);

    return (
        <>
            <section class="p-4">
                <div class="container">
                    <div class="row">
                        <img class={imageClass} src={Test} alt={this.props.imageAltText} />
                        <div class="col-12">
                            <h2>{this.props.header}</h2>
                            <p class="lead my-3">{this.props.body}</p>
                            {this.props.subsection.map((item) => {
                                return (
                                    <AboutSubsection subheader={item.subheader} subbody={item.subbody} />
                                );
                            })}
                        </div>
                    </div>
                </div>
            </section>
        </>
    );
}

Upvotes: 0

Views: 1499

Answers (1)

Mike
Mike

Reputation: 36

The correct way is not write code for every kind of page, but always use the same one. To do this, you need to use responsive CSS styles, something like:

.img-right { float: right; }

@media only screen and (max-width: 640px) {

.img-right { float: none; width: 100%; }

}

It seems to me, that your task is NOT use bootstrap to format content. Bootstrap is designed to provide you with the basic design elements that are ready-made (design skeleton), and content is your area of responsibility. I think so...

Upvotes: 1

Related Questions