BootStrap Advanced#4

Bootstrap 4 Modal

The Modal component is a dialog box/popup window that is displayed on top of the current page.

Example:

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Open modal
</button>

in the target tag specify the div you want to open in the modal.

THE MODAL SECTION:

Example:

<div class="modal" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">

      
      <div class="modal-header">
        <h4 class="modal-title">Modal Heading</h4>
        <button type="button" class="close" data-dismiss="modal">×</button>
      </div>

      
      <div class="modal-body">
        Modal body..
      </div>

      
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
      </div>

    </div>
  </div>
</div>

Add animation

Use the .fade class to add a fading effect when opening and closing the modal.

Example:

Modal Size

Change the size of the modal by adding the .modal-sm class for small modals, .modal-lg class for large modals, or .modal-xl for extra large modals.

Add the size class to the <div> element with class .modal-dialog.

Example:

Centered Modal

Center the modal vertically and horizontally within the page, with the .modal-dialog-centered class.

Example:

Scrolling Modal

When you have alot of content inside the modal, a scrollbar is added to the page. See the examples below to understand it.

Example:

Bootstrap 4 Tooltip

The Tooltip component is small pop-up box that appears when the user moves the mouse pointer over an element.

To create a tooltip, add the data-toggle="tooltip" attribute to an element.

Use the title attribute to specify the text that should be displayed inside the tooltip.

Example:

<a href="#" data-toggle="tooltip" title="Hooray!">Hover over me</a>

Positioning Tooltips

By default, the tooltip will appear on top of the element.

Use the data-placement attribute to set the position of the tooltip on top, bottom, left or the right side of the element

Example:

<a href="#" data-toggle="tooltip" data-placement="top" title="Hooray!">Hover</a>

Do the same for the bottom left and right tooltip.

Bootstrap 4 Popover

The Popover component is similar to tooltips; it is a pop-up box that appears when the user clicks on an element. The difference is that the popover can contain much more content.

To create a popover, add the data-toggle="popover" attribute to an element.

Use the title attribute to specify the header text of the popover, and use the data-content attribute to specify the text that should be displayed inside the popover's body.

Example:

<a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">Toggle popover</a>

Positioning Popovers

By default, the popover will appear on the right side of the element.

Use the data-placement attribute to set the position of the popover on top, bottom, left or the right side of the element.

Example:

<a href="#" title="Header" data-toggle="popover" data-placement="top" data-content="Content">Click</a>

Do the same for the bottom left and right.

Closing Popovers

By default, the popover is closed when you click on the element again. However, you can use the data-trigger="focus" attribute which will close the popover when clicking outside the element.

Example:

<a href="#" title="Dismissible popover" data-toggle="popover" data-trigger="focus" data-content="Click anywhere in the document to close this popover">Click me</a>

If you want the popover to be displayed when you move the mouse pointer over the element, use the data-trigger attribute with a value of "hover".

Example:

<a href="#" title="Header" data-toggle="popover" data-trigger="hover" data-content="Some content">Hover over me</a>

Search This Blog

HTML & CSS