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


Link to code : I know to center the code on the screen for all screen sizes you must use Bootstraps Grid System method.

Full screen size:

Half screen size:

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 class = "col-md-1">
				<i class="fa fa-paper-plane-o fa-3x" aria-hidden="true" id = "submit"></i>
		<ul class="collapsible popout" data-collapsible="accordion" id = "list"></ul>

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

Thanks for any help


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