Align a logo in the center of the Form

Question

Align a logo in the center of the Form

Asked 6 years, 1 month ago

Viewed 54 times

0

Hello.

I have a login form, only I need to align a logo to the center of this form, so that this alignment is responsive.

I know it has some forms, but what is the best way to make this alignment?

Currently this is my code, already with the image in the place and such.

<link rel="stylesheet" href="theme.css" type="text/css">
<div class="py-5" >
    <div class="container">            
        <div class="row">    
            <div class="p-5 col-lg-6">
                <img src="~/Content/img/br_negativa.png" style="height:100px" alt="SPARTAN"  />                 
                    <div class="col-md-10">
                        @Html.TextBoxFor(m => m.Email, new { @class = "form-control" })                          
                    </div>
                </div>
                    <div class="form-group">
                        @Html.LabelFor(m => m.Password, new { @class = "col-md-2 control-label" })                        
                    </div>                
            </div>
         </div>
     </div>
</div>

for community help you, first you have to help the community, provide more information on the question, example, edit the question and add the content that is within Theme.css, it is impossible to help you without knowing how this the formatting of the classes that already exists in the form.

– Vitor Hugo

2018/11/19 at 10:08
@Vitorhugo actually used the tags [twitter-bootstrap] and [bootstrap-4] that’s enough to know what it’s about... Until pq he is not using any tag other than the original Bootstrap and put the HTML code he is using... In my view the question is within the criteria to be answered. What renders on @Html. it is not necessary to know to be able to answer...

– hugocsl

2018/11/19 at 10:41

1 answer

Browser other questions tagged css twitter-bootstrap bootstrap-4

You are not signed in. Login or sign up in order to post.

by hugocsl • **65,517** points · Answer 1 · 2018-11-19T10:38:08+00:00

I found a little strange the structure made in HTML with Bootstrap Grid. But roughly speaking what you need to align the image is to create a new column, which occupies 100% of the width, which in case will be the col-12 and place within it the image. In this col-12 you also use the class text-center to align the image in the center of the screen.

See how the result looks

<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />

    <div class="p-5">
        <div class="container">
            <div class="row p-5">
                <div class="col-12 text-center">
                    <img src="https://placecage.com/100/100" style="height:100px" alt="SPARTAN" />
                </div>
                <div class="p-5 col-lg-6">
                    <div class="col-md-10">
                        @Html.TextBoxFor(m => m.Email, new { @class = "form-control" })
                    </div>
                </div>
                <div class="form-group">
                    @Html.LabelFor(m => m.Password, new { @class = "col-md-2 control-label" })
                </div>
            </div>
        </div>
    </div>