Bootstrap image alignment in row

Admin 1
Viewed 31

I'm trying to get my images to be side-by side with bootstrap. I've tried experimenting with different grid sizes and some other things, but I can't seem to get them to stop going on top of one another. Here is the code of the relevant section

<!-- CS Section Starts -->

<div class="cs">
    <h2 id="cs">CS</h2>
    <!-- CS Images -->
    <div class="cs-images">
        <div id="container">
            <div id="row">
                <div id="col-md-4">
                    <img src="https://www.kidscodecs.com/wp-content/uploads/2014/09/notebook-teach-python.jpg" alt="" class="img-responsive" width = 150vw>
                </div>
                <div id="col-md-4">
                    <img src="https://cdn2.hubspot.net/hubfs/202339/golang.png" class="img-responsive" />
                </div>
                <div id="col-md-4">
                    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Red-black_tree_example.svg/500px-Red-black_tree_example.svg.png"
        class="img-responsive" />
                </div>
            </div>
        </div>
    </div>

Note: I'm new to HTML. I probably have a decent quantity of newbie errors here.

I will attach an image of the output below.

enter image description here

bootstrap-4
1 Answers

hi there i fixed your code

<div class="row">
    <div class="col-sm-4">
        <img src="https://www.kidscodecs.com/wp-content/uploads/2014/09/notebook-teach-python.jpg" alt="" class="img-responsive" width = 150vw>
    </div>
    <div class="col-sm-4">
        <img src="https://cdn2.hubspot.net/hubfs/202339/golang.png" class="img-responsive" />
    </div>
    <div class="col-sm-4">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Red-black_tree_example.svg/500px-Red-black_tree_example.svg.png"
        class="img-responsive" />
    </div>
</div>
you should use (col-sm) instead of (col-md) and use div class attribute instead of div id
user_122425680
Related