ここでは、Bootstrap4に備わっている機能を利用してアコーディオンメニューを作る方法について見ていきたいと思います。 今回、作成するメニューはこちらです。 ボタンで表示を切り替えてご覧ください。 See the Pen bootstrap4 accordion by kenichi (@ken81) on CodePen. HTML <ul id="accordion_menu"> <li> <a data-toggle="collapse" href="#menu01" aria-controls="#menu01" aria-expanded="false">リンクメニュー１</a> </li> <ul id="menu01" class="collapse" data-parent="#accordion_menu"> <li><a href="#">リンクサブメニュー1-1<
JSer.info #367 - CSSフレームワークのBootstrap 4が正式リリースされました。 Bootstrap 3.3.0から約3年ぶりのメジャーアップデートとなります。 Bootstrap 4 · Bootstrap 4.0では実装をLessからSassへ変更、GridシステムにFlexboxを利用、Panelsやthumbnailsを廃止しCardsへの移行などの変更が行なわれています。そのため、コンポーネントへ指定するクラス名のリネームも行われています。 詳しい変更点とv3からの違いについてはマイグレーションガイドを参照してください。 Migrating to v4 · Bootstrap また、IE 8、9のサポート終了し、v4からはIE10+、iOS 7+、Android 5.0+が対象となっています。 Browsers and devices · Bootstra
Grid（グリッド）レイアウトとは、画面幅に合わせて最大12個にレイアウトを分割する機能のことです。 Bootstrap 4 から、Flexbox が使用され、5つのブレイクポイントが設計されています。 本記事では、Grid レイアウトの使い方について解説します。 下記は Grid レイアウトの簡単な使い方です。 「 .container 」の中に、「 .row 」を入れ、その中に分割したいカラムを記述します。 下記の「 .col-sm 」は、sm というサイズ以上の場合に3カラムを維持します。 <div class="container"> <div class="row"> <div class="col-sm"> One of three columns </div> <div class="col-sm"> One of three columns </div> <div clas
たくさんのWebサイトで採用されている固定ヘッダーや固定フッターをBootstrap 4を用いて簡単に実現する方法を紹介します。 固定ヘッダーと固定フッターを設定するにはHTMLやCSS、場合によってはJavaScriptの知識が必要になるので、想像以上に設定が難しいものですが、 Bootstrap 4を利用すればHTMLタグにclassを追加するだけ固定ヘッダーと固定フッターを簡単に設定できます。 Bootstrap 4の利用を前提としているので、まだ準備ができていない人は以下のページを参考にしてください。 https://www.marorika.com/entry/setting-bootstrap 固定ヘッダー、固定フッターとは 固定ヘッダーとは 固定ヘッダーとは、Webページの上部に固定されているヘッダーのことを言います。 スクロールしても上部に固定され続け、隠れずに残った状態と
BootstrapBootstrap 4.0 Release: What’s New?Bootstrap 4 ships with a lot of new features and adds spice to the most popular CSS framework in the world. Learn what's new in Bootstrap! TL;DR: Bootstrap is the de-facto design frontend component library for designing web and mobile sites. In this article, I'll cover the new features in Bootstrap 4.0 and several other changes and deprecations. We never
GitHub - DesignRevision/shards-ui: 🎨Shards is a beautiful & modern Bootstrap 4 UI kit packed with extra templates and components.
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
Bootstrap 4 の Navbar（ナビゲーションメニュー）は、デフォルトのままだとクリック時にメニューが閉じません。 シングルページなど1つのページ内でリンクする場合は、Navbar クリック時にメニューを閉じたいですよね。 今回の記事では、Dropdown メニュー以外のリンクがクリックされた時に、メニューが閉じるようにする方法を解説します。 「Webサイトからお問い合わせが来ない…」とお悩みの方必見！ 当サイトのノウハウを詰め込んだ『Web集客の無料ガイド』をご提供 詳細はこちら Nabvar クリック時にメニューを閉じる 下記の JavaScript を jQuery 読み込みの後ろに追記することで、Nabvar クリック時にメニューを閉じることができます。 <script> $('.navbar-nav>li>a , .dropdown-menu>a').on('click
Bootstrap4のテーマをカスタマイズする３つの簡単な方法
Bootstrap4のテーマカスタマイズ方法をまとめてみました。 Bootstrap4はそのままでもそれなりのデザインを作れるのですが、少し物足りないんですよね。 ここではBootstrap4のテーマの作り方と合わせて、簡単にテーマカスタマイズできるツールなども紹介します。 Bootstrap4のテーマカスタマイズ、３つの方法 Bootstrap3ではLESSを使って別にテーマファイルを作り、数多くの変数をカスタマイズするというややこしいことをしていましたが、Bootstrap4ではSASSに変更されてカスタマイズもやりやすい構造になっています。 Bootstrap4でテーマをカスタマイズする方法は大きく分けて、「CSSを書く」「Sassを書く」「ツールを使う」の３つ。 ではひとつずつ解説していきます。 CSSを書いて上書きする CSSファイルにCSSコードを書いてスタイルを上書きすること
Bootstrap4のCarousel（カルーセル）コンポーネントの使い方を解説。 画像やコンテンツのスライドショーとして使えるカルーセルを使えば、jQueryプラグインを追加しなくても良いのでページの読み込み改善にも役立つコンポーネントです。 普通のスライドショーだけでなく、ちょこっとカスタマイズすれば結構いろいろできちゃいます。 Bootstrap4 Carousel（カルーセル）の基本的な使い方 Bootstrap4のカルーセルは画像やテキストなどをスライド表示できるコンポーネントです。 左右のコントローラや下部に表示されるインジケーターをクリックすると画像が切り替わる仕組み。 公式ドキュメントはこちら 基本構造 .carouselの親要素内にインジケータ、コンテンツ、コントローラが入ってます。 基本的にはドキュメントのコードをコピペして画像タグのsrcに画像のURLを入れればそのま
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
GitHub - wp-bootstrap/wp-bootstrap-navwalker: A custom WordPress nav walker class to fully implement the Twitter Bootstrap 4.0+ navigation style (v3-branch available for Bootstrap 3) in a custom theme using the WordPress built in menu manager.
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
こんにちは。UX開発部 ディベロップメントグループの品川と申します。 IDCFクラウドのサービス立ち上げ期から、主にフロントエンド（たまにバックエンド）を担当してます。 htmlでtable表記をする際になにかと便利なのがdatatablesですよね。IDCFクラウドのサービスサイト内でも頻繁に実装されているjqueryの追加ライブラリですが、最近、サイト内のリファクタリングを進めることになりまして、今いろいろな箇所を見直しています。 見直しの際、せっかくだからBootstrap4をベースに使ってみようと思い 元サイト を見てみたら bootstrap4 用のcssとjsが用意されているじゃありませんか！！こんな便利なのに、より使いやすくなるなんて！これはもう記事にするしかなし！！！ ということで、今回はdatatablesをbootstrap4ベースで利用してみようというお話です。実質
Vol.1 – Bootstrap4に学ぶ、アクセシビリティ(WAI-ARIA)対応のレスポンシブWebサイト制作 Bootstrap4 alphaが発表されたので、それをベースにアクセシビリティ対応(WAI-ARIA)の勉強をしていきたいと思います。 ※Bootstrap4 alphaについての概要・変更点などについては「Bootstrap 4 alpha発表！SASS、ECMAScript6などに刷新！」の記事をご覧ください。 まずは、Button Groupで利用されているaria-labelとaria-labelledby まずはButton Groupのソースコードから。 <div class="btn-group" role="group" aria-label="Button group with nested dropdown"> <button type="button"
文字の体裁～Bootstrap4移行ガイド
コンテンツ 文字の体裁 Bootstrap4.xの使い方をBootstrap3.xからの変更箇所を交えて解説しています。 文字の体裁（Typography） v4.3.0一部変更 グローバル設定、見出し、本文、リストなどを含むBootstrapの文字の体裁の解説と例。 基本設定（Global settings） Bootstrapは、基本的なグローバル表示、文字の体裁、リンクのスタイルを設定。より多くの制御が必要な場合は、テキストユーティリティクラスを参照する。 各OSやデバイスに最適な font-family を選択し、ネイティブ・フォントスタックを使用。 より包括的でアクセスしやすいタイプスケールのために、訪問者が必要に応じてブラウザのデフォルトをカスタマイズできるように、ブラウザのデフォルトのルート font-size（通常は16px）を使用。 <body> に適用される文字の体裁の
GitHub - Lobos/react-ui: A collection of components for React, base on bootstrap 4.0.
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
こんにちは！(^o^)/ 今月の出費がなぜか先月より２万ほど減りました。ya-buです。 carouselのサンプルだとレスポンシブしようとした時に画像が横に縮まってしまうのですが、それを防ぐ方法を紹介します。 縮まってしまう現象 今回の記事で実装できるのはこちら 対象読者 bootstrap4を使ってる人、carouselのレスポンシブも画像比率を保って欲しい！人 ソースコード 今回作成したソースコードはこちらです。 github.com 1. carouselをレスポンシブさせる cssを変更しようと思ったのですがなかなかうまくいかなかったので、ググってみると自分が思い描いてる通りのものを見つけました。 CodePen - Full width carousel with entire slide clickable こちらを参考にしつつ実装してみます。 htmlはこちら <!-- c
Material Design for Bootstrap4（その1）導入とカードデザインの実装 | 創kenブログ
Bootstrap4を使い慣れてる人ならば、マテリアルデザインを簡単に導入することが出来る「Material Design for Bootstrap4」。 ＊Material Design for Bootstrap 「Material Design for Bootstrap4（以下、MDB4と呼称）」は無料で商用利用可能です。 クレジット表記も必要なく、制作にも使えます。 ライセンスは「MTIライセンス」で、 ソースコード内（mdb.min.css）にクレジット表記が載っているので、それさえ消さなければ問題ありません。 以前、MDB4について単発の記事に概要のみ載せました。 また、これのBootstrap3対応バージョンについて、8回のシリーズで書きました。 Bootstrap4も正式リリースから半年以上経ちましたので、そとそろ皆さん慣れてきた頃かと思います。 今回から数回に渡って「
Laravel 6.x laravel/uiを利用してbootstrap 4を適用する – hrendoh's tech memo
モデル「Task」をマイグレーション オプションを付けて生成します。 $ php artisan make:model Task -m Model created successfully. Created Migration: 2019_12_11_151510_create_tasks_table テーブル定義に従ってマイグレーションを作成します。 <?php // database/migrations/2019_12_11_151510_create_tasks_table.php ... public function up() { Schema::create('tasks', function (Blueprint $table) { $table->bigIncrements('id'); $table->string('subject'); $table->text('d
Bootstrap 4 のボタンのサイズ、色をカスタマイズする方法
この記事はボタンのカスタマイズについて書いています。 ボタン関係の装飾まとめは下記記事を参照してください。 Bootstrap 4 ボタン関係の装飾クラスまとめ 世界最大級のオンライン学習『Udemy』でBootstrap4を効率よく学ぶ ボタンの大きさをカスタマイズ 割合で指定する 親要素に占める割合で指定するクラスが用意されています。 幅 w-25, w-50, w-75, w-100, w-auto 高さ h-25, h-50, h-75, h-100, h-auto スタイルはこのようになっています。 コード .w-25 { width: 25% !important; } .w-auto { width: auto !important; } .h-50 { height: 50% !important; } .h-75 { height: 75% !important; } コ
.btn はボタンを示します。.btn-* でボタンの種類を指定します。Bootstrap 3 の .btn-default は .btn-secondary に名称変更されました。 <button type="button" class="btn">Button</button> <button type="button" class="btn btn-primary">Primary</button> <button type="button" class="btn btn-secondary">Secondary</button> <button type="button" class="btn btn-success">Success</button> <button type="button" class="btn btn-danger">Danger</button> <but
大変嬉しい反響を頂きましたので、2020年まで使えるfont-familyのベストプラクティスをBootstrap4に組み込むのが面倒くさいあなたに向けて作りました。 おまけでMaterial Design Liteも用意しました。 ゴシック体のみのコードとなります。 明朝体はBootstrapの初期値では指定されていないので、明朝体は記述しません。 等幅フォントはお好みで調整してください。 Bootstrap3は私も面倒くさいので、作る予定はありません。 Bootstrapの日本語化 Bootstrap4に「2020年まで使えるfont-familyのベストプラクティス」で作ったfont-familyを適用させます。 製作時のバージョンが [ 4.0.0-alpha.4 ] になります。適時読み替えてください。 動作確認済みバージョン 4.0.0-alpha.4 4.0.0-alpha.
見やすいUIを作れるフレームワークBootstrap4の使い方(2ページ目)Bootstrap4の機能と使い方を解説。Bootstrapとは、ウェブページ上に見やすく使いやすいデザインやUI(ユーザ・インターフェイス)を簡単に作成できる便利なフレームワークです。CSSやJavaScriptの知識があまりなくても、タブやメニューでのナビゲーション機能、リンクのボタン化、各種入力フォーム、段組レイアウトなどの様々なデザインと動作が簡単に作れます。手軽に見やすいウェブページを作りたい場合におすすめです。 Bootstrap4を使うために必要な記述 (自サイトへの設置は不要) Bootstrap4は、ファイル一式をダウンロードして自サイトに設置することもできますが、CDNサーバ(＝有名ライブラリなどの構成ファイルを配信してくれるサービス)経由で読み込むこともできます。CDNサーバ経由で読み込めば、
![2/2 見やすいUIを作れるフレームワークBootstrap4の使い方 [ホームページ作成] All About](https://cdn-ak-scissors.b.st-hatena.com/image/square/dc3244009be5ab9853f5ccf45b8c905a52c7aa45/height=288;version=1;width=512/https%3A%2F%2Fimgcp.aacdn.jp%2Fimg-a%2F1200%2F900%2Faa%2Fgm%2Farticle%2F3%2F9%2F3%2F0%2F7%2F8%2F201802281409%2Ftopimg_original.png)
What's New in Bootstrap 4? A free, one-page theme to highlight the new features Based on 4.0-alpha.4 Get Started Cards What you notice first in Bootstrap 4 is that .panel and .well have been replaced by the .card. This makes a lot of sense as "cards" are one of the more well known trends in responsive design. The Bootstrap 4 Cards can be singular, grouped together (as shown) or equal height. There
GitHub - modularcode/modular-admin-html: ModularAdmin - Free Dashboard Theme Built On Bootstrap 4 | HTML Version
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
ナビゲーションメニュー (Navbar) の中央寄せ、右寄せなどの使い方 : Bootstrap 4｜レンタルサーバーナレッジ
TOP > TECH > ナビゲーションメニュー (Navbar) の中央寄せ、右寄せなどの使い方 : Bootstrap 4 Bootstrap とは Bootstrap は、 Web サイトの開発などに使うフレームワークのことです。 Twitter 社が開発し、世界で最も人気なフレームワークとされています。 HTML / CSS 、Javascript で構成されており、開発を効率的に進められます。 Web サイト作成で使われるボタンやフォームなども機能が備わっており、レスポンシブ対応のためあらゆるデバイスからの閲覧にも対応できます。 Bootstrap 4は2018年2月21日にリリースされたバージョンです。本記事ではこの Bootstrap4 での Navbar の使い方をまとめました。 Bootstrap4 についてはこちらの記事でも詳しく解説しています。 ▼Bootstrap4
.container（固定枠）または.container-fluid（流動枠）で外枠を設定 .rowで行を設定 .col-[prefix]-[数字]でカラムを設定 [prefix]でブレイクポイントの接頭辞（xsやmdなど）を指定。 [数字]でカラムの幅を設定。1行ごとに（prefixごとに）合計で12になるように指定します。12以上になるといわゆるカラム落ちで表示されます。 グリッドシステム使用例 small（568px以上）以上の画面幅になると1行を3:6:3の3分割の3列のレイアウトになります。 568px未満では、それぞれ横100%で縦に積み重なる形でレイアウトされます。 Bootstarpはモバイルファーストなので最小サイズで、レイアウトの設定をしない場合は各列が横100%で縦に積み重なる形でレイアウトされます。 html <div class="container"> <div
最近はメインでのコーディングはBootstrap4に移行しておりますがいろいろと3の時に使えたものが使えなかったりとしております。 DatetimePickerなどもそうですね。私個人的には4になってからこれだけでほぼほぼ完結できる仕組みになったので使いやすいです。 さて、今回はそんなBootstrap4でのDatetimePickerについてご紹介します。3では以下のような感じが使われていたと思われます。 Bootstrap 3 Datepicker Bootstrap 4 DateTimePicker 使い方を説明します。以下のサイトに使い方は記載されていますが簡単に説明します。 Tempus Dominus - Bootstrap 4 新しいバージョンではなく古いバージョン情報が載ってありますが使い方に関しては問題なさそうです。 トップページに記載されてあるCDNJSは5.0.1が記
基礎的すぎるのか、意外と情報が見つからなかったので投稿します。 やりたいこと BootstrapのNavbarで、 Home About などは左、Register Login Dropdown などは右に置きたい。 けど、スマホのハンバーガーメニューではすべての要素を左寄せにしたい。 (ネットで見つけた解決策の多くでは、スマホの方でも右寄せとなってしまって、悲しい気分になった。) なるべく、簡潔に、公式っぽい方法でやりたい。 やりかた 左右で２つの<ul class="navbar-nav"></ul>に分けて、 左のほうにmr-auto クラスを付与するだけ。 <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <div class="container"> <a class="navbar-brand " href="/
Bootstrap4では、ブロック要素の左寄せ・右寄せ・中央寄せができるクラスが用意されています。 そのクラスを追加することで、ブロック要素を寄せることができます。 サンプルも作りました。
実例～Bootstrap4移行ガイド
実例（Examples） フレームワークのパーツを使用することから、カスタムコンポーネントやレイアウトに至るまで、例を挙げてプロジェクトをすばやく手に入れることが可能。 ソースコードのダウンロード 実例のダウンロード ※公式サイトの実例なのでダウンロードファイルはいずれも英語だが、以下の各ファイルで日本語のソースコードがコピー可能。
PSやSketchファイルも用意されたBootstrap 4ベースのオープンソースUIキット・「Material Kit」 - かちびと.net
Material KitはBootstrap 4ベースのUIキットです。その内容は極めて豪華なものとなっており、PhotoshopやSketchファイルも用意、HTMLだけでなく、WordPressテーマも用意、Webアプリや管理画面等にも対応できるUIコンポーネントが含まれていて、React.jsやReact Native、Vue.jsもサポートされており、オープンソースで提供されており、これらは一括でDLするのではなく、好みに応じてDL出来るように配慮されています。概ね完成されたものでフレームワークの類ではありません。このまま使えばかなりの時短になる、というものを探している方向けという印象です。デザインファイルも手に入るので勉強用にも良いかもしれませんね。ライセンスはMIT。 Material Kit
#概要 Bootstrap4を仕事で使うことになりそうなので、下調べをする。 アプリはLaravel5.5で開発予定なので、Laravel-Mixでアセットのコンパイルができるところまでを目標とする。 ※Laravel-MixとかSassとかまともに使ったことはないので、間違ったことを言っていたら指摘していただけると助かります。 #環境 Laravel 5.5.2 PHP 7.1.7 node v6.11.1 npm 3.10.10 #手順 package.json修正（bootstrap4追加、bootstrap-sass削除） bootstrap本体を読み込む_bootstrap.scssを作成 app.scss修正 アセットのコンパイル ##package.json修正 デフォルトで設定されているbootstrap-sassは、bootstrap４に未対応（2017/9/5時点）のた
Bootstrap4に対応したDatepickerを作成する（和暦対応）〜popover,jQuery | | Scimpr Blog
triggerオプションでpopoverを開いたり閉じたりできるんだけど、デフォルトのtriggerオプションは’click’なので要素をクリックすれば、popoverが表示されるはず. ここで、htmlオプションをtrueにすれば、titleとcontentにhtmlを描画できるので、ここにtableタグでカレンダーを描けばdatepickerになるのだよ. tableタグでカレンダーを作るtheadに曜日を表示して、tbodyに週ごとの日付を表示するカレンダーを作る. カレンダーの内容は、年と月を与えると決まるので、後でその部分はプログラミングするとして、まずはその枠をtableタグで作る. カレンダーの内容は月の初めの日（1日）の曜日によって変わるんだけど、最大で６週分くらい枠を作っておけばいい. そして、セルに1-42までの通し番号をつけて、月の初めの曜日に従って、その分ずらして日
Bootstrap 4 Cheat Sheet - All Classes List with Descriptions 2023
This Bootstrap 4 Cheat Sheet helps you quickly find documentation for common CSS classes, components, and grids.
Flex動作を有効にする まずは、d-flexまたはd-inline-flexクラスを設定し、Flexコンテナーを作成します。 d-flex
参考リンク：https://cccabinet.jpn.org/bootstrap4/layout/overview#responsive-breakpoints // 大デバイス（デスクトップ, 1200px 未満） @media (min-width: 992px) { .title { font-size: 7.0rem; } } // 中デバイス（タブレット, 992px 未満） @media (max-width: 991.98px) { .title { font-size: 4.0rem; } } // 小デバイス（横向きモバイル, 768px 未満） @media (max-width: 767.98px) { .title { font-size: 2.0rem; } } // @include media-breakpoint-up(sm) { // 極小デバイス（縦向
Bootstrap 4 Alpha 6
The Bootstrap Blog News and announcements for all things Bootstrap, including new releases, Bootstrap Themes, and Bootstrap Icons. Alpha 6 has landed, and it’s one of our biggest ships to date. We’ve rewritten our grid system and all major components in flexbox, forging ahead with it as our default layout option as we drop IE9 support. With 700 commits since our last release, we have some catching
 ---------- **Newest update now with Bootstrap 4.0.0-beta!** ---------------------------------------------------------------
Bootstrap themes - A library of customized Bootstrap 4 builds
All these Bootstrap themes are customized versions of Bootstrap. They don't add any new components or layouts, they simply customize how Bootstrap looks. Use these to give your project a different feel. These are all free and open source, licensed under MIT. Simply use the delivered CSS files instead of the Bootstrap's original CSS file. The CSS files are custom Bootstrap builds with modified vari
Bootstrap4によってボタンやフォームに適用されるスタイルを無効化する方法 | DevelopersIO
どうも！大阪オフィスの西村祐二です。 WEBサイトの画面やWEBの管理画面を作るときにBootstrap4をよく使います。 使い方としては、メインにガッツリというよりか補助的な役割で使う機会が多くなってきました。 特にCSSを書かずに、marginやpaddingの調整、やポジションの調整が簡単にできるのでとても重宝しています。 ただ、しょうがないのですがついてほしくないところにCSSのスタイルが適用されてしまうことがあります。 例をあげてみます。画像に映るアイコンはボタンタグで作成したアイコンでクリックすることができます。アイコンをクリックした後に、アイコンの周りに青い枠線のスタイルが適用されていることがわかります。すごい違和感ですよね。 なので、今回、Bootstrap4によって適用されるスタイルを無効化する方法について記載したいと思います。 方法 さっそく結論ですが、下記をCSSファ
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Bootstrap4を利用してアコーディオンメニューを作ろう | コトダマウェブ
2018-01-23のJS: 2018-01-23のJS: Bootstrap 4、create-react-app 1.1.0と2.0、kuker
Bootstrap4 Gridレイアウトについて | CPIスタッフブログ
Bootstrap 4で固定ヘッダーと固定フッターを設定する簡単な方法 | まろりかの自由帳
Bootstrap 4.0 Release: What’s New?
Navbar クリック時にメニューを閉じる方法 : Bootstrap 4｜レンタルサーバーナレッジ
Bootstrap4 Carousel（カルーセル）の使い方とカスタマイズサンプル
Rails5アプリにBootstrap4を導入 - Qiita
datatablesをbootstrap4ベースで利用してみた - IDCF テックブログ
Vol.1 - Bootstrap4に学ぶ、アクセシビリティ(WAI-ARIA)対応のレスポンシブWebサイト制作
carouselで画像のサイズ保ったままレスポンシブさせる（bootstrap4） - 空の下でひっそりと
とほほのBootstrap 4入門 - ボタン - とほほのWWW入門
Bootstrap4用 游ゴシックfont-family - Qiita
2/2 見やすいUIを作れるフレームワークBootstrap4の使い方 [ホームページ作成] All About
Bootstrap 4 Themes and Upgrade Guide
【Bootstrap4】グリッドレイアウト基本 – niwaka-web
Bootstrap4でフォーム入力の際にカレンダーから日付入力する方法
【Bootstrap 4】navbar の一部の nav-item を右寄せに - Qiita
Bootstrap4 ブロック要素の左寄せ・右寄せ・中央寄せ（センタリング） | クルーデザイン
Laravel5.5 Bootstrap4のSassを使ってみる - Qiita
Bootstrap4に用意されているクラス【flex編】 | Webお役立ちネタ帳
【Bootstrap4】フォントサイズをレスポンシブに対応する｜Artefact
React - Bootstrap 4 Business Theme - WrapBootstrap