CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
NRKirby
NRKirby

Reputation: 1634

Image in bootstrap column not rendered as expected

I am using a bootstrap theme for a personal website. In the contact section I am trying to replace a form (that comes with the theme) with an image of where I live.

The problem is that the image does not render in the centre of the page (the form does):

Here is the HTML for the form:

            <div class="row">

            <div class="col-sm-6 col-sm-offset-3">

                <form id="contact-form" role="form">
                    <div class="ajax-hidden">
                        <div class="form-group wow fadeInUp">
                            <label class="sr-only" for="c_name">Name</label>
                            <input type="text" id="c_name" class="form-control" name="c_name" placeholder="Name">
                        </div>

                        <div class="form-group wow fadeInUp" data-wow-delay=".1s">
                            <label class="sr-only" for="c_email">Email</label>
                            <input type="email" id="c_email" class="form-control" name="c_email" placeholder="E-mail">
                        </div>

                        <div class="form-group wow fadeInUp" data-wow-delay=".2s">
                            <textarea class="form-control" id="c_message" name="c_message" rows="7" placeholder="Message"></textarea>
                        </div>

                        <button type="submit" class="btn btn-lg btn-block wow fadeInUp" data-wow-delay=".3s">Send Message</button>
                    </div>
                    <div class="ajax-response"></div>
                </form>

            </div>

        </div><!-- .row -->

Form in Chrome dev tools:

Form in Chrome dev tools

Here is how my code looks:

            <div class="row">

                <div class="col-sm-6 col-sm-offset-3">
                    <img src="assets/images/staticmap2.png">
                </div>

            </div><!-- .row -->

Image in Chrome dev tools:

Image in Chrome dev tools

I have tried changing the size of the image and different offset sizes to no avail. I'm at a loss how to resolve this - can anyone help?

Upvotes: 0

Views: 177

Answers (1)

Mark Polivchuk
Mark Polivchuk

Reputation: 95

Adding the class center-block to your image will apply margin:0 auto; and should center the image in it's parent div.

<img class="center-block" src="assets/images/staticmap2.png">

Upvotes: 1

Related Questions