user979331
Reputation: 11861
CSS bootstrap text-right not working
I have a form and I split up my form into 2 columns using col-md-6 so half the fields go on the left and the other half go on the right. Now what I am trying to do is have all my fields on the left alight to the right so there is no extra space and the form looks more centered.
Here is my code:
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="col-md-6">
<div class="form-group">
<label class="control-label col-sm-2" for="first_name">Firstname:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="first_name"
placeholder="First Name" name="first_name">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="last_name">Lastname:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="last_name"
placeholder="Last Name" name="last_name">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="email">Email:</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email"
placeholder="Email" name="email">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="address1">Address
Line 1:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="address1"
placeholder="Address Line 1" name="address1">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="address2">Address
Line 2:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="address2"
placeholder="Address Line 2" name="address2">
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-label col-sm-2" for="city">City:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="city" placeholder="City"
name="city">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="country">Country:</label>
<div class="col-sm-10">
<select class="form-control" id="country" name="country">
<option value="CA">Canada</option>
<option value="US">United States</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="state">State:</label>
<div class="col-sm-10">
<select class="form-control" id="state" name="state">
<option value="ON">Ontario</option>
<option value="AB">Alberta</option>
<option value="BC">British Columbia</option>
<option value="MB">Manitoba</option>
<option value="NB">New Brunswick</option>
<option value="NL">Newfoundland and Labrador</option>
<option value="NT">Northwest Territories</option>
<option value="NS">Nova Scotia</option>
<option value="NU">Nunavut</option>
<option value="PE">Prince Edward Island</option>
<option value="QC">Quebec</option>
<option value="SK">Saskatchewan</option>
<option value="YT">Yukon</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="zip">Postal Code:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="zip"
placeholder="Postal Code" name="zip">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="night_phone_a">Phone:</label>
<div class="col-sm-10">
<div class="form-group phone-number">
<div class="col-xs-3">
<input type="tel" name="night_phone_a" class="form-control"
value="" size="3" maxlength="3">
</div>
<div class="col-xs-3">
<input type="tel" name="night_phone_b" class="form-control"
value="" size="3" maxlength="3">
</div>
<div class="col-xs-4">
<input type="tel" name="night_phone_c" class="form-control"
value="" size="4" maxlength="4">
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default submit">Submit</button>
</div>
</div>
</div>I have tried using pull-right on the first col-md-6 and I have also tried text-right and neither of them work. How do I get the fields in the first col-md-6 align to the right?
Upvotes: 2
Views: 3402
Answers (2)
Manny
Reputation: 81
I had the same problem. I looked at the bootstrap CSS and I see they address "text-center" but they don't address "text-right", but they do address "text-end" and that did it for me.
Upvotes: 7
Pianistprogrammer
Reputation: 637
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="col-md-6">
<div class="form-group">
<label class="text-right control-label col-sm-2" for="first_name">Firstname:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="first_name"
placeholder="First Name" name="first_name">
</div>
</div>
<div class="form-group">
<label class="text-right control-label col-sm-2" for="last_name">Lastname:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="last_name"
placeholder="Last Name" name="last_name">
</div>
</div>
<div class="form-group">
<label class=" text-right control-label col-sm-2" for="email">Email:</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email"
placeholder="Email" name="email">
</div>
</div>
<div class="form-group">
<label class="text-right control-label col-sm-2" for="address1">Address
Line 1:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="address1"
placeholder="Address Line 1" name="address1">
</div>
</div>
<div class="form-group">
<label class="text-right control-label col-sm-2" for="address2">Address
Line 2:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="address2"
placeholder="Address Line 2" name="address2">
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-label col-sm-2" for="city">City:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="city" placeholder="City"
name="city">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="country">Country:</label>
<div class="col-sm-10">
<select class="form-control" id="country" name="country">
<option value="CA">Canada</option>
<option value="US">United States</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="state">State:</label>
<div class="col-sm-10">
<select class="form-control" id="state" name="state">
<option value="ON">Ontario</option>
<option value="AB">Alberta</option>
<option value="BC">British Columbia</option>
<option value="MB">Manitoba</option>
<option value="NB">New Brunswick</option>
<option value="NL">Newfoundland and Labrador</option>
<option value="NT">Northwest Territories</option>
<option value="NS">Nova Scotia</option>
<option value="NU">Nunavut</option>
<option value="PE">Prince Edward Island</option>
<option value="QC">Quebec</option>
<option value="SK">Saskatchewan</option>
<option value="YT">Yukon</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="zip">Postal Code:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="zip"
placeholder="Postal Code" name="zip">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="night_phone_a">Phone:</label>
<div class="col-sm-10">
<div class="form-group phone-number">
<div class="col-xs-3">
<input type="tel" name="night_phone_a" class="form-control"
value="" size="3" maxlength="3">
</div>
<div class="col-xs-3">
<input type="tel" name="night_phone_b" class="form-control"
value="" size="3" maxlength="3">
</div>
<div class="col-xs-4">
<input type="tel" name="night_phone_c" class="form-control"
value="" size="4" maxlength="4">
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default submit">Submit</button>
</div>
</div>
</div>Upvotes: 0
Related Questions
- text-center and text-right not working in bootstrap
- Text to the right in the navbar are not displayed
- how to move the text to the left
- In Bootstrap, how do I get my text to left align?
- How to fix text not showing up in the right?
- Text do not show up with bootstrap 4
- CSS Bootstrap - Text not breaking correctly
- css text-right wont work
- how to shift text from right in bootstrap?
- bootstrap navbar-right not working