4
Answers

How to make your input group horizontal?

Guest User

Guest User
4y
916
1
Hi team
 
Who can help me, i want first my register-box to have enough size to fit for my textbox. Also how can i create my input-group to be horizontal or align right? See my logic for more details, basically the form looks like this on UI.
 I want that textbox for First name and lastname be horizontal to each other with enough fit. I am struggling to achieve please assist mates.
 
 
 
  1. @using eNtsaRegistrationTraining.Models  
  2. @model EditTrainingRegFormViewModel  
  3.   
  4. @{  
  5.     ViewBag.Ttile = "Dashboard";  
  6.     Layout = "~/Views/Shared/_HomeLayout.cshtml";  
  7. }  
  8. <center>  
  9.     <div class="register-box ">  
  10.         <div class="register-logo">  
  11.   
  12.         </div>  
  13.   
  14.         <div class="card">  
  15.             <div class="card-body register-card-body">  
  16.                 <center>  
  17.                     <img src="~/Images/eNtsa.png" />  
  18.                 </center>  
  19.                 <center>  
  20.                     <p><b>Training Course Registration:Motion MasterClass</b></p>  
  21.                     <hr />  
  22.                     <p>Course date: 25-27 February 2020</p>  
  23.                     <hr />  
  24.                     <p>  
  25.                         Note:Please note your registration is submit approval as seats for this course is limited. Once your registration is confirmed, you will receive a quote for subject to your confirmation  
  26.                         followed by an invoice.  
  27.                     </p>  
  28.                 </center>  
  29.                 <hr />  
  30.                 @using (Html.BeginForm("editRegForm", "Home", FormMethod.Post, new { @role = "form" }))  
  31.                 {  
  32.                     @Html.AntiForgeryToken()  
  33.             <div class="row">  
  34.                 <label for="Title"> Title: </label>  
  35.                 <div class="input-group col-md-6 col-md-offset-8 col-sm-10 col-xs-10">  
  36.                     <div class="input-group pull-left">  
  37.                         @Html.TextBoxFor(m => m.Title, new { @class = "form-control", type = "text", id = "title", autofocus = "autofocus", placeholder = "Title", required = "required" })  
  38.                         <div class="input-group-append">  
  39.                             <div class="input-group-text">  
  40.                             </div>  
  41.                         </div>  
  42.                     </div>  
  43.                 </div>  
  44.             </div>  
  45.                     <hr />  
  46.                     <div class="row">  
  47.                         <label for="Name">Name:</label>  
  48.                         <div class="input-group col-md-6 col-md-offset-8 col-sm-10 col-xs-10">  
  49.                             <div class="input-group pull-left">  
  50.                                 @Html.TextBoxFor(m => m.FirstName, new { @class = "form-control", type = "text", id = "firstname", autofocus = "autofocus", placeholder = "First Name", required = "required" })  
  51.                                 <div class="input-group-append">  
  52.                                     <div class="input-group-text">  
  53.   
  54.                                     </div>  
  55.                                 </div>  
  56.                             </div>  
  57.                         </div>  
  58.                     </div>  
  59.   
  60.                     <hr/>  
  61.   
  62.                     <div class="row">  
  63.                      <label for="LastName">LastName:</label>  
  64.                       <div class="input-group col-md-6 col-md-offset-8 col-sm-10 col-xs-10">  
  65.                             <div class="input-group pull-left">  
  66.                                 @Html.TextBoxFor(m=>m.LastName, new {@class = "form-control", type="text", id="lastname", autofocus = "autofocus", placeholder = "Last Name", required = "required"})  
  67.                                 <div class="input-group-append">  
  68.                                     <div class="input-group-text">  
  69.   
  70.                                     </div>  
  71.                                 </div>  
  72.                             </div>  
  73.                         </div>  
  74.                     </div>  
  75.   
  76.                 }  
  77.             </div>  
  78.             </div>  
  79.         </div>  
  80. </center>  
  81.              
 
 
 
 
 
 
Answers (4)
Next Recommended Forum