How can I modify this to become a 5 column page layout instead of two?

One more question experts,

The following code gives me a two column page layout.

However, I would like to modify the code to display 5 columns.

Any ideas?

    <link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<form>
 <fieldset><legend>XPHIAS SERMON NOTE SYSTEM - MANAGE CLIENTS</legend>
<table style="margin-top:50px;width:816px">
    <tr>
        <td>
		<div class="form-group">
	        <label class="control-label" style="color:#3b3b3b;font-weight:bold;font-size:medium">Date</label>
			<div class="controls">
			    <div class="input-group">
				 <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
                  <input  class="form-control" name="DateText" Readonly="true"" style="width:150px;background:lightgrey;"/>
                </div>
            </div>
        </div>
		<div class="form-group">
	        <label class="control-label" style="color:#3b3b3b;font-weight:bold;font-size:medium">Name</label>
			<div class="controls">
			    <div class="input-group">
				 <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
                  <input  class="form-control" name="Name" placeholder="Enter your name..." tabindex="1"" style="width:150px;"/>
                </div>
            </div>
        </div>

		<div class="form-group">
	        <label class="control-label" style="color:#3b3b3b;font-weight:bold;font-size:medium">Department</label>
			<div class="controls">
			    <div class="input-group">
				<span class="input-group-addon"><i class="glyphicon glyphicon-plus"></i></span>
                    <asp:DropDownList name="Department" data-placeholder="Please select a department..." class="chosen-select form-control" style="width:150px;" tabindex="2"" AppendDataBoundItems="True" Width="100px" Enabled="True">
                    <asp:ListItem value="">&nbsp;</asp:ListItem>
                    </asp:DropDownList>
				</div>
			</div>
		</div>

       		<div class="form-group">
	        <label class="control-label" style="color:#3b3b3b;font-weight:bold;font-size:medium">Location</label>
			<div class="controls">
			    <div class="input-group">
				<span class="input-group-addon"><i class="glyphicon glyphicon-tent"></i></span>
                    <asp:DropDownList name="Location" data-placeholder="Please select a location..." class="chosen-select form-control" style="width:150px;" tabindex="3"" AppendDataBoundItems="True" Width="100px" Enabled="True">
                    <asp:ListItem value="">&nbsp;</asp:ListItem>
                    </asp:DropDownList>
				</div>
			</div>
		</div>
   		<div class="form-group">
	        <label class="control-label" style="color:#3b3b3b;font-weight:bold;font-size:medium">Floor</label>
			<div class="controls">
			    <div class="input-group">
				<span class="input-group-addon"><i class="glyphicon glyphicon-inbox"></i></span>
                    <asp:DropDownList name="Floor" data-placeholder="Please select a floor..." class="chosen-select form-control" style="width:150px;" tabindex="3"" AppendDataBoundItems="True" Width="100px" Enabled="True">
                    <asp:ListItem value="">&nbsp;</asp:ListItem>
                    </asp:DropDownList>
				</div>
			</div>
		</div>
        </td>
        <td>
            <br />
		<div class="form-group" style="margin-left:50px;">
	        <label class="control-label" style="color:#3b3b3b;font-weight:bold;font-size:medium">Email Address</label>
			<div class="controls">
			    <div class="input-group">
				<span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
				 <input class="form-control" " name="Email" style="width:150px;" tabindex="6" name="Email" placeholder="Enter email address..." />
				</div>
    		</div>
		</div>
		<div class="form-group" style="margin-left:50px;">
	        <label class="control-label" style="color:#3b3b3b;font-weight:bold;font-size:medium">Email Address</label>
			<div class="controls">
			    <div class="input-group">
				<span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
				 <input class="form-control" " name="Email" style="width:150px;" tabindex="6" name="Email" placeholder="Enter email address..." />
				</div>
    		</div>
		</div>
		<div class="form-group" style="margin-left:50px;">
	        <label class="control-label" style="color:#3b3b3b;font-weight:bold;font-size:medium">Phone</label>
			<div class="controls">
			    <div class="input-group">
				<span class="input-group-addon"><i class="glyphicon glyphicon-earphone"></i></span>
				 <input class="form-control" " name="phone" style="width:150px;" tabindex="7" name="Phone" placeholder="Enter phone number..." />

				</div>
			</div>
		</div>
     </td>
    </tr>
