Bootstrap Styling is not working as expected-CodePudding

In my current ASP.Net core I am trying to do the boot strap styling for search component on the page. I want the UI to look like

where the label/input box and the Search button to appear in the middle of the screen and the Create New To show in the same row but to appear right side of the screen

I have tried like below

<div class="center">
    <form asp-action="Index" method="get">
        <div class="row">
            <div class="col-lg-12">
                <div class="row mb-3">
                    <div class="col-lg-4 col-md-2 form-check-inline mr-0">
                        <label class="col-auto" for="holiday"> Find by Holiday </label>
                        <input type="text" class="form-control" name="SearchString" value="@ViewData["CurrentFilter"]" />
                    </div>
                    <div class="col-lg-4 col-md-2  form-check-inline mr-0">
                        <input type="submit" value="Search" class="btn btn-info" />
                        <a class="btn btn-link" asp-action="Index">Back to Full List</a>
                    </div>
                    <div class="col-lg-4 col-md-2  form-check-inline mr-0" style="text-align:right">
                        <a class="btn btn-info" asp-action="Create">Create New</a>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

And the UI shows up like below

Can anyone help say what is that I am missing why all the things appear so close, I tried adding the style="text-align:right" so the Create new will appear towards the right

***** EDIT *****

<style type="text/css">
    .center {
        margin: auto;
        width: 100%;
    }
</style>

<div class="center">
    <form asp-action="Index" method="get">
        <div class="row">
            <div class="col-lg-12">
                <div class="row mb-5">
                    <div class="col-lg-8 col-md-6  form-check-inline mr-0" style="justify-content: center;">
                        <label class="col-auto" for="holiday"> Find Holiday </label>
                        <input type="text" class="form-control" name="SearchString" value="@ViewData["CurrentFilter"]" />
                        <input type="submit" value="Search" class="btn btn-info" />
                        <a class="btn btn-link" asp-action="Index">Back to Full List</a>
                    </div>
                    <div class="col-lg-3 col-md-4  ml-auto form-check-inline mr-0 " style="justify-content: end;">
                        <a class="btn btn-info" asp-action="Create">Create New</a>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

CodePudding user response：

try adding ml-auto on the 'Create New' button

CodePudding user response：

My first guess is caused by your class 'col-md-2'. You can change all of 'col-md-2' to 'col-md-4' to test.