私的見解

カスタム用のスタイルシートを bootstrap-custom.css として少し変更しているので違いが有りますが、下のように基本的に余白が有りません。

こういったものは入れ子にしたりラベル系にしたりでで余白を作る事になります。

H2

          
H2
          
H2
          
labelで表現
      

正直なとこ面倒くさいです

学習が足りないとかそういう事じゃなく、色んなものを入れ子にしたり加えたり、無理をして表現しているものが少なく有りません。

なので、こんなスタイルを自分用のCSSに書いてしまいます。

class="bg-primary padding12"

class="bg-primary padding8"

      
 class="bg-primary padding12" 
      
 class="bg-primary padding8" 
      

明確で解りやすいです。

フォームの方で少し書きましたが、幅の狭いボックスを作るとき、グリッドシステムで書く事になります。或いはインライン。

    

      

        
col-sm-3
      
    
      

幅指定されるデザインもあるんです。

そもそもBootstrapを使う場合は、Bootstrapを理解しているデザイナーさんがデザインしないとダメなのだと思われます。

しかし、実際の現場ではスタイルシート？何それ美味しいの？って言うDTP畑のデザイナーさんが入稿してくることもしばしば。

それ無理っくり自分でCSS書いてレスポンシブにするんですが、正直つらい

こうしてしまう

ちゃんとレスポンシブになります。

class="bg-primary myWidth400px"

  .myWidth400px{
    width: 400px;
  }
  @media screen and (min-width:320px) and (max-width: 959px){
    .myWidth400px{
      width: 100%;
    }
  }
          

幅に関しては、たくさん指定するのは非効率ですが、例えばサイドバーとメインだけはどうしても幅を固定化しないとならない、12の法則で対応出来ないなどの場合は有効だと思います。

以前、とあるホームページのデザインを持ち込まれ、Bootstrapを使ってレスポンシブにコーディングして欲しいと依頼されました。

エンドユーザーは「これ使うと簡単に出来るから安くなるんでしょ？」との弁。

Bootstrapを紹介するサイトの「初心者でも簡単に！」とか「HTMLの知識が無くとも！」とか、そういう紹介は問題があると思います。

Bootstrapをテンプレで作るなら簡単でしょうが、それを理解していない方がデザインしたものをBootstrapで作れと言われても無理です。

無理というより、どうにかしようとグリッドデザインで悩むよりも、自分でコード書いた方が数倍早いです。

決してBootstrapを貶めるつもりは有りませんが、Bootstrapの規則に則ったデザインを提案せずに、いつもどおりのデザインを描いてBootstrapでコーディングして欲しいと言われても、余計な工数が掛かってしまいます。

Bootstrapは選択肢の1つであり、全てのホームページ制作の現場がBootstrap主流になる訳ではないのだと理解した方が良いと思います。