BootstrapというWebフレームワークを導入すれば、CSSをそこまでいじらなくてもHTML上でclass指定すれば簡単にスタイルを決めることが出来るのでとても便利です。 また、Bootstrapのグリッドレイアウトの考え方を用いることで、デバイスに応じたレスポンシブデザインもとてもやりやすいです。 今回はそのBootstrapの現時点（2020年3月）最新版の「Bootstrap 4.4.1」を導入するための設定方法を紹介します。 ちなみに公式サイトは以下になります。 Bootstrap 4の公式サイト 「Bootstrap 4」の設定方法 今回紹介するのは、HTMLのhead要素とfooter要素にコードを追加する簡単な方法です。 head要素に設定を追加 まずはHTMLのhead要素に計2行を追加します。 viewportのmetaタグ設定 ※この設定は必須ではなく、設定しなくて
Bootstrap 4 Beta 3
The Bootstrap Blog News and announcements for all things Bootstrap, including new releases, Bootstrap Themes, and Bootstrap Icons. Welcome to the final beta of v4! It’s been over two months since we shipped our second beta and we’ve been busy making the last breaking changes before moving to our next stable release, v4.0.0! We have a few more breaking changes than we were planning, but fret not, w
概要 Bootstrap 4 のソースコードをいじらずに、変数を変更してカスタマイズする方法のメモ。 Bootstrap 4を使うならSassを使って3倍幸せになろう で説明されているように、スタイルの上書きでカスタマイズするのは保守性がよろしくないので、Bootstrap4の変数を変更することで気持ちよくカスタマイズする。 また、Bootstrapのソースコードを変更すると、Bootstrapパッケージをアップデートすると変更が消えてしまうので、変更内容は分離する。 とは言え、特に難しいことをするわけではなく、これこそが公式ドキュメントで説明されている方法でもある。 下ごしらえ まず、自分のSCSSファイルを作成する。名前は何でもいいが、ここではcustom.scssとする。 中身は、Bootstarpのscssファイルへのパスを指定した@importだけ。
Bootstrap 4 Beta 2
The Bootstrap Blog News and announcements for all things Bootstrap, including new releases, Bootstrap Themes, and Bootstrap Icons. Just over two months ago we shipped our first beta for Bootstrap 4, and now we’re ready to share our second with you. We’ve improved customization, documentation, build tooling, and naming inconsistencies all while fixing hella bugs. We’ve done our best to prevent brea
Buttons フォームを使えば、必ずボタンがあります。フォームでなくとも、ページ遷移のボタンなどボタンを作る機会は多いでしょう。フォームで使う場合は、以下のボタンを使って下さい。 [code lang=”html”] <input class=”btn btn-primary” type=”submit” value=”Submit”> <input class=”btn btn-primary” type=”reset” value=”Reset”> [/code] このボタンは大きさも調整できます。 もし大きいサイズのボタンを作る場合は、クラス内に「btn-lg」を追加して下さい。 [code lang=”html”] <button type=”button” class=”btn btn-primary btn-lg”>Large button</button> [/code]
GitHub - corneliucirlan/mdstrap: jQuery plugin that creates sliding menu based on Bootstrap v4 framework レスポンシブなサイドメニューを実現するBootstrap4プラグイン「mdstrap」 通常時は普通のナビゲーションですが一定の幅以下になるとハンバーガーメニュー化し、タップすると次のようなサイドメニューにするというものです。 関連エントリ レスポンシブに使えるクオリティの高いサイドメニュー実装「vertical-responsive-menu」 シンプルなサイドメニュー実装jQueryプラグイン「Panel slider」 アプリ風のリッチなサイドメニュー実装「jQuery.SecretNav」
Rails5.1/5.2: `rails new`した「後に」yarn/webpackerでjQueryとBootstrap 4を追加する｜TechRacho by BPS株式会社
2018.10.16 Rails5.1/5.2: `rails new`した「後に」yarn/webpackerでjQueryとBootstrap 4を追加する Rails 5.1や5.2でrails newした後でwebpackerでjQueryやBootstrap 4を足したくなったときの手順をメモします。Bootstrap 4のインストールは、できるだけTwitterリポジトリの公式情報に沿うようにしました。 1. jQueryをWebpackerで後から追加する yarnがインストールされていない場合はbrew install yarnでyarnをインストールする（Macの場合） yarnがインストールされているかどうかはyarn -vで確認できます。 Gemfileにgem 'webpacker', github: 'rails/webpacker'を追加し、bundle ins
Bootstrap Magic 4: Generate your own Bootstrap 4.0 theme in minutes
Bootstrap Magic 4.0 Create your Bootstrap 4.0 themes easily. Live preview, live HTML coding to help you create your Bootstrap 4.0 theme direclty in your browser Create your theme Github project Morbi Phasellus arcu Morbi molestie justo et finibus auctor. Nunc accumsan leo vel metus sollicitudin dapibus. Praesent rutrum nibh tincidunt sagittis mattis. Metus sollicitudin Morbi molestie justo et fini
Bootstrap4がそろそろ本格的に導入されるようになっています。後方互換性がないため、これまでのテンプレートが使えなくなってしまったのが残念です。しかし、これによって新しいチャンスが生まれたとも言えるでしょう。 Sufee AdminはBootstrap4向けの管理ページテンプレートになります。今後のことを考えるならばBootstrap4対応版を使うのが良いでしょう。 Sufee Adminの使い方 ダッシュボードです。数値をリアルタイムに更新できます。 テーブル。 ボタン。 バッジ。 タブ。 カード。 ダッシュボードの表現も様々です。 グラフはChart.js/Flow Chart/Peity Cartに対応しています。 地図表示。 ログインページ。 Sufee Adminを使うことで、サイドメニューがあるタイプの管理画面が簡単に構築できます。多くのシステムでは管理画面のデザインまで
Bootstrap 4.1
The Bootstrap Blog News and announcements for all things Bootstrap, including new releases, Bootstrap Themes, and Bootstrap Icons. Two months ago we shipped the first major release of Bootstrap 4 and we’re thrilled y’all love the latest release and our brand new themes so much. Today we’re shipping our first minor release, v4.1! This release comes later than expected and some of the fixes we inten
グレーの枠（廃止） well グレーの囲み枠を表示してくれるクラスでしたが、Bootstrap4ではなくなりました。 パネル（廃止） panel panel-default パネルクラスもBootstrap4ではなくなりました。 カード bootstrap4では.well .panel .thumbnailクラスはなくなり、.cardクラスに統一されました。 card Card title Some quick example text to build on the card title and make up the bulk of the card’s content. Go somewhere <div class="card" style="width: 20rem;"> <img class="card-img-top" src="..." alt="Card image ca
Bootstrap4で日本語を使ったときに不格好になるのを和らげる「jpn.css」をつくりました - Qiita
Bootstrapで日本語を使うとものすごく残念な見た目になってしまうので、タイポグラフィ周りだけ調整して残念感を和らげてくれる**「jpn.css」**というものをつくりました。 GitHub、npmにてMITライセンスで公開しております。使い方や実際のデモなどは下記のページでご確認ください。 https://kokushin.github.io/jpn.css/ 技術的なお話 このままではただの宣伝になってしまうので技術的なお話を少々... フォントは「游ゴシック」を指定 jpn.cssで指定しているフォントは以下のような感じです。 $font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "游ゴシック Medium", "Yu Gothic", Y
Bootstrap4とは｜レンタルサーバーナレッジ
2018年2月21日にローンチされたBootstrapとはTwitter社が開発している世界で最もポピュラーなフロントエンドフレームワークです。 Bootstrapを使うとレスポンシブサイトを簡単に構築することができます。 なぜBootstrapを紹介するのか Bootstrapは世界で最も使われれいるフロントエンドフレームワークです。 下記はW3Techs（ https://w3techs.com/）が調査したJavaScriptライブラリーの利用率です。 1位はjQueryですが、BootstrapはjQueryを利用していることや、ライブラリと考えると、フロントエンドフレームワークの中ではBootstrapが実質1位です。 利用率が多いと何が良いかと言いますと、技術情報や、無料・有料のテンプレートが豊富に存在する、バグやセキュリティホールなどの不具合も速やかに取り除かれる、などの利点
今回は、グリッドシステム・レスポンシブデザインで有名なCSSフレームワークBootstrap(ブートストラップ)の基本について説明し、バージョン4系の導入の仕方とグリッドシステムの基本、およびBootstrapバージョン3系との違いについて解説していきます。
Shards - A High-Quality and Free Bootstrap 4 UI Kit — DesignRevision
Lightweight Shards is built with performance in mind having a small footprint and weighting ~13kb minified and gzipped. Responsive With Bootstrap 4 at its core, Shards is responsive by default being able to adapt and reflow its layout to any screen size.
GitHub - Daemonite/material: Material Design for Bootstrap 4
Daemonite's Material UI is a cross-platform and fully responsive front-end interface based on Google Material Design developed using Bootstrap 4. The basic idea behind this project is to combine the front-end technology of the popular Bootstrap framework with the visual language of Google Material Design. A visual language for our users that synthesizes the classic principles of good design with t
rails5+bootstrap4のアプリをGithub, herokuにデプロイ、完全無料で独自ドメインとSSL対応させる手順メモ - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
GitHub - Friendly-Pixel/grid-editor: Visual javascript editor for the bootstrap 4 grid system, written as a jQuery plugin.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
JSer.info #344 - Firefox 55.0がリリースされました。 Firefox 55 for developers - Mozilla | MDN Firefox 55: first desktop browser to support WebVR ★ Mozilla Hacks – the Web developer blog ECMAScriptにおいてはES2017のSharedArrayBuffer、現在Stage 3のObject rest/spread propertiesのサポートが行われています。 加えてrequestIdleCallback、WebVR API、Intersection Observer APIがサポートされています。 また、既存の挙動の変更としてスクロール位置の値を浮動小数点数として返すように変更、Selection APIの仕様追従、
Bootstrap4のsassを使った効率良いカスタマイズ方法です。 最近、Bootstrapをベースにしてサイトを開発することも多くなってきました。 これまでは何も考えずに、まずはbootstrap.cssを読み込んでから開発をスタートしてたんですが、経験を重ねることで、それがあまり効率が良くないことに気がつきました。 sassを使わないBootstrapのカスタマイズ Bootstrapをカスタマイズするにあたり、まずは「bootstrap.css」を読み込み、その後に読み込む「style.css」などで上書いていました。 この手法だと「プライマリカラーを変更する」「マージントップを調整する」「角丸をあり（なし）にする」などといった基本的なカスタマイズをするときに、スタイルを上書く箇所の洗い出す作業に時間を取られたり、また、洗い出しの漏れがあって一部デザイン・レイアウトに崩れが発生した
はじめに Delphi + ActiveXで作られた既存Webアプリケーションの仕様違い版を新規作成することになり、この際なので、ASP.NET + Bootstrap 4 で作成することにしました。 表入力形式や一覧表示にはスプレッドシートの「Handsontable」を使うとして、カレンダー入力は当初「Pikaday.js」を考えていましたが、画面設計に時間入力があり「DatetimePicker.js」ならカレンダー入力と時間入力の2つの機能を満たせるため、こちらに変更しました。 時間入力は、既存Webアプリケーションを踏襲した古い画面デザインで時間コンボボックスと分コンボボックスで入力する設計になっていたため、DatetimePickerの時間入力を使った今風なWebデザインに変更することにしました。 【2021/05/12追記】 2021年5月6日にBootstrap 5が正式リ
Bootstrap 4.5.0が、5/12にリリースされました！ 当初は4.4.1のバグフィックス版として4.4.2のリリースが予定されていましたが、v4とv5のギャップを埋める新機能も加えて、4.5.0としてマイナーリリースの扱いになっています。 Bootstrap Currently v4.5.0 公式ブログでの発表 Bootstrap 5の情報については、下記をご覧ください。 Bootstrap 5のリリースはもうすぐみたい！注目の新機能、jQueryは削除、IE10のサポートは終了へ Bootstrap 4.5.0の主な新機能は、下記の通りです。 新しいインタラクションユーティリティ。新しいユーティリティとSassマップでuser-selectを素早く設定できます。 ポインタカーソル用の新しいRebootスタイル。Rebootにrole="button"セレクタを追加し、非<but
Twitter社製のUIフレームワーク「Bootstrap」でのレイアウトにおいて、ポイントとなるのはグリッドシステムの理解です。本エントリーではBootstrapのグリッドシステムについておさらいしつつ、最新のBootstrap 4に対応したグリッドレイアウトの方法を紹介します。 そもそもグリッドシステムとは？ グリッドとは「画面を縦横に分割する線」のことです。横の線で分割されたエリアは「行」、縦の線で分割されたエリアは「列」となります。これらの**「行」と「列」を使ってボックスを配置していくのがBootstrap 4のグリッドシステムの基本**です。 グリッドシステムの「行」 グリッドシステムの「行」は画面を横に分割して作るエリア。行の幅は画面横幅であり、高さは中のコンテンツに応じます。 グリッドシステムの「列」 グリッドシステムの「列」は、画面を縦に12分割して作るエリア。列の幅は画
このページは「Bootstrap 4.2.1」について説明しています。Bootstrap 3 については、「Bootstrap 3入門」を参照してください。 Bootstrap は、スマートフォンなどのモバイル端末にも対応し、レスポンシブデザインを採用した HTML, CSS, JavaScript フレームワークです。 Twitter 社で開発されました。 最初は「Twitter Bootstrap」と呼ばれていましたが、現在は「Bootstrap」となりました。 現時点(2018年12月30日)の最新バージョンは 4.2.1 です。 Bootstrap 2, Bootstrap 3, Bootstrap 4 では一部互換性の無い機能があります。 Chrome 45 / Firefox 38 / IE 10 / Edge 12 / Safari 9 / Opera 30 / iOS 9
Bootstrap4 の使い方(1) Layout Bootstrap は Twitter 社が開発した CSS フレームワークです。CSS は通常自分で設定しますが、Bootstrap にはよく使われるスタイルがあらかじめ定義してあるので、これらのスタイルを利用するだけで統一されたデザインを適用可能になります。 以下は Bootstrap のドキュメントを元にその使い方を説明しています。Bootstrap のバージョンは、4.1.3 です。ほぼ翻訳に近いものになっていて、翻訳上の誤り等がある可能性がありますが、予めご了承ください。また、ページの都合上以下のパートに分かれています。 Layout（このページ。Bootstrap の読み込み、Sass の導入、グリッドシステムを使ったレイアウト、メディアオブジェクト） Content（タイポグラフィ、コード、イメージ、フィギュア、テーブル）
ユーティリティ 表示ユーティリティ Bootstrap4.xの使い方をBootstrap3.xからの変更箇所を交えて解説しています。 表示ユーティリティ（Display property） v4.0.0設定変更 表示ユーティリティを使用して、コンポーネントの display の値をすばやくレスポンシブに切り替えることが可能。より一般的な値の一部と、印刷時の display を制御するための追加機能を含む。 ※v3のレスポンシブ・ユーティリティより変更。 使い方（How it works） レスポンシブな表示ユーティリティクラスを使用して、displayプロパティの値を変更。Bootstrapでは意図的に表示可能なすべての値のサブセットのみをサポート。クラスは、必要に応じてさまざまなエフェクトが組み合わせ可能。 記法について（Notation）v4.0.0クラス名変更、一部追加 xs から
/* Extra small devices: Phones (<768px) */ @media (max-width: 767px) {} /* Small devices: Tablets (≥768px) */ @media (min-width: 768px) and (max-width: 991px) {} /* Medium devices: Desktops (≥992px) */ @media (min-width: 992px) and (max-width: 1199px) {} /* Large devices: Desktops (≥1200px) */ @media (min-width: 1200px) {} /* Extra small devices: Phones (<576px) */ @media (max-width: 575px) {} /*
Bootstrap4 かわいい説
個人的にスゲー好き。 まあ色はカスタム次第でどうにでもなるんだけど、デフォルトがこっそり変わっててかわいい。 flex対応してかわいい d-flexクラスでdisplay: flexのスタイルを付与できるようになった。均等配置や各要素のスペーシング決めなら、従来のグリッドシステムで事足りるのに、ちゃんと流行りのFlexboxが追加されててかわいい。なのでクラス指定だけでかなり柔軟にレイアウトは凝れる。
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに Bootstrap4が徐々に流行り始め、IEのサポート終了と共に、Gridシステムにflexが当たり前に使われるようになる時代が来ようとしています。 多くのフレームワークでSCSSなどといったメタ言語を利用できる今、それを利用し開発するフロントエンドエンジニアが多くいると思います。メタ言語を使うことによって高度化し抽象化されたStyleSheetは、一度方針を決めたら手戻ししにくい、諸刃の剣にもなってしまいました。そんなデザインマークアップにも設計書が必要な時代に、Bootstrap4とSCSSを用いた最良な開発手法とは何かを
こんにちは、masa08です。 今年ももうすぐ終わりです。「あ〜寒いな〜、寒いしVue.jsを使って何か作ってみたいなぁ」と思っていた矢先、Qiitaで以下のサイト等を読んで、急にポートフォリオサイトを作成してみようと思い、爆速で作成してみました。 フロント未学習の大学生が1週間でVue.jsを使ったポートフォリオを作った話 Vue.js を vue-cli を使ってシンプルにはじめてみる Vue-routerを使って、SPAをシンプルにはじめてみる vue-cliで始めるVue.jsチュートリアル (2) VueCLIからVue.js入門①【VueCLIで出てくるファイルを概要図で理解】 今回、Vue.jsとBootstrap4を使ってポートフォリオサイトを作成した結果、自分で思ったよりも早く実装することができました。今回はサイトを作る過程を解説していきたいと思います。 対象者 HTML
GitHub - puikinsh/sufee-admin-dashboard: A simple yet powerful Bootstrap 4 admin dashboard template.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Shards - Bootstrap4に対応したデザインテーマ
Bootstrapは有名なUIデザインフレームワークですが、先日バージョン4が正式にリリースされました。その結果、これまで使われてきた多くのテーマが使えなくなっています。3を使い続けても良いですが、徐々に情報は増えていくのでバージョン4を追いかける方が良いでしょう。 ということでテーマも新しいものに乗り換える必要があります。今回はShardsを紹介します。 Shardsの使い方 カラーリングです。 タイポグラフィ。 アイコンはマテリアルアイコンとFont Awesomeに対応しています。 フォーム。 バリデーションにも対応しています。 スライダー。 日付ピッカー。 カード。 ボタン。 プログレスバー。 ツールチップとアラート。 ナビゲーションバー。 作れるサイトのデザインデモです。 こんなスクロール型のサイトにも。 今風なデザインにも使えます。 Shardsを使えばBootstrap4を適
Bootstrap4向けの高品質な無料テンプレート300以上
Bootstrap4の無料テンプレート300本+αまとめ。 Bootstrap4の無料テンプレートを配布しているサイトを集めてみました。無料といってもレイアウトやデザインなどどれも高品質なものばかり。これから作るレスポンシブサイトのベースとしても便利。 デモページでデザインのサンプルを見ることができるのでBootstrap4でサイトを作る際の参考にもおすすめです。 Bootstrap5の最新無料テンプレートはこちら Bootstrap4の無料テンプレート、テーマ どのサイトからも無料でダウンロードできます。ダウンロードしたテンプレートをそのまま使ったり、基本のレイアウトとして活用することもできます。どれもクオリティは高いのでコーディングの参考にもなると思います。 なお一部のテーマではリンクの表示が必要なものがあるためダウンロードの際には注意文をよく読んでから使ってください。 StartBo
実装例とコードも確認出来るBootstrap 4用チートシート・「Bootstrap 4 Cheat Sheet」 - かちびと.net
Bootstrap 4 Cheat Sheetは実装サンプルとコードも即座に確認出来るチートシートです。classをクリックするとコードスニペットと実装サンプルも確認出来る、というもの。Bootstrapも需要が増えるとともに供給する機能が付与されてきているのでこうしたカンペも必要になってきているのかもですね。個人的にはこうなるともう使わなくなっちゃいますけど・・本チートシートの見せ方がとても良かったのでメモ的に。 Bootstrap 4 Cheat Sheet
NOW UI KITは美しいスタイルに仕上げられたBootstrap 4用UIキットです。この手のものでおなじみのCreative Tim製です。コンポーネントもしっかり揃えられており、特にオリジナルのスタイルにする必要がないならすぐに公開出来そうです。よく作り込まれているので勉強用にも良いかも？ライセンスはMITとのこと。 NOW UI KIT
概要～Bootstrap4移行ガイド
レイアウト 概要 Bootstrap4.xの使い方をBootstrap3.xからの変更箇所を交えて解説しています。 概要（Overview） Bootstrapには、包括用コンテナ、強力なグリッドシステム、柔軟なメディア・オブジェクト、レスポンシブ・ユーティリティクラスなど、プロジェクトをレイアウトするためのいくつかのコンポーネントとオプションが組み込まれている。 コンテナ（Containers） これらのSassループもカラーマップに限定されない。コンポーネントのレスポンシブバリエーションも生成可能。例えばドロップダウンのレスポンシブな配置を例にとった場合、$grid-breakpoints Sassマップの @each ループとメディアクエリの組み合わせが混在している。 Bootstrapには3つの異なるコンテナがある。 .container は、各レスポンシブ・ブレークポイントで m
Bootstrap 4 Upgrade - Convert Bootstrap 3 to Bootstrap 4
×Head's up! This service is based on Bootstrap 4.1.0. Also, try our Bootstrap 4 custom build tool. This conversion service is intended to help you upgrade from Bootstrap 3 to Bootstrap 4. The original 2.x to 3 upgrade tool is here. (The Bootstrap 4 to Bootstrap 5 converter is coming soon) Given valid Bootstrap 3 HTML markup, this upgrade tool replaces the Bootstrap 3.x CSS classes with Bootstrap 4
Bootstrap3.xの設定例 赤背景が変更箇所 <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#Navber" aria-expanded="false"> <span class="sr-only">ナビゲーションの切替</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navba
Bootstrap4 | Webお役立ちネタ帳
WordPressのカスタムメニューwp_nav_menuをBootstrap4のメニュー対応させたい場合...
State of affairs: Bootstrap 4 vs Foundation 6.3 - Danny Herran
Bootstrap 4 and Foundation 6 are the latest versions of the most widely used CSS frameworks out there. Foundation 6 is stable whereas Bootstrap 4 hasn’t been released yet. However, before you wonder why I am comparing a stable framework version vs an alpha one, let me set the record straight by saying that Bootstrap 4 may be very well used as a daily driver. Let us explore the current status of bo
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Bootstrap 4を導入するための設定方法【2020年最新版】 | まろりかの自由帳
Bootstrap 4 をカスタマイズする - Qiita
【入門】Bootstrap4の導入方法から使い方までを徹底解説！
レスポンシブなサイドメニューを実現するBootstrap4プラグイン「mdstrap」:phpspot開発日誌
Sufee Admin - Bootstrap4対応の多機能ダッシュボードデザインテンプレート MOONGIFT
Bootstrap4に用意されているクラス【card編】 | Webお役立ちネタ帳
Bootstrap4の使い方 ブートストラップの導入方法と基本を徹底解説！ | IT辞書
2017-08-14のJS: Firefox 55、BootStrap 4β、Node.js 8.3.0
Bootstrap4のsassを使った効率良いカスタマイズ方法 – helog
Bootstrap 4でDatetimePickerを使いたい
Bootstrap 4.5.0がリリース！多数のバグ修正とv5に向けての新機能を実装
Bootstrap 4のグリッドシステムの基本を学ぼう - Qiita
とほほのBootstrap 4入門 - はじめに - とほほのWWW入門
Bootstrap4 の使い方 (1) Layout
表示ユーティリティ～Bootstrap4移行ガイド
Bootstrap4のグリッドシステム v3からの変更点 | Webお役立ちネタ帳
Bootstrap4とSCSSでの開発手法の模索 - Qiita
Vue.js + Bootstrap4でポートフォリオサイトの雛形を作ろう！ - Qiita
美しいスタイルのBootstrap 4用UIキット・「NOW UI KIT」 - かちびと.net
ナビゲーションバー～Bootstrap4移行ガイド