Bootstrap Styling is not working as expected

Question

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 *****

Answer 1

You could try this way to implement accordingly as per your expectations like below:

Asp.net Submit Form With CSS

<div class="center">
    <form asp-action="Index" method="get">
        <div class="row">
            <div class="col-md-12">
                <div class="col-md-2">
                    <label class="col-auto" for="holiday" style="margin-top:10px;"> Find by Holiday </label>
                </div>
                <div class="col-md-3" style="margin-left: -50px;" >
                    <input type="text" class="form-control" name="SearchString" value="@ViewData["CurrentFilter"]" />
                </div>
                <div class="col-md-1">
                    <input type="submit" value="Search" class="btn btn-info" />
                </div>
                <div class="col-md-3">
                    <a class="btn btn-link" asp-action="Index">Back to Full List</a>
                </div>
                <div class="col-md-2">
                    <a class="btn btn-info" asp-action="Create">Create New</a>
                </div>
                <div class="col-md-1"></div>
            </div>
        </div>
    </form>
</div>

Output

Note: You could set your CSS in different class file. I have shown you how could you achieve that using inline CSS snippet. You could use separate file as well. But this is the right and convenient way to do what you are trying to.

Answer 2

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

Answer 3

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.