CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrap
Andrey Langovoy
Andrey Langovoy

Reputation: 795

Using nested columns inside a modal window in Bootstrap

I have a modal window. Inside this window I have two columns. One columns contain a list of checkboxes. Another column contains a picture and some text. In the right column (with the picture and text) I want to use nested columns (like it is shown in the BS documentation http://getbootstrap.com/css/#grid-nesting) to have the picture and the text be placed on one line. Now, they are stacked. May be the reason is the width of the modal window? Because html code is like in documentation. However it doesn't work.

enter image description here

I need something like this:

enter image description here

May be it is needed to make the modal window a little wider ?

The code is:

 <!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">Sed at dignissim mauris?</h4>
            </div>
            <div class="modal-body">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-lg-6">
                            <div class="checkbox">
                                <label>
                                    <input type="checkbox"> Suspendisse in cursus leo, a
                                </label>
                            </div>
                            <div class="checkbox">
                                <label>
                                    <input type="checkbox">Sed ligula elit, lacinia eget pretium
                                </label>
                            </div>
                            <div class="checkbox">
                                <label>
                                    <input type="checkbox"> Phasellus fermentum fringilla orci
                                </label>
                            </div>
                            <div class="checkbox">
                                <label>
                                    <input type="checkbox">  Mauris interdum, sem non
                                </label>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="row">
                                <div class="col-lg-4">
                                    <img src="Images/testimage.png" />
                                </div>
                                <div class="col-lg-9">
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                                    Ut lobortis arcu sit amet commodo suscipit. Nulla fringilla velit erat,
                                    eget tristique elit ultrices eget. Sed cursus nunc in pretium scelerisque.
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

I fixed columns issue and now Have a problem with modal window width enter image description here

How can I wix it?

Upvotes: 0

Views: 1810

Answers (1)

DanV
DanV

Reputation: 3240

I'm presuming you're using a 12 column grid, so your columns should add up to no more than 12, even when nesting. If you look you're using 'col-lg-4' and 'col-lg-9' which totals 13. Reduce one of these by 1 and it should work.

Upvotes: 1

Related Questions