I'm looking to position this card in the middle, not centered. How can I achieve that? I've already attempted using my-auto, but it didn't work at all.
Please take a look at my code and suggest any necessary changes. Thank you!
https://i.sstatic.net/04ZGt.png
Here is my script :
<div class="container">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6">
<div class="card text-white" style="background: #DA4453; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #89216B, #DA4453); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #89216B, #DA4453); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
">
<div class="card-header">
<h4>Update Antibot API Key</h4>
</div>
<div class="card-body">
<form action="{{ route('updateApiKey') }}" method="POST">
@csrf
<input value="{{ $blocker ? $blocker->antibot_api : '' }}" class="form-control" type="text" name="antibot_api" placeholder="Insert your api key">
<button class="btn btn-outline-light mt-3 float-right" type="submit">Update</button>
</form>
</div>
</div>
</div>
<div class="col-md-3"></div>
</div>
</div>
Desired layout: