Search code examples
htmlcssfrontend

How can I insert a form upload img in col-4 by longitudinal

I try to put a form upload imgage for user img example

But when I put the form its turn to be like this [img]. Code:

                <dl class="row">
                    <dt class="col-sm-4">Profile Detail:</dt>
                    <md-card-content>
                        <div class="user" >
                            <img src="https://lh3.googleusercontent.com/-W2XryVdi-lA/U6tSAh3SsbI/AAAAAAAAFGY/ZHJiUEcR_Zs/w480-h480/avatar%2Bmaterial%2Bdesign.png" alt="user avatar" class="user-avatar" />
                            <md-button class="md-icon-button user-avatar-edit" ng-click="browserAvatar()">
                                <md-icon>photo_camera</md-icon>
                            </md-button>
                        </div>
                    </md-card-content>
                    <dd class="col-sm-8">
                        <dl class="row">
                            <dt class="col-sm-6">@Html.DisplayNameFor(m => Model.profile.UserName)</dt>
                            <dd class="col-sm-6">@Html.DisplayFor(m => Model.profile.UserName)</dd>
                        </dl>
                        <dl class="row">
                            <dt class="col-sm-6">@Html.DisplayNameFor(m => Model.profile.UserEmail)</dt>
                            <dd class="col-sm-6">@Html.DisplayFor(m => Model.profile.UserEmail)</dd>
                        </dl>
                        <dl class="row">
                            <dt class="col-sm-6">@Html.DisplayNameFor(m => Model.profile.PhoneNumber)</dt>
                            <dd class="col-sm-6">@Html.DisplayFor(m => Model.profile.PhoneNumber)</dd>
                        </dl>
                        <dl class="row">
                            <dt class="col-sm-6">@Html.DisplayNameFor(m => Model.profile.HomeAdress)</dt>
                            <dd class="col-sm-6">@Html.DisplayFor(m => Model.profile.HomeAdress)</dd>
                        </dl>
                        <dl class="row">
                            <dt class="col-sm-6">@Html.DisplayNameFor(m => Model.profile.BirthDate)</dt>
                            <dd class="col-sm-6">@Html.DisplayFor(m => Model.profile.BirthDate)</dd>
                        </dl>
                        <a asp-action="EditProfile" class="btn btn-primary btn-sm">Edit</a>
                    </dd>
                </dl>

Is there anyway the place to upload images vertically like is this space : enter image description here

Solution

  • Try this way

    <dl class="row">
     <dt class="col-sm-4">
       Profile Detail:
       <md-card-content>
         <div class="user text-center">
           <img src="https://lh3.googleusercontent.com/-W2XryVdi-lA/U6tSAh3SsbI/AAAAAAAAFGY/ZHJiUEcR_Zs/w480-h480/avatar%2Bmaterial%2Bdesign.png" alt="user avatar" class="user-avatar" />
           <md-button class="md-icon-button user-avatar-edit" ng-click="browserAvatar()">
             <md-icon class="text-center">photo_camera</md-icon>
           </md-button>
         </div>
       </md-card-content>
     </dt>

     <dd class="col-sm-8">
       <dl class="row">
         <dt class="col-sm-6">@Html.DisplayNameFor(m => Model.profile.UserName)</dt>
         <dd class="col-sm-6">@Html.DisplayFor(m => Model.profile.UserName)</dd>
       </dl>
       <dl class="row">
         <dt class="col-sm-6">@Html.DisplayNameFor(m => Model.profile.UserEmail)</dt>
         <dd class="col-sm-6">@Html.DisplayFor(m => Model.profile.UserEmail)</dd>
       </dl>
       <dl class="row">
         <dt class="col-sm-6">@Html.DisplayNameFor(m => Model.profile.PhoneNumber)</dt>
         <dd class="col-sm-6">@Html.DisplayFor(m => Model.profile.PhoneNumber)</dd>
       </dl>
       <dl class="row">
         <dt class="col-sm-6">@Html.DisplayNameFor(m => Model.profile.HomeAdress)</dt>
         <dd class="col-sm-6">@Html.DisplayFor(m => Model.profile.HomeAdress)</dd>
       </dl>
       <dl class="row">
         <dt class="col-sm-6">@Html.DisplayNameFor(m => Model.profile.BirthDate)</dt>
         <dd class="col-sm-6">@Html.DisplayFor(m => Model.profile.BirthDate)</dd>
       </dl>
       <a asp-action="EditProfile" class="btn btn-primary btn-sm">Edit</a>
     </dd>

    Adjust other css as per requirement