Bootstrap Grid System not working as expected in modal

Question

I have a simple modal that I want to use to display content in. As shown below:

<div id="tacModal" class="modal fade" role="dialog">
    <div class="modal-dialog modal-lg">

        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">title</h4>
            </div>
            <div class="modal-body">
                <div class="container col-md-12" >
                    <div class="row">
                        <div class="col-md-2">
                            <img src="path/to/image" >
                        </div>
                        <div class="col-lg-10">
                            &nbsp;
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            &nbsp;
                        </div>
                    </div>
                    </div>
                </div>



            <div class="modal-footer">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
        </div>    
    </div>
    </div>

The problem I face is that the content is placed in the footer when the screen size reaches a certain threshold.

On mobile and even tablet sized screens all the content is placed correctly in the modal-body. But on my desktop screen the content is placed inside the footer.

Why is this, and how can I fix it?

Answer 1

Remove .col-md-12 class from .container . Its bad idea to mix .container with Bootstrap's grid classes ( .col-*-* ).

Why it's creating a problem?

If you look at css of Bootstrap, you will find:

.container {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

@media (min-width: 992px) {
    .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9 {
        float: left;
    }
}

.container is styled to remain in center of page. But on screens of 992px and above your .container is floating to the left and creating layout issue. This float is causing element after your .container to take space on right side of .container if possible and you see strange behavior.