</table>
</form>

Open in new window


Thanks a lot
LVL 29
sammySeltzerAsked:
Who is Participating?
 
Julian HansenCommented:
This is just a suggestion but best practice with respect to layout is to refrain from using tables unless it is specifically for representing data.
There are a number of very good reasons why tables should not be used for layout - the most compelling is that it breaks responsiveness of the page - the ability of the page to adapt sensibly to different screen sizes.

You appear to already be using bootstrap so you should be expanding on that. Bootstrap is based on a 12 column layout however it is fairly simple to create a bootstrap addon that caters to 5 columns - you can read how to do this in the following article https://www.experts-exchange.com/articles/28663/Create-N-column-layout-for-Bootstrap.html

The sample below includes a full Bootstrap 5 column extension source which I have also provided  here
.col-xs-5-1,.col-sm-5-1,.col-md-5-1,.col-lg-5-1, .col-xs-5-2,.col-sm-5-2,.col-md-5-2,.col-lg-5-2, .col-xs-5-3,.col-sm-5-3,.col-md-5-3,.col-lg-5-3, .col-xs-5-4,.col-sm-5-4,.col-md-5-4,.col-lg-5-4, .col-xs-5-5,.col-sm-5-5,.col-md-5-5,.col-lg-5-5 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}
.col-xs-5-1, .col-xs-5-2, .col-xs-5-3, .col-xs-5-4, .col-xs-5-5 {
  float: left;
}
.col-xs-5-5 {
  width: 100%;
}
.col-xs-pull-5-5 {
	right: 100%;
}
.col-xs-push-5-5 {
  left: 100%;
}
.col-xs-offset-5-5 {
  margin-left: 100%;
}
.col-xs-5-4 {
  width: 80%;
}
.col-xs-pull-5-4 {
	right: 80%;
}
.col-xs-push-5-4 {
  left: 80%;
}
.col-xs-offset-5-4 {
  margin-left: 80%;
}
.col-xs-5-3 {
  width: 60%;
}
.col-xs-pull-5-3 {
	right: 60%;
}
.col-xs-push-5-3 {
  left: 60%;
}
.col-xs-offset-5-3 {
  margin-left: 60%;
}
.col-xs-5-2 {
  width: 40%;
}
.col-xs-pull-5-2 {
	right: 40%;
}
.col-xs-push-5-2 {
  left: 40%;
}
.col-xs-offset-5-2 {
  margin-left: 40%;
}
.col-xs-5-1 {
  width: 20%;
}
.col-xs-pull-5-1 {
	right: 20%;
}
.col-xs-push-5-1 {
  left: 20%;
}
.col-xs-offset-5-1 {
  margin-left: 20%;
}
@media (min-width: 768px) {
	.col-sm-5-1, .col-sm-5-2, .col-sm-5-3, .col-sm-5-4, .col-sm-5-5 {
  float: left;
}
.col-sm-5-5 {
  width: 100%;
}
.col-sm-pull-5-5 {
	right: 100%;
}
.col-sm-push-5-5 {
  left: 100%;
}
.col-sm-offset-5-5 {
  margin-left: 100%;
}
.col-sm-5-4 {
  width: 80%;
}
.col-sm-pull-5-4 {
	right: 80%;
}
.col-sm-push-5-4 {
  left: 80%;
}
.col-sm-offset-5-4 {
  margin-left: 80%;
}
.col-sm-5-3 {
  width: 60%;
}
.col-sm-pull-5-3 {
	right: 60%;
}
.col-sm-push-5-3 {
  left: 60%;
}
.col-sm-offset-5-3 {
  margin-left: 60%;
}
.col-sm-5-2 {
  width: 40%;
}
.col-sm-pull-5-2 {
	right: 40%;
}
.col-sm-push-5-2 {
  left: 40%;
}
.col-sm-offset-5-2 {
  margin-left: 40%;
}
.col-sm-5-1 {
  width: 20%;
}
.col-sm-pull-5-1 {
	right: 20%;
}
.col-sm-push-5-1 {
  left: 20%;
}
.col-sm-offset-5-1 {
  margin-left: 20%;
}

}
@media (min-width: 992px) {
.col-md-5-1, .col-md-5-2, .col-md-5-3, .col-md-5-4, .col-md-5-5 {
  float: left;
}
.col-md-5-5 {
  width: 100%;
}
.col-md-pull-5-5 {
	right: 100%;
}
.col-md-push-5-5 {
  left: 100%;
}
.col-md-offset-5-5 {
  margin-left: 100%;
}
.col-md-5-4 {
  width: 80%;
}
.col-md-pull-5-4 {
	right: 80%;
}
.col-md-push-5-4 {
  left: 80%;
}
.col-md-offset-5-4 {
  margin-left: 80%;
}
.col-md-5-3 {
  width: 60%;
}
.col-md-pull-5-3 {
	right: 60%;
}
.col-md-push-5-3 {
  left: 60%;
}
.col-md-offset-5-3 {
  margin-left: 60%;
}
.col-md-5-2 {
  width: 40%;
}
.col-md-pull-5-2 {
	right: 40%;
}
.col-md-push-5-2 {
  left: 40%;
}
.col-md-offset-5-2 {
  margin-left: 40%;
}
.col-md-5-1 {
  width: 20%;
}
.col-md-pull-5-1 {
	right: 20%;
}
.col-md-push-5-1 {
  left: 20%;
}
.col-md-offset-5-1 {
  margin-left: 20%;
}

}
@media (min-width: 1200px) {
	.col-lg-5-1, .col-lg-5-2, .col-lg-5-3, .col-lg-5-4, .col-lg-5-5 {
  float: left;
}
.col-lg-5-5 {
  width: 100%;
}
.col-lg-pull-5-5 {
	right: 100%;
}
.col-lg-push-5-5 {
  left: 100%;
}
.col-lg-offset-5-5 {
  margin-left: 100%;
}
.col-lg-5-4 {
  width: 80%;
}
.col-lg-pull-5-4 {
	right: 80%;
}
.col-lg-push-5-4 {
  left: 80%;
}
.col-lg-offset-5-4 {
  margin-left: 80%;
}
.col-lg-5-3 {
  width: 60%;
}
.col-lg-pull-5-3 {
	right: 60%;
}
.col-lg-push-5-3 {
  left: 60%;
}
.col-lg-offset-5-3 {
  margin-left: 60%;
}
.col-lg-5-2 {
  width: 40%;
}
.col-lg-pull-5-2 {
	right: 40%;
}
.col-lg-push-5-2 {
  left: 40%;
}
.col-lg-offset-5-2 {
  margin-left: 40%;
}
.col-lg-5-1 {
  width: 20%;
}
.col-lg-pull-5-1 {
	right: 20%;
}
.col-lg-push-5-1 {
  left: 20%;
}
.col-lg-offset-5-1 {
  margin-left: 20%;
}

}

