TojiTech No Programming, No Life.

Bootstrap(v4)でScssの機能を使用して角丸を無くしたりする設定

自前で、Bootstrapの設定を上書きすることがあったりすると思います。

それは、もしかすると、Scssの設定で変更できるかも知りません。

例えば、角丸をすべて無効化したい時

$enable-rounded: false;

リンクの色をすべて黒にしたい時

$link-color: #000;
$link-color-hover: #000;

基本的に、Bootstrapっぽさというのは、以外にも角丸やデフォルトのカラーリングだったりします。カラーリングも変更できますが、上記の2つだけでもBootstrapっぽさは、なくなるはず。

基本的には、ボタンは別で自分で装飾したりしてBootstrapは、Grid SystemやSpacingなどの活用に留めることが多いです。

Profile

Yuki Tojima

RubyやPhp、JavaScriptまわりのことを徒然と記録に残す技術ブログです。

至らぬところもあると思いますが、見守っていただけると幸いです。

記事のリクエストや、間違いなどありましたら X (旧 Twitter) のDMなどでお気軽にご連絡ください。

ytojima @TojiTech
プロフィール画像