How to make kbps to be inline with input box? Which mean, kbps will be next to input box. Not like image below.
<div class="form-group row">
<div class="col-lg-4">
<label class="form-control-label">New Bandwidth (kbps):</label>
</div>
<div class="col-lg-6">
<input type='number' style='display:inline;'><span>kbps</span>
</div>
</div>
Try this
<div class="form-group row">
<div class="col-lg-4">
<label class="form-control-label">New Bandwidth (kbps):</label>
<input type='number' style='display:inline-block;'><span>kbps</span>
</div>
</div>
After done customization then I found what I want.
Maybe this is not the best practice.
<div class="form-group row">
<div class="col-lg-4">
<label class="form-control-label">New Bandwidth:</label>
</div>
<div class="col-lg-5 pl-3 pr-0">
<input type='number'>
</div>
<div class="col-lg-1 pd-0 ml-2">
<span>kbps</span>
</div>
</div>
Related
I am trying to make a Sign-UP form in html and CSS with notepad++ but whenever I try to run it on chrome, it loads very slowly. Is it a configuration error or something? What am I doing wrong? Is there a plugin needed? This is my entire code:
<body>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">Register</div>
<div class="card-body">
<div class="form-group row">
<label for="full_name" class="col-md-4 ">Full Name</label>
<div class="col-md-6">
<input type="text" class="form-control" name="full-name">
</div>
</div>
<div class="form-group row">
<label for="email_address" class="col-md-4 ">E-Mail Address</label>
<div class="col-md-6">
<input type="text" class="form-control" name="email-address">
</div>
</div>
<div class="form-group row">
<label for="user_name" class="col-md-4 ">User Name</label>
<div class="col-md-6">
<input type="text" class="form-control" name="username">
</div>
</div>
<div class="form-group row">
<label for="password" class="col-md-4 ">Password</label>
<div class="col-md-6">
<input type="password" class="form-control">
</div>
</div>
<div class="col-md-6 stylish" offset-md-4>
<button type="submit" class="btn btn-primary"">
Register
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Add the bootstrap and jQuery plugins.
In HTML page link the external files properly.
In head section add the external links.
Maintain the folder structure neat so that linking extrnal files is easy.
If everything is correct go to this link to set up Chrome: https://www.webnots.com/fix-slow-page-loading-issue-in-google-chrome/
<!DOCTYPE html>
<html>
<body>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">Register</div>
<div class="card-body">
<div class="form-group row">
<label for="full_name" class="col-md-4 ">Full Name</label>
<div class="col-md-6">
<input type="text" class="form-control" name="full-name">
</div>
</div>
<div class="form-group row">
<label for="email_address" class="col-md-4 ">E-Mail Address</label>
<div class="col-md-6">
<input type="text" class="form-control" name="email-address">
</div>
</div>
<div class="form-group row">
<label for="user_name" class="col-md-4 ">User Name</label>
<div class="col-md-6">
<input type="text" class="form-control" name="username">
</div>
</div>
<div class="form-group row">
<label for="password" class="col-md-4 ">Password</label>
<div class="col-md-6">
<input type="password" class="form-control">
</div>
</div>
<div class="col-md-6 stylish" offset-md-4>
<button type="submit" class="btn btn-primary"">
Register
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I have the following HTML code using Bootstrap 3 CSS classes :
<h4>Profile</h4>
<div class="row form-group col-sm-8">
<label class="col-sm-2 control-label">Name :</label>
<div class="col-sm-6">
myName
</div>
</div>
<div class="row form-group col-sm-8">
<label class="col-sm-2 control-label">Email :</label>
<div class="col-sm-8">
me#internet.org
</div>
</div>
<h4>Credits</h4>
<div class="form-group col-sm-8">
<label class="col-sm-2 control-label">Credits :</label>
<div class="col-sm-7">
42
</div>
</div>
I'd like the Credits <h4> title to be on a new line, under the previous fields. But it's displayed on the top right.
Can someone please explain me why and help me display it to the right position ?
CSS Fiddle : https://jsfiddle.net/DTcHh/
The problem is that the col- classes make the elements they are applied to floats. You will need to wrap them in a container with clearfix. You probably want this (note that row applies clearfix too):
<h4>Profile</h4>
<div class="row">
<div class="form-group col-sm-8">
<label class="col-sm-2 control-label">Name :</label>
<div class="col-sm-6">
myName
</div>
</div>
<div class="form-group col-sm-8">
<label class="col-sm-2 control-label">Email :</label>
<div class="col-sm-8">
me#internet.org
</div>
</div>
</div>
<h4>Credits</h4>
<div class="form-group col-sm-8">
<label class="col-sm-2 control-label">Credits :</label>
<div class="col-sm-7">
42
</div>
</div>
You can create a new div with the class 'row' for the credits:
<div class="row">
<h4>Credits</h4>
</div>
In form I am using group-form, For some field it is not adjusting the space. Please see the image:
In the Image you can see that before contact field there is one space, and contact field is not adjusting the space, why is this happening?
<div class="col-md-6 row" id="addWarehouseForm" ng-show='!showForm'>
<form class="form-horizontal order-form" id="mapForm" name="mapForm">
<div class="col-md-6 form-group">
<label class="col-md-3 control-label">Name:*</label>
<div class="col-md-9">
<input type="text" class="form-control" required>
</div>
</div>
<div class="col-md-6 form-group">
<label class="col-md-3 control-label">From:</label>
<div class="col-md-3 form-group">
<input type="checkbox" >
</div>
<label class="col-md-3 control-label">To:</label>
<div class="col-md-3 form-group">
<input type="checkbox" >
</div>
</div>
<div class="col-md-6 form-group">
<label class="col-md-3 control-label">Contact Person:</label>
<div class="col-md-9">
<input type="text" class="form-control">
</div>
</div>
</form>
</div>
Maybe col-md-6 is to small and you don't have enough space?
I have small issue with bootstrap grid system , I have a row that has grid setup with two sections with col-md-6 , Now problem is when i zoom my browser more than 100% my Close label and input is moving to next line. I want them to stay same place all the time zoom should not effect the position of the rows.I tried to use col-xs-1 but it does not work. How can i achieve that task using bootstrap ?
main.html
<div class="row">
<div class="container col-md-6">
<div class="form-group">
<label class="col-md-5">Actual Cycle Start:</label>
<div class="col-md-7">
<div class="row">
<div class="col-xs-5">
<input class="form-control" ng-model="riskAssessmentDTO.cycleStartDate"
k-format="'MM/dd/yyyy'" disabled />
</div>
<div class="col-xs-1">
<label class="control-label"> Close:</label>
</div>
<div class="col-md-5 changeWdh">
<input class="form-control" ng-model="riskAssessmentDTO.cycleEndDate" k-format="'MM/dd/yyyy'" disabled />
</div>
</div>
</div>
</div>
</div>
<div class="form-group col-md-6 fieldHeight">
<label for="challengeOutstand" class="col-md-5">Challenges
Outstanding:</label>
<div class="col-md-7">
<input type="text" class="form-control" id="challengeOutstand"
name="challengeOutstand" maxlength="256"
ng-model="riskAssessmentDTO.challengesOutstanding" disabled />
</div>
</div>
</div>
main.css
.changeWdh{
width: 152px;
}
EDIT: try this:
<div class="container">
<div class="row">
<div class="col-6-md">
<div class="col-md-7">
<div class="row">
<div class="col-xs-1">
<label class="col-md-5">Actual Cycle Start:</label>
</div>
<div class="col-xs-5">
<input class="form-control" ng-model="riskAssessmentDTO.cycleStartDate"
k-format="'MM/dd/yyyy'" disabled />
</div>
</div>
<div class="row">
<div class="col-xs-1">
<label class="control-label"> Close:</label>
</div>
<div class="col-xs-5 changeWdh">
<input class="form-control" ng-model="riskAssessmentDTO.cycleEndDate" k-format="'MM/dd/yyyy'" disabled />
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 fieldHeight">
<label for="challengeOutstand" class="col-xs-5">Challenges
Outstanding:</label>
<div class="col-xs-7">
<input type="text" class="form-control" id="challengeOutstand"
name="challengeOutstand" maxlength="256"
ng-model="riskAssessmentDTO.challengesOutstanding" disabled />
</div>
</div>
</div>
place your col-5 and col-1 into row div's or make them both into xs, not one md and one xs, and place them into a div container class "col-md-6"
I have a form that uses Bootstrap 3. My layout should follow the below:
On small screens, Display 1 input per row with the label stacked above the input
On medium devices, Display 2 input per row with the label to the left of each input
On large devices, Display 3 inputs per rom with the label to the left of each input
Rows that contain a textarea, should always be displayed with one input per row
I have this almost working with one small quirk. Everything works well with all of the elements lining up like the below on all bootstrap breakpoints up to md like this:
However, when I hit the lg breakpoint, the text area and it's label no longer line up with the other element like this:
Looking at the grid I've set up I can see why this happens but I cant seem to find a pattern that fits my needs without causing this issue. I know I can start hacking away with CSS like negative margins to force the layout but I feel like there is a better way.
How can I fix this?
Here is a jsFiddle showing the issue
And the relevant HTML:
<form class="form-horizontal" role="form">
<div class="row">
<div class="col-sm-12 input-row clone-icon text-right">
<div class="form-group">
<div class="col-md-2 col-lg-2 left-on-mobile">
<label for="" class="control-label ">Textarea</label>
</div>
<div class="col-md-10 col-lg-10">
<textarea class="form-control form-input"></textarea>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-4 input-row clone-icon text-right">
<div class="form-group">
<div class="col-md-4 col-lg-5 left-on-mobile">
<label for="" class="control-label ">Input Field</label>
</div>
<div class="col-md-8 col-lg-7">
<input type="text" class="form-control">
</div>
</div>
</div>
<div class="col-sm-6 col-lg-4 input-row clone-icon text-right">
<div class="form-group">
<div class="col-md-4 col-lg-5 left-on-mobile">
<label for="" class="control-label ">Input Field</label>
</div>
<div class="col-md-8 col-lg-7">
<input type="text" class="form-control">
</div>
</div>
</div>
<div class="col-sm-6 col-lg-4 input-row clone-icon text-right">
<div class="form-group">
<div class="col-md-4 col-lg-5 left-on-mobile">
<label for="" class="control-label ">Input Field</label>
</div>
<div class="col-md-8 col-lg-7">
<input type="text" class="form-control">
</div>
</div>
</div>
</div>
</form>
For the first Input field change the col-lg-* classes from 5 and 7 to 6 and 6. That will make its <label> tag to align with the one in the previous row.
<div class="col-sm-6 col-lg-4 input-row clone-icon text-right">
<div class="form-group">
<div class="col-md-4 col-lg-6 left-on-mobile">
<label for="" class="control-label ">Input Field</label>
</div>
<div class="col-md-8 col-lg-6">
<input type="text" class="form-control">
</div>
</div>
</div>
Demo link here