Avatar of sammySeltzer
sammySeltzer
Flag for United States of America asked on

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
HTMLJavaScriptPHP

Avatar of undefined
Last Comment
sammySeltzer

8/22/2022 - Mon
Leonidas Dosas

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

ASKER CERTIFIED SOLUTION
Julian Hansen

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
GET A PERSONALIZED SOLUTION
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.
sammySeltzer

ASKER
I thought I closed this question and awarded the points.

My sincere apology.
This is the best money I have ever spent. I cannot not tell you how many times these folks have saved my bacon. I learn so much from the contributors.
rwheeler23