CODEWITHSUNDEEP
htmlcssbootstrap-modal
Mukesh Mande
Mukesh Mande

Reputation: 54

How can I make social media images to center of modal-dialog?

Below is my code for login dialog.

<div class="modal fade" id="loginModal" tabindex="-1" role="dialog"
    aria-labelledby="loginModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="dialog">
        <div class="modal-content">
            <div class="modal-header text-center">
            <button type="button" class="close" data-dismiss="modal"
                    aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h2 class="modal-title" id="loginModalLabel">Log In or Sign Up</h2>
            </div>
            <div class="modal-body text-center">
                <div class="row">
                    <form class="form-inline">

                        <div class="form-group col-md-3">
                            <img alt="Facebook" class="img-soc"
                                src="./images/facebookPage.png">
                        </div>
                        <div class="form-group col-md-3">
                            <img alt="Google+ " class="img-soc"
                                src="./images/googlePlusPage.png">
                        </div>
                        <div class="form-group col-md-3">
                            <img alt="Twitter" class="img-soc"
                                src="./images/twitterPage.png">
                        </div>
                    </form>
                </div>

                <div class="row">
                    <form class="col-md-12">
                        <div class="form-group">
                            <div class="input-group">
                                <span class="input-group-addon" id="basic-addon1"><span
                                    class="glyphicon glyphicon-user"></span></span> <input type="text"
                                    class="form-control" placeholder="Username"
                                    aria-describedby="basic-addon1">
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="input-group">
                                <span class="input-group-addon" id="basic-addon1"><span
                                    class="glyphicon glyphicon-lock"></span></span> <input type="text"
                                    class="form-control" placeholder="Username"
                                    aria-describedby="basic-addon1">
                            </div>
                        </div>
                    </form>
                </div>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-primary">Login</button>
                <button type="button" class="btn btn-secondary">Sign Up</button>
            </div>
        </div>
    </div>
</div>

Screenshot of login dialog

Screenshot of login dialog

How to make social media images to center of dialog? And How to change size of modal?

I don't want to give custom margin and want to do it using bootstrap classes. Please help

Thanks in advance!

Upvotes: 0

Views: 117

Answers (2)

JideLambo
JideLambo

Reputation: 91

.form-inline {
   display: flex;
   justify-contents: center;
   align-items: center;
}

This should center your social media images.

form.col-md-12 {
   padding: 10px;
}

this should give your form input breathing space from the container's border.``

Upvotes: 0

Rasmus Lauridsen
Rasmus Lauridsen

Reputation: 133

If not already done, you should center the images.

.img-soc {
margin-right: auto;
margin-left: auto;
}

I think that would solve your issue. Else you should make an offset in bootstrap.

Upvotes: 1

Related Questions