Bootstrap Components - Argon Dashboard
Discover 7 Bootstrap Components available in Argon Dashboard
Dropdown
Component from
Argon Dashboard
Builder
<div class="dropdown draggable">
<button class="btn btn-dark dropdown-toggle mr-0" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>Button
Input
Component from
Argon Dashboard
Builder
<input class="form-control draggable" placeholder="Input" draggable="true">Input Group
Component from
Argon Dashboard
Builder
<div class="form-group draggable">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">@</span>
</div>
<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>
</div>Progress
Component from
Argon Dashboard
Builder
<div class="progress-wrapper draggable">
<div class="progress-info">
<div class="progress-label">
<span>Task completed</span>
</div>
<div class="progress-percentage">
<span>60%</span>
</div>
</div>
<div class="progress">
<div class="progress-bar bg-default" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"></div>
</div>
</div>Pagination
Component from
Argon Dashboard
Builder
<nav aria-label="..." class="draggable">
<ul class="pagination">
<li class="page-item">
<a class="page-link" href="#" tabindex="-1">
<i class="fa fa-angle-left"></i>
<span class="sr-only">Previous</span>
</a>
</li>
<li class="page-item active"><a class="page-link" href="#">1</a></li>
<li class="page-item">
<a class="page-link" href="#">2 <span class="sr-only">(current)</span></a>
</li>
<li class="page-item">
<a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#">
<i class="fa fa-angle-right"></i>
<span class="sr-only">Next</span>
</a>
</li>
</ul>
</nav>Modal
Component from
Argon Dashboard
Builder
<button type="button" class="btn btn-primary draggable" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>