Note: The planet UI design system is an extension of the bootstrap framework.
Please also referer to the bootstrap documentation for best pratices while using the framework.
Modals
Basic modal view
<div class="modal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title text-dark">
Popup
</h3>
<span data-dismiss="modal" class="modal-close-btn">
<i class="fa fa-lg function-close"></i>
</span>
</div>
<div class="modal-body">
<div class="row">
<div class="col-12 col-md-6">
<p>Instructions</p>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-secondary text-primary border me-auto shadow-sm" data-dismiss="modal"><i class="fa fa-lg function-cancel"></i> Cancel</button>
<button type="button" class="btn btn-primary shadow-sm"><i class="fa fa-lg function-save"></i> Save</button>
</div>
</div>
</div>
</div>Modal view with layout
<div class="modal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title text-dark">
Address
</h3>
<span data-dismiss="modal" class="modal-close-btn">
<i class="fa fa-lg function-close"></i>
</span>
</div>
<div class="modal-body">
<div class="row">
<div class="col-12 col-md-6">
<label class="form-label small">Country</label>
<select class="form-control">
<option>Country 1</option>
<option>Country 2</option>
</select>
</div>
</div>
<div class="row">
<div class="col-12 col-md-6">
<label class="form-label small">Address line 1</label>
<input type="text" class="form-control" />
</div>
<div class="col-12 col-md-6">
<label class="form-label small">City</label>
<input type="text" class="form-control" />
</div>
</div>
<div class="row">
<div class="col-12 col-md-6">
<label class="form-label small">Address line 2</label>
<input type="text" class="form-control" />
</div>
<div class="col-12 col-md-6">
<label class="form-label small">Region / District / Emirate</label>
<input type="text" class="form-control" />
</div>
</div>
<div class="row">
<div class="col-12 col-md-6">
<label class="form-label small">Address line 3</label>
<input type="text" class="form-control" />
</div>
<div class="col-6 col-md-3">
<label class="form-label small">Zip/Post code</label>
<input type="text" class="form-control" />
</div>
</div>
<div class="row">
<div class="col-6 col-md-2">
<label class="form-label small">Latitude</label>
<input type="text" class="form-control" />
</div>
<div class="col-6 col-md-2">
<label class="form-label small">Lognitude</label>
<input type="text" class="form-control" />
</div>
</div>
<div class="row">
<div class="col-12">
<label class="form-label small">Description</label>
<textarea type="text" class="form-control"></textarea>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-secondary text-primary border me-auto shadow-sm" data-dismiss="modal"><i class="fa fa-lg align-middle function-cancel"></i> Cancel</button>
<button type="button" class="btn btn-primary shadow-sm"><i class="fa fa-lg align-middle function-save"></i> Save</button>
</div>
</div>
</div>
</div>Modal with scroll pane
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Donec enim diam vulputate ut. Nec ullamcorper sit amet risus nullam eget. At augue eget arcu dictum varius duis at consectetur lorem. Fringilla est ullamcorper eget nulla facilisi. Est ullamcorper eget nulla facilisi etiam dignissim diam quis. Vulputate ut pharetra sit amet aliquam id diam maecenas. Elit ullamcorper dignissim cras tincidunt lobortis feugiat. Tincidunt praesent semper feugiat nibh. Netus et malesuada fames ac turpis egestas integer eget aliquet. Non enim praesent elementum facilisis leo vel fringilla est. Lorem ipsum dolor sit amet consectetur adipiscing. In mollis nunc sed id. Scelerisque in dictum non consectetur a erat. Cursus euismod quis viverra nibh cras pulvinar mattis nunc. Viverra justo nec ultrices dui.
<br /><br />
Nec feugiat nisl pretium fusce id velit ut tortor pretium. Nisi quis eleifend quam adipiscing vitae proin sagittis nisl rhoncus. Sit amet volutpat consequat mauris nunc. Purus semper eget duis at tellus at urna condimentum mattis. Justo laoreet sit amet cursus sit amet dictum sit. Leo vel orci porta non pulvinar neque laoreet suspendisse. Velit egestas dui id ornare arcu odio ut sem nulla. Gravida dictum fusce ut placerat orci nulla pellentesque dignissim enim. Quis lectus nulla at volutpat diam. Diam sit amet nisl suscipit adipiscing bibendum est ultricies integer. Nibh sed pulvinar proin gravida. Amet nisl suscipit adipiscing bibendum est ultricies integer quis auctor. Lectus quam id leo in. Faucibus in ornare quam viverra orci sagittis eu. Duis at tellus at urna condimentum mattis. A erat nam at lectus urna duis. Ut etiam sit amet nisl purus.
<br /><br />
Gravida quis blandit turpis cursus in hac habitasse platea. Purus ut faucibus pulvinar elementum integer enim neque volutpat. Molestie at elementum eu facilisis sed. Pulvinar neque laoreet suspendisse interdum consectetur libero id. Erat pellentesque adipiscing commodo elit. Malesuada fames ac turpis egestas sed. Fermentum iaculis eu non diam phasellus vestibulum lorem. Ante in nibh mauris cursus. Diam ut venenatis tellus in metus vulputate. Est sit amet facilisis magna etiam tempor.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>