-1

I have a container and, inside it, a card. I tried using justify-content-center,mx-auto and hardcoding css properties to bring the card to the center of the container, but I did not get the actual output.

Here is my html file

<div class="container bg-warning">
    <div class="row  mx-auto centermycard">
        <div class="card mx-auto ">
            <div class="card-title"><h2 class="text-center">Find Lyrics For Your Song</h2></div>
            <div class="card-body ">
                <div class="container">
                    @using (Html.BeginForm("FetchLyrics", "LandingPage", FormMethod.Get, Model))
                    {
                        @Html.ValidationSummary(true, "Please fix the below errors")

                        <div class="form-group">
                            @Html.LabelFor(model => model.songname, "I want a Song")
                            @Html.TextBoxFor(model => model.songname, new { @class = "form-control" })
                            @Html.ValidationMessageFor(m => m.songname)
                        </div>


                        <div class="form-group">
                            @Html.LabelFor(model => model.moviename, "From Movie")
                            @Html.TextBoxFor(model => model.moviename, new { @class = "form-control" })
                        </div>

                        <div class="form-group">
                            @Html.LabelFor(model => model.artist, "By Artist")
                            @Html.TextBoxFor(model => model.artist, new { @class = "form-control" })
                        </div>


                        <div class="form-group">
                            @Html.LabelFor(model => model.genre, "In genre")
                            @Html.TextBoxFor(model => model.genre, new { @class = "form-control" })
                        </div>

                        <div class="form-group">
                            <button class="btn btn-block btn-primary col-md-8 col-lg-8 text-center justify-content-center">Search</button>
                        </div>
                    }
                </div>
            </div>
        </div>
    </div>
</div>

centermycard css properties

.centermycard {
   margin:0 auto;
}

where did I miss?

The Head Rush
  • 3,157
  • 2
  • 25
  • 45
Harsha Gangari
  • 1
  • use align-items: center; or align-items-center to center vertically. and justify-content-center or justify-content: center; to center horizontally – Diwyansh Nov 15 '21 at 17:48
  • the card should be place inside a column inside the row and not directly in the row – Carol Skelly Nov 15 '21 at 17:49
  • the card should be place inside a column inside the row and not directly in the row – This worked... Hey, thanks for that – Harsha Gangari Nov 15 '21 at 17:53

1 Answers1

0

Adding the class mx-auto to just the card worked fine. JSFiddle

However, I don't understand why you're using a container within a card itself. You already have the entire thing enclosed in a container.

Siddharth Bhansali
  • 2,017
  • 2
  • 10
  • 19