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?
Thanks a lot
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=""> </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=""> </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=""> </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>
Thanks a lot
Asked:
Who is Participating?
Experts Exchange Solution brought to you by
Enjoy your complimentary solution view.
Get every solution instantly with Premium.
Start your 7-day free trial.
I wear a lot of hats...
"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.
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
I have taken your code - removed the table and applied the columns to make it 5 columns
Working sample here
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%;
}
}
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=""> </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=""> </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=""> </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>
Working sample here
Experts Exchange Solution brought to you by
Your issues matter to us.
Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.
Start your 7-day free trialIt's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML
From novice to tech pro — start learning today.
Experts Exchange Solution brought to you by
Enjoy your complimentary solution view.
Get every solution instantly with Premium.
Start your 7-day free trial.
HTML:
Open in new window