作業が捗る!必殺Bootstrapクラス一覧!!

#技術系
written by 銀太

どうもです!銀太です!

趣味がプロバスケットボールリーグのNBA観戦なのですが、最近シリーズが開幕したので最高に気分が上がってます!
我等が男子バスケボール日本代表八村塁もNBAのリーグで奮闘してますので、
皆さん良ければ応援して下さい!

さて余談は置いといて前回Bootstrapに関する記事「Bootstrapを簡単に説明してみる!導入方法、使い方など!」を
書いたので今回はBootstarpの便利なクラスをご紹介してこうと思います!

text-align テキストの左・中央寄せ・右寄せ

<div class="container>
 <h1 class="text-left">左寄せ</h1>
 <h1 class="text-center">中央寄せ</h1>
 <h1 class="text-right">右寄せ</h1>
</div>

上記のコードのようにクラスを指定してもらえれば下記の写真のようにcssの指定なくテキストが寄ってくれます!!

text-leftクラスで左寄せ、text-centerクラスで中央寄せ、text-rightクラスで右寄せになります!

コンテンツの中央寄せ

<div class="container">
 <div class="mx-auto" style="width: 200px; backgroud-color: #eee;">
  <h1>中央寄せ</h1>
 </div>
</div>

上記のコードのように”mx-auto“クラスを指定してもらえれば下記の写真のようにcssの指定なくコンテンツが寄ってくれます!!

これでコンテンツを中央に寄せることが出来ます!!

width 横幅

<div class="container">
 <div class="w-25 p-3" style="background-color: #eee;">Width 25%</div>
 <div class="w-50 p-3" style="background-color: #eee;">Width 50%</div>
 <div class="w-75 p-3" style="background-color: #eee;">Width 75%</div>
 <div class="w-100 p-3" style="background-color: #eee;">Width 100%</div>
</div>

上記のコードのようにクラスを指定してもらえれば下記の写真のようにcssの指定なく横幅が指定出来ます!!

w-25でwidth25%、w-50でwidth50%、w-75でwidth75%、w-100でwidth100%の指定が出来ます!

height 高さ

<div class="container">
 <div class="h-25 d-inline-block" style="width: 120px background-color: rgba(0,0,255,.1)">Height 25%</div>
 <div class="h-50 d-inline-block" style="width: 120px background-color: rgba(0,0,255,.1)">Height 50%</div>
 <div class="h-75 d-inline-block" style="width: 120px background-color: rgba(0,0,255,.1)">Height 75%</div>
 <div class="h-100 d-inline-block" style="width: 120px background-color: rgba(0,0,255,.1)">Height 100%</div>
</div>

上記のコードのようにクラスを指定してもらえれば下記の写真のようにcssの指定なく縦幅が指定出来ます!!

h-25でheight25%、h-50でheight50%、h-75でheight75%、h-100でheight100%の指定が出来ます!

終わりに

今回はBootstrapのクラスを簡単に紹介させてもらいました!!

クラスを指定するだけなのでかなり簡単にcssの指定が出来るのでかなり作業が捗るかと思います!

他にも沢山Bootstrapのクラスがあるのでまた記事に出来ればと思っています!

それでは皆さん良い1日を!!