<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 -->