1. 基本の２カラム
<div class="bg-light">
<main role="main" class="container" style="padding: 0px">
<div class="row ">
<div class="col-md-8 bg-success"><!-- cod-8 メイン・セクション開始 -->
<h1> <p class ='text-center'>◇Col-md-8</p></h1>
<div class="content-section">
<h1> <p class ='text-center'>content-section</p></h1>
</div>
one, two, three, 1,2,3,one, two, three, 1,2,3,one, two, three, 1,2,3,one, two, three, 1,2,3,one, two, three, 1,2,3,one, two, three, 1,2,3,one, two, three, 1,2,3,one, two, three, 1,2,3,one, two, three,
<div class="content-section">
one, two, three, 1,2,3,one, two, three, 1,2,3,one, two, three, 1,2,3,one, two, three, 1,2,3,one, two, three, 1,2,3,one, two, three, 1,2,3,one, two, three, 1,2,3,one, two, three, 1,2,3,one, two, three,
</div>
</div>
<div class="col-md-4 bg-warning">
<ul class="list-group">
<li class="list-group-item list-group-item-light">Latest Posts</li>
<li class="list-group-item list-group-item-light">Announcements</li>
</ul>
</div><!-- col-md-4 終了-->
</div><!-- Div row 終了-->
</main>
</div>
COL間にmarginは設定されていないことに注意。
・Bootstrap4 のカラム間のマージン（余白・ガター）は、paddingで指定されている。
デフォルトでは、左右15px
.col-md-4{
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
これを変更するのは、独自のCSSでClassを作成し、適用する。
(my_gutterで挟まれたcol-md-4クラスの左右のpaddingは、7px)
.my_gutter .col-md-4 { padding: 0 7px;}
例）
<div class="row my_gutter">
<div class="col-md-4">
sample text etc.
</div>
</div>
汎用的に、
.row-10{ margin-left:-5px; margin-right:-5px}
.row-10 >div{ padding-right:5px; padding-left:5px}
という書き方もできる。
https://tonari-it.com/column-margin-control/
Bootstrapで作る、シンプルな２カラム・レイアウトの例です。
コード：
<!DOCTYPE html>
<head>
<!-- Required Meta Tag -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 2 Colomun Template</title>
<!-- From Bootstrap CDN Link -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<style>
.navbar{
margin-bottom:0;
border-radius:0;
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Bootstrap CheatSheet</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<!-- JUMBOTRON -->
<div class="jumbotron text-center">
<div class="container">
<h1>Welcome To My Website</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor</p>
<a href="#" class="btn btn-primary">Read More</a>
</div>
</div>
あいうえお
<h1> Hello World h1 </h1>
<h3> Hello World h3 </h3>
<h6> Hello World h1 </h6>
<p> Hello World h1 <p>
<div class="Container"> <!--main 開始---->
<h1>PC画面用(lg)の時は２分割する</h1>
<div class="row">
<div class="col-lg-8 skyblue"> <!-- 次例 col-sm-9 も参照 -->
1 (8/12)
<ul>
<li>1. Main Content</li>
<li>2. Main Content</li>
<li>3. Main Content</li>
<li>4. Main Content</li>
</ul>
</div>
<div class="col-lg-4 pink>
1 (4/12)
<div class="panel panel-default">
<ul>
<li>1. Side Content</li>
<li>2. Side Content</li>
<li>3. Side Content</li>
<li>4. Side Content</li>
</ul>
</div>
</div>
</div>
</div> <!--Container Main 終了-->
<div class="Container"><!--Container Footer 開始---->
Footer Area
</div><!--Container Footer 終了---->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
<head>
<!-- Required Meta Tag -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 2 Colomun Template</title>
<!-- From Bootstrap CDN Link -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<style>
.navbar{
margin-bottom:0;
border-radius:0;
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Bootstrap CheatSheet</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<!-- JUMBOTRON -->
<div class="jumbotron text-center">
<div class="container">
<h1>Welcome To My Website</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor</p>
<a href="#" class="btn btn-primary">Read More</a>
</div>
</div>
あいうえお
<h1> Hello World h1 </h1>
<h3> Hello World h3 </h3>
<h6> Hello World h1 </h6>
<p> Hello World h1 <p>
<div class="Container"> <!--main 開始---->
<h1>PC画面用(lg)の時は２分割する</h1>
<div class="row">
<div class="col-lg-8 skyblue"> <!-- 次例 col-sm-9 も参照 -->
1 (8/12)
<ul>
<li>1. Main Content</li>
<li>2. Main Content</li>
<li>3. Main Content</li>
<li>4. Main Content</li>
</ul>
</div>
<div class="col-lg-4 pink>
1 (4/12)
<div class="panel panel-default">
<ul>
<li>1. Side Content</li>
<li>2. Side Content</li>
<li>3. Side Content</li>
<li>4. Side Content</li>
</ul>
</div>
</div>
</div>
</div> <!--Container Main 終了-->
<div class="Container"><!--Container Footer 開始---->
Footer Area
</div><!--Container Footer 終了---->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
このフォーマットも良い。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Simple Two Columns</title>
<!-- Bootstrap -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- ナビゲーション -->
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">ブログ</a>
</div><!--/.navbar-header -->
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">
<a href="#">
<span class="glyphicon glyphicon-home"></span> Home
</a>
</li>
<li>
<a href="#">
<span class="glyphicon glyphicon-heart"></span> Mail
</a>
</li>
</ul>
<form action="" class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" id="quick-text" name="quick-text" class="form-control">
</div>
<button type="submit" class="btn btn-default">検索</button>
</form>
</div><!--/.nav-collapse -->
</div><!-- /.container -->
</nav><!-- ナビゲーション終わり -->
<div class="container">
<div class="row">
<!-- メイン記事 -->
<!--- Extra Small(Phones (<768px)) で12 Columns、
Small Device(Tablets (≥768px) )以上で9-Columns使用->
<div class="col-xs-12 col-sm-9"> <!-- サイドバーとの整合性用-->
<div class="panel panel-primary">
<div class="panel-heading">
<h2 class="panel-title">Main Contents</h2>
</div>
<div class="panel-body">
<div class="row">
<div class="col-xs-12 col-sm-6">
<img src="http://www.mossymob.net/media/Youtube-channel-300x215.png" class="img-responsive">
</div>
<div class="col-xs-12 col-sm-6">
<p class="text-primary">カテゴリ名など</p>
<p class="text-primary">時間など</p>
<p class="text-primary">コメント数など</p>
<p class="text-primary">aaa</p>
<hr>
<a href="http://mossymob.net/blog/" target="_blank"" class="btn btn-primary btn-block btn-lg">Continue to read</a>
</div>
</div> <!-- "row" 終了 -->
</div> <!-- "panel-body" 終了 -->
</div><!-- "panel panel-primary" 終了 -->
</div><!-- メイン記事終わり -->
<!-- サイドバー -->
<div class="col-xs-12 col-sm-3">
<!-- リンク -->
<ul class="list-group">
<li class="list-group-item active text-center">Link </li>
<li class="list-group-item">
<a href="http://mossymob.net/blog/" target="_blank">リンクA</a>
</li>
<li class="list-group-item">
<a href="#">リンクB</a>
</li>
</ul><!-- リンク終わり -->
<!-- カテゴリー -->
<ul class="list-group">
<li class="list-group-item active text-center">カテゴリー </li>
<li class="list-group-item">
<a href="#">メインカテゴリ </a>
<a class="pull-right" href="#sub1" data-toggle="collapse">
<span class="caret"></span>
</a>
</li>
<div class="collapse" id="sub1">
<a href="#" class="list-group-item">sub Category</a>
<a href="#" class="list-group-item">sub Category</a>
<a href="#" class="list-group-item">sub Category</a>
</div>
</ul><!-- カテゴリー終わり -->
</div><!-- サイドバー終わり -->
</div><!-- /.row -->
</div><!-- /.container -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Simple Two Columns</title>
<!-- Bootstrap -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- ナビゲーション -->
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">ブログ</a>
</div><!--/.navbar-header -->
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">
<a href="#">
<span class="glyphicon glyphicon-home"></span> Home
</a>
</li>
<li>
<a href="#">
<span class="glyphicon glyphicon-heart"></span> Mail
</a>
</li>
</ul>
<form action="" class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" id="quick-text" name="quick-text" class="form-control">
</div>
<button type="submit" class="btn btn-default">検索</button>
</form>
</div><!--/.nav-collapse -->
</div><!-- /.container -->
</nav><!-- ナビゲーション終わり -->
<div class="container">
<div class="row">
<!-- メイン記事 -->
<!--- Extra Small(Phones (<768px)) で12 Columns、
Small Device(Tablets (≥768px) )以上で9-Columns使用->
<div class="col-xs-12 col-sm-9"> <!-- サイドバーとの整合性用-->
<div class="panel panel-primary">
<div class="panel-heading">
<h2 class="panel-title">Main Contents</h2>
</div>
<div class="panel-body">
<div class="row">
<div class="col-xs-12 col-sm-6">
<img src="http://www.mossymob.net/media/Youtube-channel-300x215.png" class="img-responsive">
</div>
<div class="col-xs-12 col-sm-6">
<p class="text-primary">カテゴリ名など</p>
<p class="text-primary">時間など</p>
<p class="text-primary">コメント数など</p>
<p class="text-primary">aaa</p>
<hr>
<a href="http://mossymob.net/blog/" target="_blank"" class="btn btn-primary btn-block btn-lg">Continue to read</a>
</div>
</div> <!-- "row" 終了 -->
</div> <!-- "panel-body" 終了 -->
</div><!-- "panel panel-primary" 終了 -->
</div><!-- メイン記事終わり -->
<!-- サイドバー -->
<div class="col-xs-12 col-sm-3">
<!-- リンク -->
<ul class="list-group">
<li class="list-group-item active text-center">Link </li>
<li class="list-group-item">
<a href="http://mossymob.net/blog/" target="_blank">リンクA</a>
</li>
<li class="list-group-item">
<a href="#">リンクB</a>
</li>
</ul><!-- リンク終わり -->
<!-- カテゴリー -->
<ul class="list-group">
<li class="list-group-item active text-center">カテゴリー </li>
<li class="list-group-item">
<a href="#">メインカテゴリ </a>
<a class="pull-right" href="#sub1" data-toggle="collapse">
<span class="caret"></span>
</a>
</li>
<div class="collapse" id="sub1">
<a href="#" class="list-group-item">sub Category</a>
<a href="#" class="list-group-item">sub Category</a>
<a href="#" class="list-group-item">sub Category</a>
</div>
</ul><!-- カテゴリー終わり -->
</div><!-- サイドバー終わり -->
</div><!-- /.row -->
</div><!-- /.container -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>
(Output)
**Snippet Folder
<!DOCTYPE html>
<html><head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='main.css') }}">
{% if title %}
<title>Flask Blog - {{ title }}</title>{% else %}
<title>Flask Blog</title>
{% endif %}
</head>
<header class="site-header">
<nav class="navbar navbar-expand-md navbar-dark bg-steel fixed-top">
<div class="container">
<a class="navbar-brand mr-4" href="/">Flask Blog</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggle" aria-controls="navbarToggle" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarToggle">
<div class="navbar-nav mr-auto">
<a class="nav-item nav-link" href="/">Home</a>
<a class="nav-item nav-link" href="/about">About</a>
</div>
<!-- Navbar Right Side -->
<div class="navbar-nav">
<a class="nav-item nav-link" href="/login">Login</a>
<a class="nav-item nav-link" href="/register">Register</a>
</div>
</div>
</div>
</nav>
</header>
<main role="main" class="container">
<div class="row">
<div class="col-md-8">
{% block content %}{% endblock %}
</div>
<div class="col-md-4">
<div class="content-section">
<h3>Our Sidebar</h3>
<p class='text-muted'>You can put any information here you'd like.
<ul class="list-group">
<li class="list-group-item list-group-item-light">Latest Posts</li>
<li class="list-group-item list-group-item-light">Announcements</li>
<li class="list-group-item list-group-item-light">Calendars</li>
<li class="list-group-item list-group-item-light">etc</li>
</ul>
</p>
</div>
</div>
</div>
</main>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
CSS
body {
background: #fafafa;color: #333333;
margin-top: 5rem;
}
h1, h2, h3, h4, h5, h6 {
color: #444444;}
.bg-steel {
background-color: #5f788a;}
.site-header .navbar-nav .nav-link {
color: #cbd5db;}
.site-header .navbar-nav .nav-link:hover {
color: #ffffff;}
.site-header .navbar-nav .nav-link.active {
font-weight: 500;}
.content-section {
background: #ffffff;padding: 10px 20px;
border: 1px solid #dddddd;
border-radius: 3px;
margin-bottom: 20px;
}
.article-title {
color: #444444;}
a.article-title:hover {
color: #428bca;text-decoration: none;
}
.article-content {
white-space: pre-line;}
.article-img {
height: 65px;width: 65px;
margin-right: 16px;
}
.article-metadata {
padding-bottom: 1px;margin-bottom: 4px;
border-bottom: 1px solid #e3e3e3
}
.article-metadata a:hover {
color: #333;text-decoration: none;
}
.article-svg {
width: 25px;height: 25px;
vertical-align: middle;
}
.account-img {
height: 125px;width: 125px;
margin-right: 20px;
margin-bottom: 16px;
}
.account-heading {
font-size: 2.5rem;}
