CODEWITHSUNDEEP
htmlcssasp.net-mvctwitter-bootstrap
David Brunelle
David Brunelle

Reputation: 6450

Making a well formated responsive form with Boostrap

I am fairly new in CSS in general, so please be forgiving. I am trying to make a form with ASP.Net MVC (with Razor) that would look like this :

enter image description here

This old form was made in the past with numerous table, tr, td ,p and br tags, with fixed width, so the end result was exactly as expected, but only for a screen of a certain size. The end result in anything except a screen of more then 1024x768 is pretty bad since the user has to do a lot of scrolling, both vertically and horizontally.

What I would like to do is to replicate this visual on big screen, but in a responsive way, meaning it will line up differently on a tablet or a phone. I am using ASP.net with MVC 5 and the bootstrap css. However, I am having trouble replicating the layout (Label on top, control below it).

So my question is this : What it a rough html for this (with bootstrap css). Can anybody recommend a good tutorial on bootstrap and css in general ? I know there are a lot, but which one are actually goods ?

Thanks,

Upvotes: 1

Views: 711

Answers (2)

Shidersz
Shidersz

Reputation: 17190

Alternatively (and also) with Bootstrap, you can use the grid system, this is based on row and col-* classes. Check the next example:

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<div class="container-fluid">

  <div class="row">
    <div class="col-6">
      <label class="font-italic" for="reference">
        Référence
        <br>
        <small class="text-muted">Votre número de contrat ou le nom de famille</small>
      </label>          
      <input class="form-control" id="reference" type="text"/>
    </div>
  </div>
  
  <div class="row">  
    <div class="col-6">
      <label class="font-italic" for="enterprise">Enterprise *</label>
      <input class="form-control" id="enterprise" type="text"/>
    </div>
  </div>

  <div class="row">        
    <div class="col-6">
      <label class="font-italic" for="address1">Adresse *</label>
      <input class="form-control" id="address1" type="text" />
    </div>        
    <div class="col-6">
      <label class="font-italic" for="address2">Adresse</label>
      <input class="form-control" id="address2" type="text" />
    </div>
  </div>

</div>

Upvotes: 2

Iskandar Reza
Iskandar Reza

Reputation: 962

Bootstrap classes are the way to go. The documentation is good enough, really. It's very easy to pick up and incredibly easy to write. Your example in Bootstrap 4 classes:

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css" rel="stylesheet"/>

<div class="d-flex flex-column">
	<div class="w-50 d-flex flex-column pb-1">
		<label class="font-italic" for="reference">Reference</label>
		<span class="text-black-50">Votre numero de contrat ou le nom de famille</span>
		<input class="" id="reference" type="text" />
	</div>
	<div class="w-50 d-flex flex-column pb-1">
		<label class="font-italic" for="enterprise">Enterprise *</label>
		<input class="" id="enterprise" type="text" />
	</div>
	<div class="d-flex flex-row pb-1">
		<div class="w-50 d-flex flex-column">
			<label class="font-italic" for="address1">Adresse *</label>
			<input class="" id="address1" type="text" />
		</div>
		<div class="w-50 w-50 d-flex flex-column">
			<label class="font-italic" for="address2">Adresse</label>
			<input class="" id="address2" type="text" />
		</div>
	</div>
</div>

The classes included here would probably account for more than half of your code later on. I make extensive use of the d-flex class that turns it into a flex-box. pb-1 stands for padding bottom, 1 rem, w-50 means width 50%. The only gotcha is flex-row divides the child elements into separate columns, and flex-column divides it into rows.

Enjoy using Bootstrap, it's really awesome.

Upvotes: 2

Related Questions