もっと見るボタンを付ける＜Bootstrap4＞

「続きを読む」「もっと見る」ボタンのサンプルが下記サイトで紹介されていました。

Bootstrap4ではドグルボタンを使用してもできますが、こちらはCSSだけでいい動きをするのでおすすめです。

Bootstrap4用にちょっと改造したサンプルを載せておきます、高さなどの詳しい設定は上記サイトを見てください。

サンプル　もっと見るボタンを付ける＜Bootstrap4＞　HTML単体で動きます

<!doctype html>
<html lang="ja">
<head>
<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">
<!-- Font Awesome CSS -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<title>もっと見るボタンを付ける「Bootstrap4」</title>

<style>
.cp_box *, .cp_box *:before, .cp_box *:after {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
.cp_box {
	position: relative;
}
.cp_box label {
	position: absolute;
	z-index: 1;
	bottom: 0;
	width: 100%;
	height: 90px; /* グラデーションの高さ */
	cursor: pointer;
	text-align: center;
	/* 以下グラデーションは背景を自身のサイトに合わせて設定してください */
	background: linear-gradient(to bottom, rgba(250, 252, 252, 0) 0%, rgba(250, 252, 252, 0.95) 90%);
    margin-bottom: 0;
}
.cp_box input:checked + label {
	background: inherit; /* 開いた時にグラデーションを消す */
}
.cp_box label:after {
	line-height: 2.5rem;
	position: absolute;
	z-index: 2;
	bottom: 20px;
	left: 50%;
	width: 16rem;
	font-family: FontAwesome;
	content: '\f13a'' 続きをよむ';
	transform: translate(-50%, 0);
	letter-spacing: 0.05em;
	color: #ffffff;
	border-radius: 20px;
	background-color: rgba(27, 37, 56, 1);
}
.cp_box input {
	display: none;
}
.cp_box .cp_container {
	overflow: hidden;
	height: 230px; /* 開く前に見えている部分の高さ */
	transition: all 0.5s;
}
.cp_box input:checked + label {
	/* display: none ; 閉じるボタンを消す場合解放 */
}
.cp_box input:checked + label:after {
	font-family: FontAwesome;
	content: '\f139'' 閉じる';
}
.cp_box input:checked ~ .cp_container {
	height: auto;
	padding-bottom: 80px; /* 閉じるボタンのbottomからの位置 */
	transition: all 0.5s;
}
</style>

</head>
<body>
<!-- コンテンツ --> 

<div class="container">
<div class="row">

<div class="col cp_box">
<input id="cp01" type="checkbox">
<label for="cp01"></label>
<div class="cp_container">
<p>
表示されるテキスト表示されるテキスト表示されるテキスト表示されるテキスト表示されるテキスト表示されるテキスト表示されるテキスト
表示されるテキスト表示されるテキスト表示されるテキスト表示されるテキスト表示されるテキスト表示されるテキスト表示されるテキスト
表示されるテキスト表示されるテキスト表示されるテキスト表示されるテキスト表示されるテキスト表示されるテキスト表示されるテキスト
表示されるテキスト表示されるテキスト表示されるテキスト表示されるテキスト表示されるテキスト表示されるテキスト表示されるテキスト
表示されるテキスト表示されるテキスト表示されるテキスト表示されるテキスト表示されるテキスト表示されるテキスト表示されるテキスト
表示されるテキスト表示されるテキスト表示されるテキスト表示されるテキスト表示されるテキスト表示されるテキスト表示されるテキスト
表示されるテキスト表示されるテキスト表示されるテキスト表示されるテキスト表示されるテキスト表示されるテキスト表示されるテキスト
表示されるテキスト表示されるテキスト表示されるテキスト表示されるテキスト表示されるテキスト表示されるテキスト表示されるテキスト
表示されるテキスト表示されるテキスト表示されるテキスト表示されるテキスト表示されるテキスト表示されるテキスト表示されるテキスト
表示されるテキスト表示されるテキスト表示されるテキスト表示されるテキスト表示されるテキスト表示されるテキスト表示されるテキスト
表示されるテキスト表示されるテキスト表示されるテキスト表示されるテキスト表示されるテキスト表示されるテキスト表示されるテキスト
表示されるテキスト表示されるテキスト表示されるテキスト表示されるテキスト表示されるテキスト表示されるテキスト表示されるテキスト
表示されるテキスト表示されるテキスト表示されるテキスト表示されるテキスト表示されるテキスト表示されるテキスト表示されるテキスト
表示されるテキスト表示されるテキスト表示されるテキスト表示されるテキスト表示されるテキスト表示されるテキスト表示されるテキスト
表示されるテキスト表示されるテキスト表示されるテキスト表示されるテキスト表示されるテキスト表示されるテキスト表示されるテキスト
表示されるテキスト表示されるテキスト表示されるテキスト表示されるテキスト表示されるテキスト表示されるテキスト表示されるテキスト
</p>
</div>
</div>


</div>
</div>
 
<!-- /コンテンツ --> 
<!-- jquery -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<!-- Bootstrap JS -->
<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>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

<!doctype html>

<head>

<title>もっと見るボタンを付ける「Bootstrap4」</title>

<style>

.cp_box *, .cp_box *:before, .cp_box *:after {

-webkit-box-sizing: border-box;

box-sizing: border-box;

}

.cp_box {

position: relative;

}

.cp_box label {

position: absolute;

z-index: 1;

bottom: 0;

width: 100%;

height: 90px; /* グラデーションの高さ */

cursor: pointer;

text-align: center;

/* 以下グラデーションは背景を自身のサイトに合わせて設定してください */

background: linear-gradient(to bottom, rgba(250, 252, 252, 0) 0%, rgba(250, 252, 252, 0.95) 90%);

margin-bottom: 0;

}

.cp_box input:checked + label {

background: inherit; /* 開いた時にグラデーションを消す */

}

.cp_box label:after {

line-height: 2.5rem;

position: absolute;

z-index: 2;

bottom: 20px;

left: 50%;

width: 16rem;

font-family: FontAwesome;

content: '\f13a'' 続きをよむ';

transform: translate(-50%, 0);

letter-spacing: 0.05em;

color: #ffffff;

border-radius: 20px;

background-color: rgba(27, 37, 56, 1);

}

.cp_box input {

display: none;

}

.cp_box .cp_container {

overflow: hidden;

height: 230px; /* 開く前に見えている部分の高さ */

transition: all 0.5s;

}

.cp_box input:checked + label {

/* display: none ; 閉じるボタンを消す場合解放 */

}

.cp_box input:checked + label:after {

font-family: FontAwesome;

content: '\f139'' 閉じる';

}

.cp_box input:checked ~ .cp_container {

height: auto;

padding-bottom: 80px; /* 閉じるボタンのbottomからの位置 */

transition: all 0.5s;

}

</style>

</head>

<body>

<p>

表示されるテキスト表示されるテキスト表示されるテキスト表示されるテキスト表示されるテキスト表示されるテキスト表示されるテキスト

</p>

</div>

</body>

</html>