<body class="dark-mode with-custom-webkit-scrollbars with-custom-css-scrollbars" data-sidebar-shortcut-enabled="true" data-dm-shortcut-enabled="true">
<div class="page-wrapper">
<!-- Content wrapper -->
<div class="content-wrapper">
<div class="hoge">
<button class="btn" type="button">Default</button>
<button class="btn btn-primary" type="button">Primary</button>
<button class="btn btn-danger" type="button">Danger</button>
</div>
<div class="hoge">
<table class="table">
<thead>
<tr>
<th>#</th>
<th>First</th>
<th>Last</th>
<th class="text-right">Age</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>John</td>
<td>Doe</td>
<td class="text-right">25</td>
</tr>
<tr>
<th>2</th>
<td>Jane</td>
<td>Violet</td>
<td class="text-right">27</td>
</tr>
<tr>
<th>3</th>
<td>Jack</td>
<td>Gates</td>
<td class="text-right">33</td>
</tr>
</tbody>
</table>
</div>
<div class="hoge">
<form action="..." method="..." class="w-400 mw-full">
<!-- w-400 = width: 40rem (400px), mw-full = max-width: 100% -->
<!-- Input -->
<div class="form-group">
<label for="full-name" class="required">Full name</label>
<input type="text" class="form-control" id="full-name" placeholder="Full name" required="required">
</div>
<!-- Radio -->
<div class="form-group">
<label for="gender-male" class="required">Gender</label>
<div class="custom-radio">
<input type="radio" name="gender" id="gender-male" value="male" required="required">
<label for="gender-male">Male</label>
</div>
<div class="custom-radio">
<input type="radio" name="gender" id="gender-female" value="female" required="required">
<label for="gender-female">Female</label>
</div>
<div class="custom-radio">
<input type="radio" name="gender" id="gender-other" value="other" required="required">
<label for="gender-other">Other</label>
</div>
</div>
<!-- Select -->
<div class="form-group">
<label for="area-of-specialization" class="required">Area of specialization</label>
<select class="form-control" id="area-of-specialization" required="required">
<option value="" selected="selected" disabled="disabled">Select your area of specialization</option>
<option value="front-end">Front-end</option>
<option value="back-end">Back-end</option>
<option value="full-stack">Full-stack</option>
</select>
</div>
</div>
<div class="hoge">
<nav aria-label="Breadcrumb navigation example">
<ul class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Docs</a></li>
<li class="breadcrumb-item active" aria-current="page"><a href="#">Breadcrumb</a></li>
</ul>
</nav>
</div>
<div class="hoge">
<div class="custom-switch">
<input type="checkbox" id="switch-1" value="">
<label for="switch-1">Switch 1</label>
</div>
</div>
<div class="hoge"><button class="btn" data-toggle="tooltip" data-title="Default tooltip" type="button">
Default
</button>
<button class="btn" data-toggle="tooltip" data-title="Top tooltip" data-placement="top" type="button">
Top
</button>
<button class="btn" data-toggle="tooltip" data-title="Right tooltip" data-placement="right" type="button">
Right
</button>
<button class="btn" data-toggle="tooltip" data-title="Bottom tooltip" data-placement="bottom" type="button">
Bottom
</button>
<button class="btn" data-toggle="tooltip" data-title="Left tooltip" data-placement="left" type="button">
Left
</button></div>
</div>
</div>
</body>
