CODEWITHSUNDEEP
htmlcsstwitter-bootstrapbootstrap-modal
Azima
Azima

Reputation: 4141

Add two modal-content inside bootstrap modal

I am trying to add two modal-content divs inside a single modal.

<div class="modal fade" id="user_manage_modal" data-keyboard="false" data-backdrop="static">
    <div class="modal-dialog">
         <!-- Assign Users -->
             <div class="modal-content">...</div>
         <hr>
         <!-- UnAssign Users -->
             <div class="modal-content">...</div>
    </div>
</div>

It looks all great but I wanted to add a horizontal line between two modal-content divs.

And the output looks like this: modal-img

I have added no extra css for this.

Expected just a simple horizontal line in between:

enter image description here Is it because multiple modal-contents are not allowed inside a bootstrap modal?

Upvotes: 1

Views: 293

Answers (1)

Codebreaker007
Codebreaker007

Reputation: 2989

You will have todo all your styling (as you did not give the rest of the code) inside the modal-content 

<div class="modal fade" id="user_manage_modal" data-keyboard="false" data-backdrop="static">
   <div class="modal-dialog">
        <div class="modal-content">
            <!-- Assign Users -->
           <hr>
          <!-- UnAssign Users -->
      </div>
  </div>

Since you only gave a fragment be aware of the following structure = sequence in bootstrap modal

<div class="modal fade" id="Modal-demo" tabindex="-1" role="dialog">
  <div class="modal-dialog" >
    <div class="modal-content"> 
      <div class="modal-header"> optional
      <div class="modal-body"> 
      <div class="modal-footer"> optional

As this classes (and the js code attached) have to be in the sequence (and are expected by the js-code to be single applied per modal) you have two choices for "special purposes"

  • Do all formating, button attaching in the

    <div class="modal-body">

  • or copy the needed css into a new class like 

    <div class="my-modal-content">

    removing all unwanted effects and loosing the js-function based on that (if of course there are some attached or use the class description)

Upvotes: 1

Related Questions