Trying to use Bootstrap to hold text within background - html

Question

<div class="container">
<div class="row">
<div class="col-lg-9">
<h2 style="font-family:times-new-roman">BIOGRAPHY</h2>
<div id="demo" class="collapse">
<p>
Albert Einstein (14 March 1879 – 18 April 1955) was a German-born theoretical physicist.[5] Einstein developed the theory of relativity, one of the two pillars of modern physics (alongside quantum mechanics).[4][6]:274 Einstein's work is also known for its influence on the philosophy of science.[7][8] Einstein is best known by the general public for his mass–energy equivalence formula E = mc2 (which has been dubbed "the world's most famous equation").
</p>
</div>
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo" style="color: black; background-color: transparent; border: none; font-color:black">
<br>
<div class="text-center">
<i class="fa fa-angle-double-down" style="font-size:36px;"></i>
</div>
</button>
</div>
<div class="col-lg-3">
</div>
</div>
</div>
I am trying to have this section in a website I'm creating. As you can see, I am using the Bootstrap grid system to make sure the text is only within a certain box. Problem is the text still fills the entire page so the Bootstrap doesn't seem to work. Maybe I'm not doing something right.

Answer 1

Have you included bootstrap 4 and fontawesome css files with jquery in header?
content is showing in bootstrap grid layout only. see my code below and fiddle and check the versions of bootstrap css and js files
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-lg-9">
<h2 style="font-family:times-new-roman">BIOGRAPHY</h2>
<div id="demo" class="collapse">
<p>
Albert Einstein (14 March 1879 – 18 April 1955) was a German-born theoretical physicist.[5] Einstein developed the theory of relativity, one of the two pillars of modern physics (alongside quantum mechanics).[4][6]:274 Einstein's work is also known for its influence on the philosophy of science.[7][8] Einstein is best known by the general public for his mass–energy equivalence formula E = mc2 (which has been dubbed "the world's most famous equation").
</p>
</div>
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo" style="color: black; background-color: transparent; border: none; font-color:black">
<br>
<div class="text-center">
<i class="fa fa-angle-double-down" style="font-size:36px;"></i>
</div>
</button>
</div>
<div class="col-lg-3">
</div>
</div>
</div>