RailsにBootstrapを導入する際の手順と見た目ライン風掲示板のモックを作って確認してみました。また、例にはCSS(SCSS)を使って三角形を作る方法も記載してます

Bootstrapとは

Twitter社が提供している、そこそこなデザインを作成するためのWebフレームワーク。ノンデザイナーがサクッとモックを作るには良い感じです。レスポンシブ・ウェブ・デザイン(RWD)が手軽にできるため、さっとそれっぽくできます。

準備

RailsアプリでBootstrapを作成するためのsprockets-railsのバージョンを確認します。
Railsアプリで Bootstrap 4 を利用するより

注意点
sprockets-railsがv2.3.2.以上である必要があります

`sprockets-rails`バージョン確認方法

$ bundle show |fgrep sprockets-rails
  * sprockets-rails (3.2.1)

プロジェクトの設定

まずプロジェクト内でBootStrapを使用する準備です

application.scss

Railsアプリの作成時に生成されるapplication.cssをapplication.scssにリネームします。

$ mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss

次に、app/assets/stylesheets/application.scss内にbootstrapをimportします。

注意:
Sassファイルでは*= require、*= require_treeを削除する必要があります。requireの前の*はコメントアウトではございません
- Sassファイルで*= requireを利用すると他のスタイルシートではBootstrapのmixinや変数を利用できなくなります

app/asserts/stylesheets/application.scss

 *
 *   require_tree .
 *   require_self
 */

 // Custom bootstrap variables must be set or imported *before* bootstrap.
 @import "bootstrap";

application.js

Bootstrapと依存関係をapplication.jsに追記します。

//=はコメントアウトではございません

app/assets/javascripts/application.js

//
//= require rails-ujs
//= require turbolinks
//= require_tree .

補足
- Bootstrapのtooltipsやpopoverはpopper.jsに依存している
- bootstrapの依存gemにpopper_jsが指定されているため新たにインストールは不要
- コンパイルを高速化したい場合はbootstrap-sprocketsの代わりにbootstrapを指定する

またBootstrapはjQueryに依存するため、(デフォルトでjQueryがインストールされない)Rails5.1以上ではjquery-railsもGemfileに追記します。

Gemfileに以下を追記します。

Gemfile

# bootstrap
gem 'bootstrap', '~> 4.1', '>= 4.1.3'
gem 'jquery-rails', '~> 4.3', '>= 4.3.3'

確認

以上で準備ができたのでモックを作って、確認します。
以下例です。見た目Line風簡易チャットを作ってみました

こんな感じで作ってます

app/assert/views/chat/index.html.erb

<main>
    <section class="text-left">
        <img class="rounded mx-1 mt-4 mb-1" alt="logo" src="/jpg/Logo/hoge.png">
    </section>
    <section class="bg-submit px-5 pt-3 pb-2">
        <div class="text-left">
            <div class="form-group row">
                <div class="col-sm-2">
                    <label class="text-sex h5">性別</label>
                </div>
                <div class="col-sm-8 btn-group btn-group-toggle" data-toggle="buttons">
                    <label class="btn btn-success focus active" style="width:50%" id="selectedLabelMan" name="selectedLavelSex">
                        <input type="radio" name="selectedSexMan" id="selectedMan">
                        男性
                    </label>
                    <label class="btn btn-default" style="width:50%" id="selectedLabelWoman" name="selectedLavelSex">
                        <input type="radio" name="selectedSexWoman" id="selectedWoman">
                        女性
                    </label>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-8 mb-3">
                <input type="input" class="form-control" name="inputUserName" maxlength="20" placeholder="名前(20文字まで)">
            </div>
        </div>
        <div class="row">
            <div class="col-sm-10 mb-1">
                <textarea rows="3" class="form-control" name="inputComment" maxlength="140" placeholder="コメント(140文字まで)"></textarea>
            </div>
            <div class="col-sm-2">
                <input type="submit" class="btn btn-success btn-md float-right" value="投稿">
            </div>
        </div>
    </section>
    <section class="bg-chat px-3 pt-3 pb-3">
        <img class="rounded float-left mx-1 mt-3 mb-1" alt="man_icon" src="/jpg/man_icon.jpeg">
        <p class="mb-1 mx-5">男でっせ男でっせ男でっせ</p>
        <div class="mx-3 mb-2">
            <div class="man-talk-contents">
                <p class="mh-100 mx-5 p-2 ml-60 rounded shadow-sm text-left bg-man-line man-talk-contents">
                    男talktak男talktak男talktak男talktak男talktak
                </p>
            </div>
        </div>
        <img class="rounded float-right mx-1 mt-3 mb-1" alt="woman_icon" src="/jpg/woman_icon.jpeg">
        <p class="mb-1 mx-5">女やで女やで女やで女やで女やで</p>
        <div class="mx-3 mb-2">
            <div class="woman-talk-contents">
                <p class="mh-100 mx-5 p-2 ml-60 rounded shadow-sm bg-woman-line text-left">
                    女喋る女喋る女喋る女喋る女喋る女喋る女喋る女喋る女喋る女喋る女喋る女喋る女喋る女喋る女喋る女喋る女喋る女喋る女喋る女喋る
                </p>
            </div>
        </div>
    </section>
</main>

scssをimport

なお、このページは見た目をLine風に近づけるためにscssをimportしています。そのためにapplication.scssにchat.scssをimportします。

app/asserts/stylesheets/application.scss

// Custom bootstrap variables must be set or imported *before* bootstrap.
@import "bootstrap";
@import "chat.scss";

app/asserts/stylesheets/chat.scss

// Place all the styles related to the chat controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/

.bg-submit {
    background: #996633
}

.bg-chat {
    background: #D8F3F0;
}

.bg-man-line {
    background: #FFFFFF;
}

.text-sex {
    color: #FFFFFF
}

.man-talk-contents::before {
    position: absolute;
    content: ' ';
    margin-top: 10px;
    z-index: -1;
    border-top: 10px solid transparent;
    border-right: 10px solid #FFFFFF;
    border-bottom: 10px solid transparent;
}

.man-talk-contents {
    word-wrap: break-word;
}

.bg-woman-line {
    background: #78FF6C;
}

.woman-talk-contents::before {
    content: ' ';
    z-index: -1;
    float: right;
    margin-top: 10px;
    border-top: 10px solid transparent;
    border-left: 10px solid #78FF6C;
    border-bottom: 10px solid transparent;
}

余談:三角をcssで作成する際はbeforeからborderを使って三角を作り出すことができます。詳細:CSSだけで三角形を作ろう！その1：borderプロパティの仕組みをマスター

ロゴ作成

余談ですが、簡易的にロゴを作成する場合は
アイコン_icooon-mono
なんかが楽に作成出来ます

バージョン

執筆時点でのバージョンです

サービス	バージョン
Bootstrap	v4.1.3

参照

Railsアプリで Bootstrap 4 を利用する
導入についてはほぼここのコピーです。ありがとうございます。

bootstrap-rubygemのリポジトリ
 アイコン_icooon-mono
CSSで三角を作る方法:CSSだけで三角形を作ろう！その1：borderプロパティの仕組みをマスター

【備忘録】RailsにBootstrap4を導入する手順(簡易ページによる例示あり)