<div class="row">
<div class="col-xs-12">
<a class="c-bt-1--red" href="#">メッセージ</a>
</div>
</div>
<!-- //end:.row -->
<div class="row">
<div class="col-xs-12">
<a class="c-bt-1__back--red" href="#">メッセージ</a>
</div>
</div>
<!-- //end:.row -->
<div class="row">
<div class="col-xs-12">
<a class="c-bt-1--yellow" href="#">メッセージ</a>
</div>
</div>
<!-- //end:.row -->
<div class="row">
<div class="col-xs-12">
<a class="c-bt-1__back--yellow" href="#">メッセージ</a>
</div>
</div>
<!-- //end:.row -->
<div class="row">
<div class="col-xs-12">
<a class="c-bt-1--green" href="#">メッセージ</a>
</div>
</div>
<!-- //end:.row -->
<div class="row">
<div class="col-xs-12">
<a class="c-bt-1__back--green" href="#">メッセージ</a>
</div>
</div>
<!-- //end:.row -->
<div class="row">
<div class="col-xs-12">
<a class="c-bt-1--blue" href="#">メッセージ</a>
</div>
</div>
<!-- //end:.row -->
<div class="row">
<div class="col-xs-12">
<a class="c-bt-1__back--blue" href="#">メッセージ</a>
</div>
</div>
<!-- //end:.row -->
<div class="row">
<div class="col-xs-12">
<a class="c-bt-1--purple" href="#">メッセージ</a>
</div>
</div>
<!-- //end:.row -->
<div class="row">
<div class="col-xs-12">
<a class="c-bt-1__back--purple" href="#">メッセージ</a>
</div>
</div>
<!-- //end:.row -->
<div class="row">
<div class="col-xs-12">
<a class="c-bt-1--gray" href="#">メッセージ</a>
</div>
</div>
<!-- //end:.row -->
<div class="row">
<div class="col-xs-12">
<a class="c-bt-1__back--gray" href="#">メッセージ</a>
</div>
</div>
<!-- //end:.row -->
ボタンのテキストを中央揃えにする u-txtcenter を追記します。
<div class="row">
<div class="col-xs-12">
<a class="c-bt-1--red u-txtcenter" href="#">メッセージ</a>
</div>
</div>
<!-- //end:.row -->
<div class="row">
<div class="col-xs-12">
<a class="c-bt-1__back--red u-txtcenter" href="#">メッセージ</a>
</div>
</div>
<!-- //end:.row -->
<div class="row">
<div class="col-xs-4">
<a class="c-bt-1__back--gray u-txtcenter" href="#">前の記事へ</a>
</div>
<div class="col-xs-4">
<a class="c-bt-1__noarrow--gray u-txtcenter" href="#">一覧へ戻る</a>
</div>
<div class="col-xs-4">
<a class="c-bt-1__after--gray u-txtcenter" href="#">次の記事へ</a>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<a class="c-bt-1__back--gray u-txtleft" href="#">前の記事へ</a>
</div>
<div class="col-xs-4">
<a class="c-bt-1__noarrow--gray u-txtcenter" href="#">一覧へ戻る</a>
</div>
<div class="col-xs-4">
<a class="c-bt-1__after--gray u-txtright" href="#">次の記事へ</a>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<ul class="c-navmenu">
<li class="c-nav-1--red"><a href="#">こだわり1</a></li>
<li class="c-nav-1--yellow"><a href="#">こだわり1</a></li>
<li class="c-nav-1--green"><a href="#">こだわり1</a></li>
<li class="c-nav-1--blue"><a href="#">こだわり1</a></li>
<li class="c-nav-1--purple"><a href="#">こだわり1</a></li>
</ul>
</div>
</div>
<!-- //end:.row -->
class名を揃え色を統一することも可能です。
<div class="row">
<div class="col-xs-12">
<ul class="c-navmenu">
<li class="c-nav-1--blue"><a href="#">こだわり1</a></li>
<li class="c-nav-1--blue"><a href="#">こだわり1</a></li>
<li class="c-nav-1--blue"><a href="#">こだわり1</a></li>
<li class="c-nav-1--blue"><a href="#">こだわり1</a></li>
<li class="c-nav-1--blue"><a href="#">こだわり1</a></li>
</ul>
</div>
</div>
<!-- //end:.row -->
はじめて購入するときって、何もわからないから心配ですよね。
自動車は、かんたんに支払える買い物ではないですし、中古商品だとなおさら不安も大きいかと思います。
<div class="row">
<div class="col-xs-12">
<div class="c-article-1">
<p>はじめて購入するときって、何もわからないから心配ですよね。<br>
自動車は、かんたんに支払える買い物ではないですし、中古商品だとなおさら不安も大きいかと思います。</p>
<p><a class="c-link-1" href="#">詳細はこちらから</a></p>
</div>
</div>
</div>
<!-- //end:.row -->
はじめて購入するときって、何もわからないから心配ですよね。
自動車は、かんたんに支払える買い物ではないですし、中古商品だとなおさら不安も大きいかと思います。
詳しくはこちらをご覧ください。
<div class="row">
<div class="col-xs-12">
<div class="c-article-1">
<p>はじめて購入するときって、何もわからないから心配ですよね。<br>
自動車は、かんたんに支払える買い物ではないですし、中古商品だとなおさら不安も大きいかと思います。<br>
詳しくは<a class="c-link-2" href="#">こちら</a>をご覧ください。</p>
</div>
</div>
</div>
<!-- //end:.row -->