You are viewing version 3 of the library, the latest version is
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#centralModallg">Large Modal

<div class="modal fade" id="centralModallg" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <p class="modal-title w-100" id="myModalLabel">Title</p>
                <button type="button" class="close" data-dismiss="modal" aria-label="Sluiten">
                    <i class="mdi mdi-close" aria-hidden="true"></i>
            <div class="modal-body">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec metus et turpis fermentum molestie. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec neque risus, ornare vitae ante nec,
                    sodales lobortis neque. Nam odio nisi, volutpat vel quam at, tristique dictum velit. Vivamus eu nisi nisi. Fusce efficitur, ipsum sed gravida luctus, velit justo congue tellus, efficitur euismod sapien massa sit amet orci. Mauris rhoncus
                    ornare lectus, sed imperdiet leo placerat eu. Proin vitae mattis ipsum. Aenean leo augue, fermentum sollicitudin purus ac, maximus efficitur justo.</p>
            <div class="modal-footer">

                <button type="button" class="btn btn-secondary">
                        Button label

                <button type="button" class="btn btn-primary" data-dismiss="modal">

Based on the version from MDB:


No additional actions, aside from the markup, are needed to use this component.


  • MDB defines various predefined modals, yet Nijmegen only needed 3 of the “central modal” type therefor the library supports small, medium and large
  • The modal title in this component is rendered via a paragraph element, since it’s unknown in advance what the implementors document heading level structure would be, it’s not advisable to define a specific heading element (H1 - H6) in this component.
  • However*, the component has been structured to work with every heading (H1 - H6) level as modal title, so you are free to use which heading level suits your use-case.