How can I make the content of my page centered at any screen size?

1

Link to code : https://codepen.io/Ag_Yog/pen/ayJQgR. I know to center the code on the screen for all screen sizes you must use Bootstraps Grid System method.

Full screen size:
code

Half screen size:
code

I am trying to make the half screen size display centered below the button.

I tried doing this with the following code:

		<div align="center">
		<div class = "row">
			<div class = "col-md-11">
				<input type="text" id = "page" />
			</div>
			<div class = "col-md-1">
				<i class="fa fa-paper-plane-o fa-3x" aria-hidden="true" id = "submit"></i>
			</div>
		</div>
	
		<br/>
		<br/>
		<br/>
		<ul class="collapsible popout" data-collapsible="accordion" id = "list"></ul>
	</div>

Since I used the Grid system, shouldn’t the full screen and half screen images be the same?

Thanks for any help

2

Use the text-center class on the element you want to center.