Center Text with Bootstrap not working for my h2 text

1 
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">


<style>
#first-image-page{
Background-image: url("https://cdn.pixabay.com/photo/2017/08/31/11/39/iceland-2700427_960_720.jpg");
width: 100%;
height: 100%;

}

.blue-background{
Background-color: blue;
width:100%;
height:100%;
}

.black-border{
border-clock:black;
border-style:solid;
border-width:1px;
width:100%;
height:100%;
}
</style>

<div class="container-fluid">
<h2 class="text-center" style="font-family:Gerbana; font-size:50px;" >Welcome to my website </h2>
<div ID="first-image-page"  class="img-responsive" >
	
	<p> This website is so cool as it is my first website, I noticed people do this a lot. I can't afford to carry last sha </p>
</div>

<div class="blue-background">
	<form action ="https://docs.google.com/spreadsheets/d/1l22MpLlUHCLVtkf9qsyr5dJhH5MSPvq4nnAYDPiCexA/edit?usp=sharing">
	<p><label>
		<input type="radio" name="yes-no">yes
		</label>
	<p><label>
		<input type="radio" name="yes-no">no
		</label>
	<button type="submit"> submit </button>
</div>

<div class="black-border">
<h1> Welcome to my website </h1>

<p> This website is so cool as it is my first website, I noticed people do this a lot. I can't afford to carry last sha </p>
</div>
</div>
3

The class ‘text-center’ should be added on the container, try adding it to your ‘container-fluid’ div instead.

1 Like