We help IT Professionals succeed at work.
Get Started

How can I center this content?

Bruce Gust
Bruce Gust asked
Last Modified: 2019-12-30
This is coming from a Bootstrap template that apparently allows you to center some content, but it's not working for me and I don't know why.

Here's the way the page looks currently:

current login page
It doesn't look bad, but I want to center the content so it looks more like this:

new login
Here's the code that I've been wrestling with:

<div class="container">
			<div class="row justify-content-center">
				<div class="col-md-8 satellite_row">
				<h5>NOMAS<sup>&reg;</sup> International Admin Dashboard</h5>
				To login to the NOMAS<sup>&reg;</sup> International Admin Suite, enter your email and password below, then click on "login."
				if you run into any issues or questions, contact Bruce Gust at <a href="mailto:bruce@brucegust.com">bruce@brucegust.com</a>.
					<div class="card">
						<!--<div class="card-header">{{ __('Login') }}<br><br></div>-->
						<div class="card-body">
							<form method="POST" action="{{ route('login') }}">

								<div class="form-group row">
									<label for="email" class="col-md-4 col-form-label text-md-right">{{ __('E-Mail Address') }}</label>

									<div class="col-md-6">
										<input id="email" type="email" class="form-control @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" required autocomplete="email" autofocus>

											<span class="invalid-feedback" role="alert">
												<strong>{{ $message }}</strong>

								<div class="form-group row">
									<label for="password" class="col-md-4 col-form-label text-md-right">{{ __('Password') }}</label>

									<div class="col-md-6">
										<input id="password" type="password" class="form-control @error('password') is-invalid @enderror" name="password" required autocomplete="current-password">

											<span class="invalid-feedback" role="alert">
												<strong>{{ $message }}</strong>

								<div class="form-group row">
									<div class="col-md-6 offset-md-4">
										<div class="form-check">
											<input class="form-check-input" type="checkbox" name="remember" id="remember" {{ old('remember') ? 'checked' : '' }}>

											<label class="form-check-label" for="remember">
												{{ __('Remember Me') }}

								<div class="form-group row mb-0">
									<div class="col-md-8 offset-md-4">
										<button type="submit" class="btn btn-primary">
											{{ __('Login') }}

										@if (Route::has('password.request'))
											<a class="btn btn-link" href="{{ route('password.request') }}">
												{{ __('Forgot Your Password?') }}

Open in new window

The "snag" seems to be happening at link #7. If I understand what SHOULD be happening, "row justify-content-center" should take the content encased beginning on line #8 and center it, but it doesn't.

What am I missing?
Watch Question
Principal Software Engineer
This problem has been solved!
Unlock 1 Answer and 2 Comments.
See Answer
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE