3 Replies - 258 Views - Last Post: 01 December 2019 - 10:21 PM

#1 Pogaca   User is offline

  • D.I.C Head

Reputation: 7
  • View blog
  • Posts: 142
  • Joined: 24-August 13

Modal Bootstrap

Posted 03 November 2019 - 05:38 AM

Greetings,

I want to use bootstrap in order to create modal with this conditions:

1. Header must be shorter than container itself. We have content, footer and header. But I want header to be shorter.
2. In content I would like to have forms (3) and and by pressing next and next new form will show and previous will disappear.
3. At the bottom there will be dots that represent what form is activated.

I just don't know how to do it. Any hints?

Is This A Good Question/Topic? 0
  • +

Replies To: Modal Bootstrap

#2 andrewsw   User is offline

  • never lube your breaks
  • member icon

Reputation: 6823
  • View blog
  • Posts: 28,274
  • Joined: 12-December 12

Re: Modal Bootstrap

Posted 04 November 2019 - 03:17 AM

What have you thought about or considered?

As a first step you could write down some steps to achieve your aims or, at least, decide which task you should tackle first.
Was This Post Helpful? 0
  • +
  • -

#3 ikhlas_06   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 12
  • Joined: 21-June 18

Re: Modal Bootstrap

Posted 29 November 2019 - 08:39 AM

try this

https://getbootstrap...mponents/modal/


<div class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary">Save changes</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

Was This Post Helpful? 0
  • +
  • -

#4 ishan.shah   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 28-March 19

Re: Modal Bootstrap

Posted 01 December 2019 - 10:21 PM

Hi,
You can use the data-toggle property and data-target property to load different elements and you have to give the same id in data-target property to load those particular elements. give value = modal to data-toggle property. The following is the example code for the same.

Code of button
   <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#page2">Next</button>



Code of modal content
   <div class="modal fade" id="page2" tabindex="-1" role="dialog"></div>


Was This Post Helpful? 0
  • +
  • -

Page 1 of 1