Bootstrap Modal Dialog. Can the grid system be used within a modal context?

Question

I have a Bootstrap modal dialog for which I want to layout the various labels and inputs. I have tried using row/column classes but they do not appear to do anything. What are my options here?

Thanks,
Doug

score 56 · Accepted Answer · edited Nov 17 '15 at 10:55

56

I got it working ok...http://www.bootply.com/WAwE3QyUdb

Add a col to the container inside the modal-body.

<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <h3>Modal header</h3>
        </div>

        <div class="modal-body">
            <div class="container col-md-12">
                <div class="row">
                    <div class="col-md-3">
                        1st col 3
                    </div>

                     <div class="col-md-3">
                         2nd col 3
                     </div>

                     <div class="col-md-3">
                         3rd col 3</div>
                     </div>
                 </div>
             </div>
         </div>
    </div>
</div>

edited Nov 17 '15 at 10:55

JanS

1,953
3
22
25

answered Jun 13 '14 at 13:03

Tom Rudge

3,023
5
41
72

3

Brilliant! Cheers Tom. – dugla Jun 14 '14 at 13:47
8

I've found the row class works better than the container class - see here for more details: http://stackoverflow.com/a/19615212/13153 – Jonathan Sayce Oct 20 '14 at 17:35
Could you please update the bootply link? It's broken. Thanks! – grdevphl Jun 11 '15 at 17:35
@grdev76 Thanks for letting me know. Updated – Tom Rudge Jun 11 '15 at 20:22
1

@TomRudge the structure is container, row, column so the above will fail bootlint E014: https://github.com/twbs/bootlint/wiki/E014. Additionally, container must be a parent to row so having container as a sibling is also incorrect according to rule E003: https://github.com/twbs/bootlint/wiki/E003. – Matt Dell Dec 22 '15 at 19:06
this seems to mess with the margin between the body and the bottom part of the modal. Anyone know a solution? – rigdonmr Feb 19 '16 at 02:27
@rigdonmr see my answer below; use container-fluid instead of adding on col-md-12 – mejdev Mar 04 '16 at 14:07
Please note... the version of bootply has since updated its vanilla bootstrap version. Therefore things has changed with my original bootply. The solution at the time worked for the right purpose. Nearly 2 years on it may be different and should only be used as a reference - therefore please keep this in mind before you comment. – Tom Rudge Mar 04 '16 at 15:59

score 13 · Answer 2 · answered Feb 07 '15 at 14:44

13

Just add the row class to your modal as per the code below and then you can divide up your modal as you wish:

<div class="modal-body row">
  <div class="col-md-8">
    <p>Column One content here ... </p>
  </div>
  <div class="col-md-4">
    <p>Column Two content here ... </p>
  </div>
</div>

answered Feb 07 '15 at 14:44

dmeehan

2,164
2
21
28

3

`.row` must be inside a `.container`/`.container-fluid` – Ivanka Todorova Jan 13 '16 at 14:04

score 7 · Answer 3 · answered Mar 04 '16 at 02:41

Tom Rudge's answer inspired me. You don't need to make the container also be a full-width column itself which Matt Dell pointed out will fail linters.

Make the container container-fluid instead!

bootply showing col-md-12 and container-fluid side by side

<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <h3>Modal with container fluid</h3>
        </div>
        <div class="modal-body">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-3">
                        <p>
                            1st col 3
                        </p>
                    </div>
                    <div class="col-md-3">
                        <p>
                            2nd col 3
                        </p>
                    </div>
                    <div class="col-md-3">
                        <p>
                            3rd col 3
                        </p>
                    </div>
                    <div class="col-md-3">
                        <p>
                            4th col 3
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <button class="btn" data-dismiss="modal">Close</button>
        </div>
    </div>
</div>

score 4 · Answer 4 · answered May 02 '16 at 05:34

have a look bootstrap example no need to add container or container-fluid or col-* classes with modal-body or inside modal-body

<div class="modal-body">
  <div class="row">
    <div class="col-md-3">
      <p>1st col 3</p>
    </div>
    <div class="col-md-3">
      <p>2nd col 3</p>
    </div>
    <div class="col-md-3">
      <p>3rd col 3</p>
    </div>
    <div class="col-md-3">
      <p>4th col 3</p>
    </div>
  </div>
</div>

see here

Perfect, no need a lot of classes! – daniel souza Dec 12 '17 at 01:55 — daniel souza, Dec 12 '17 at 01:55

score 3 · Answer 5 · answered Sep 21 '16 at 02:11

From the docs

<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="gridSystemModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-md-4">.col-md-4</div>
          <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
        </div>
        <div class="row">
          <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
          <div class="col-md-2 col-md-offset-4">.col-md-2 .col-md-offset-4</div>
        </div>
        <div class="row">
          <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
        </div>
        <div class="row">
          <div class="col-sm-9">
            Level 1: .col-sm-9
            <div class="row">
              <div class="col-xs-8 col-sm-6">
                Level 2: .col-xs-8 .col-sm-6
              </div>
              <div class="col-xs-4 col-sm-6">
                Level 2: .col-xs-4 .col-sm-6
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

http://getbootstrap.com/javascript/#modals-grid-system

score 0 · Answer 6 · answered Jun 26 '15 at 17:05

You can make the Bootstrap modal responsive by resetting the container widths:

.modal-body {padding: 5px}

.modal-dialog {
@media(min-width: $screen-sm-min){
  width: 600px;
  .container {
    width: 590px;
  }
}

@media(min-width: $screen-md-min){
  width: 800px;
  .container {
    width: 790px;
  }
}

@media(min-width: $screen-lg-min){
  width: 1000px;
  .container {
    width: 990px;
  }
}
}

score 0 · Answer 7 · edited Dec 18 '18 at 13:38

For Bootstrap 4 you can create a modal container with SCSS.

The .modal-container class should be added to the .modal-dialog

Variables:

$modal-container-max-widths: (
  xs: 90%,
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1200px,
);

Coding:

@mixin make-modal-max-widths-container-width($max-widths: $modal-container-max-widths, $breakpoints: $grid-breakpoints) {
  @each $breakpoint, $modal-container-max-width in $max-widths {
    @include media-breakpoint-up($breakpoint, $breakpoints) {
        max-width: $modal-container-max-width;
    }
  }
}
.modal-container{
   @include make-modal-max-widths-container-width();
}

Some additional CSS is recommended.

.modal-container{
  margin-left: auto;
  margin-right: auto;
  padding-left: ($spacer / 2);
  padding-right: ($spacer / 2);
}

Bootstrap Modal Dialog. Can the grid system be used within a modal context?

7 Answers7

Linked

Related