Open in new window


I have taken your code - removed the table and applied the columns to make it 5 columns
<form>
 <fieldset><legend>XPHIAS SERMON NOTE SYSTEM - MANAGE CLIENTS</legend>
   <div class="row">
      <div class="col-md-5-1">
		<div class="form-group">
	        <label class="control-label" style="color:#3b3b3b;font-weight:bold;font-size:medium">Date</label>
			<div class="controls">
			    <div class="input-group">
				 <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
                  <input  class="form-control" name="DateText" Readonly="true" style="width:150px;background:lightgrey;"/>
                </div>
            </div>
        </div>
		<div class="form-group">
	        <label class="control-label" style="color:#3b3b3b;font-weight:bold;font-size:medium">Email Address</label>
			<div class="controls">
			    <div class="input-group">
				<span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
				 <input class="form-control" " name="Email" style="width:150px;" tabindex="6" name="Email" placeholder="Enter email address..." />
				</div>
    		</div>
		</div>
	  </div>
      <div class="col-md-5-1">
		<div class="form-group">
	        <label class="control-label" style="color:#3b3b3b;font-weight:bold;font-size:medium">Name</label>
			<div class="controls">
			    <div class="input-group">
				 <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
                  <input  class="form-control" name="Name" placeholder="Enter your name..." tabindex="1" style="width:150px;"/>
                </div>
            </div>
        </div>
		<div class="form-group">
	        <label class="control-label" style="color:#3b3b3b;font-weight:bold;font-size:medium">Phone</label>
			<div class="controls">
			    <div class="input-group">
				<span class="input-group-addon"><i class="glyphicon glyphicon-earphone"></i></span>
				 <input class="form-control" " name="phone" style="width:150px;" tabindex="7" name="Phone" placeholder="Enter phone number..." />

				</div>
			</div>
		</div>
	  </div>
      <div class="col-md-5-1">
		<div class="form-group">
	        <label class="control-label" style="color:#3b3b3b;font-weight:bold;font-size:medium">Department</label>
			<div class="controls">
			    <div class="input-group">
				<span class="input-group-addon"><i class="glyphicon glyphicon-plus"></i></span>
                    <asp:DropDownList name="Department" data-placeholder="Please select a department..." class="chosen-select form-control" style="width:150px;" tabindex="2"" AppendDataBoundItems="True" Width="100px" Enabled="True">
                    <asp:ListItem value="">&nbsp;</asp:ListItem>
                    </asp:DropDownList>
				</div>
			</div>
		</div>
	  </div>
      <div class="col-md-5-1">
   		<div class="form-group">
	        <label class="control-label" style="color:#3b3b3b;font-weight:bold;font-size:medium">Location</label>
			<div class="controls">
			    <div class="input-group">
				<span class="input-group-addon"><i class="glyphicon glyphicon-tent"></i></span>
                    <asp:DropDownList name="Location" data-placeholder="Please select a location..." class="chosen-select form-control" style="width:150px;" tabindex="3"" AppendDataBoundItems="True" Width="100px" Enabled="True">
                    <asp:ListItem value="">&nbsp;</asp:ListItem>
                    </asp:DropDownList>
				</div>
			</div>
		</div>
	  </div>
      <div class="col-md-5-1">
   		<div class="form-group">
	        <label class="control-label" style="color:#3b3b3b;font-weight:bold;font-size:medium">Floor</label>
			<div class="controls">
			    <div class="input-group">
				<span class="input-group-addon"><i class="glyphicon glyphicon-inbox"></i></span>
                    <asp:DropDownList name="Floor" data-placeholder="Please select a floor..." class="chosen-select form-control" style="width:150px;" tabindex="3"" AppendDataBoundItems="True" Width="100px" Enabled="True">
                    <asp:ListItem value="">&nbsp;</asp:ListItem>
                    </asp:DropDownList>
				</div>
			</div>
		</div>
    </div>
     <div class="col-md-5-1">
		<div class="form-group" >
	        <label class="control-label" style="color:#3b3b3b;font-weight:bold;font-size:medium">Email Address</label>
			<div class="controls">
			    <div class="input-group">
				<span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
				 <input class="form-control" " name="Email" style="width:150px;" tabindex="6" name="Email" placeholder="Enter email address..." />
				</div>
    		</div>
		</div>
     </div>
   </div>
