CODEWITHSUNDEEP
javascriptcssreactjsbootstrap-4
klaurtar
klaurtar

Reputation: 253

How to make images fit the page in React/Bootstrap?

I am using a function that maps every item in the props array to creating an image tag. I am trying to make every 3 images have a row div around them using bootstrap so they will fit the page correctly, but I cannot figure out how to do it. Any help would be appreciated. Here is the code:

import React, { Component } from 'react';
import "./Skills.css";

export default class Skills extends Component {
    static defaultProps = {
        images: [
            "https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/1200px-HTML5_logo_and_wordmark.svg.png",
            "https://upload.wikimedia.org/wikipedia/commons/thumb/d/d5/CSS3_logo_and_wordmark.svg/1200px-CSS3_logo_and_wordmark.svg.png",
            "https://upload.wikimedia.org/wikipedia/commons/6/6a/JavaScript-logo.png",
            "https://p7.hiclipart.com/preview/306/37/167/node-js-javascript-web-application-express-js-computer-software-others.jpg",
            "https://bs-uploads.toptal.io/blackfish-uploads/skill_page/content/logo_file/logo/5982/express_js-161052138fa79136c0474521906b55e2.png",
            "https://webassets.mongodb.com/_com_assets/cms/mongodb_logo1-76twgcu2dm.png",
            "https://www.pngfind.com/pngs/m/430-4309307_react-js-transparent-logo-hd-png-download.png",
            "https://botw-pd.s3.amazonaws.com/styles/logo-thumbnail/s3/012015/bootstrap.png?itok=GTbtFeUj",
            "https://sass-lang.com/assets/img/styleguide/color-1c4aab2b.png"
            ]
        }
        photo() {
            return (
                <div >
                    {this.props.images.map(image => (
                        <div className="col-md-4">
                            <img className="photo" src={image} />
                        </div>
                    ))}
                </div>
            );

        }


    render() {
        return (
            <div id="skills-background" className="mt-5">
                <div id="skills-heading" className="text-center">Skills I've Learned:</div>
                <div className="container">
                    <div className="row">
                            {this.photo()}
                    </div>
                </div>
            </div>
        )
    }
}

CodeSandbox

Upvotes: 0

Views: 1436

Answers (1)

ravibagul91
ravibagul91

Reputation: 20755

I think, I found the issue,

<div>  <-----This div is the issue
    {this.props.images.map(image => (
        <div className="col-md-4">
            <img className="photo" src={image} />
        </div>
    ))}
</div>

You have wrapped your col-md-4 with a div, and div has display: block style, so you are getting every image on separate row. Simply replace div with Fragments, 

<>  <-----Make it Fragment
    {this.props.images.map(image => (
        <div className="col-md-4">
            <img className="photo" src={image} />
        </div>
    ))}
</>

Upvotes: 2

Related Questions