Bootstrap4 よく使うコンポーネント

■テーブル形式

・罫線

<table class="table-borderd">
</table>

 
 

・ストライプ

<table class="table-striped">
</table>

 
 

・ホバー

<table class="table-hover">
</table>

 
 

・罫線、ストライプ、ホバー

<table class="table table-bordered table-striped table-hover">
</table>

 
 

---

■フォーム

・テキストボックス

<form>
    <div class="form-group">
        <input type="text" class="form-control">
    </div>
</form>

 
 

・チェックボックス

<form>
    <div class="form-check">
        <input type="checkbox" class="form-check-input">
    </div>
</form>

 
 

・ラジオボタン

<form>
    <div class="form-check">
        <input type="radio" class="form-check-input">
    </div>
</form>

 
 

・チェックボックス、ラジオボタン（横並び）

<form>
    <div class="form-check form-check-inline">
        <input type="checkbox" class="form-check-input">1
        <input type="checkbox" class="form-check-input">2
    </div>
    <div class="form-check form-check-inline">
        <input type="radio" class="form-check-input">1
        <input type="radio" class="form-check-input">2
    </div>
</form>

 
 

・ラベル

<form>
    <div class="form-group">
        <label class="col-form-label">ラベル</label>
    </div>
</form>

 
 

---