</form>

Open in new window


Working sample here
2
 
Leonidas DosasCommented:
Add 3 more td elements in the table:
HTML:
   <link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<form>
  <fieldset><legend>XPHIAS SERMON NOTE SYSTEM - MANAGE CLIENTS</legend></fieldset>
  <table style="margin-top:50px;width:816px">
    <tr>
      <td>
        <div class="form-group">
	        <label class="control-label" style="color:#3b3b3b;font-weight:bold;font-size:medium">Date</label>
			<div class="controls">
			    <div class="input-group">
				 <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
                  <input  class="form-control" name="DateText" Readonly="true"" style="width:150px;background:lightgrey;"/>
                </div>
            </div>
        </div>
      </td>
      <td>
          <div class="form-group" style="margin-left:50px;">
	        <label class="control-label" style="color:#3b3b3b;font-weight:bold;font-size:medium">Name</label>
			<div class="controls">
			    <div class="input-group">
				 <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
                  <input  class="form-control" name="Name" placeholder="Enter your name..." tabindex="1"" style="width:150px;"/>
                </div>
            </div>
        </div>

		<div class="form-group" style="margin-left:50px;">
	        <label class="control-label" style="color:#3b3b3b;font-weight:bold;font-size:medium">Department</label>
			<div class="controls">
			    <div class="input-group">
				<span class="input-group-addon"><i class="glyphicon glyphicon-plus"></i></span>
                    <asp:DropDownList name="Department" data-placeholder="Please select a department..." class="chosen-select form-control" style="width:150px;" tabindex="2"" AppendDataBoundItems="True" Width="100px" Enabled="True">
                    <asp:ListItem value="">&nbsp;</asp:ListItem>
                    </asp:DropDownList>
				</div>
			</div>
		</div>
      </td>
      <td>
          <div class="form-group" style="margin-left:50px;">
	        <label class="control-label" style="color:#3b3b3b;font-weight:bold;font-size:medium">Location</label>
			<div class="controls">
			    <div class="input-group">
				<span class="input-group-addon"><i class="glyphicon glyphicon-tent"></i></span>
                    <asp:DropDownList name="Location" data-placeholder="Please select a location..." class="chosen-select form-control" style="width:150px;" tabindex="3"" AppendDataBoundItems="True" Width="100px" Enabled="True">
                    <asp:ListItem value="">&nbsp;</asp:ListItem>
                    </asp:DropDownList>
				</div>
			</div>
		</div>
   		<div class="form-group" style="margin-left:50px;">
	        <label class="control-label" style="color:#3b3b3b;font-weight:bold;font-size:medium">Floor</label>
			<div class="controls">
			    <div class="input-group">
				<span class="input-group-addon"><i class="glyphicon glyphicon-inbox"></i></span>
                    <asp:DropDownList name="Floor" data-placeholder="Please select a floor..." class="chosen-select form-control" style="width:150px;" tabindex="3"" AppendDataBoundItems="True" Width="100px" Enabled="True">
                    <asp:ListItem value="">&nbsp;</asp:ListItem>
                    </asp:DropDownList>
				</div>
			</div>
		</div>

      </td>
      <td>
        <div class="form-group" style="margin-left:50px;">
	        <label class="control-label" style="color:#3b3b3b;font-weight:bold;font-size:medium">Email Address</label>
			<div class="controls">
			    <div class="input-group">
				<span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
				 <input class="form-control" " name="Email" style="width:150px;" tabindex="6" name="Email" placeholder="Enter email address..." />
				</div>
    		</div>
		</div>
		<div class="form-group" style="margin-left:50px;">
	        <label class="control-label" style="color:#3b3b3b;font-weight:bold;font-size:medium">Email Address</label>
			<div class="controls">
			    <div class="input-group">
				<span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
				 <input class="form-control" " name="Email" style="width:150px;" tabindex="6" name="Email" placeholder="Enter email address..." />
				</div>
    		</div>
		</div>
      </td>
      <td>
        
        <div class="form-group" style="margin-left:50px;">
	        <label class="control-label" style="color:#3b3b3b;font-weight:bold;font-size:medium">Phone</label>
			<div class="controls">
			    <div class="input-group">
				<span class="input-group-addon"><i class="glyphicon glyphicon-earphone"></i></span>
				 <input class="form-control" " name="phone" style="width:150px;" tabindex="7" name="Phone" placeholder="Enter phone number..." />

				</div>
			</div>
		</div>
      </td>
    </tr>    
  </table>
  </form>

Open in new window

0
 
sammySeltzerAuthor Commented:
I thought I closed this question and awarded the points.

My sincere apology.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.