How to reduce too much space between two columns with Bootstrap
TastyCode
There is too much space between two form-groups, if i reduce the column size of the first one it goes on next line which i don't want. I would like email address to be closer to phone extension. Is there any way to do this without moving email address field with css left margins?
<div class="row">
<div class="form-group col-md-5">
<label for="telephoneNumber">Telephone Number</label>
<div class="form-inline">
<input type="text" class="form-control" id="telephoneNumber1" maxlength="3" size="3">-
<input type="text" class="form-control" id="telephoneNumber2" maxlength="3" size="3">-
<input type="text" class="form-control" id="telephoneNumber3" maxlength="3" size="3">Ext
<input type="text" class="form-control" id="extension" maxlength="3" size="3">
</div>
</div>
<div class="form-group col-md-4">
<label for="emailAddress">Email Address</label>
<input type="text" class="form-control" id="emailAddress">
</div>
</div>
Stafie Anatolie
The total number of columns on a row is equal to 12.
You have set the class .col-md-5 on your first column which means it would take about 50% of the available width. And your next column starts immediately after that. A solution would be to set a class with fewer column on your first form-group, let's say col-md-3. Here's a demo: http://output.jsbin.com/tipusi/1/
Collected from the Internet
Please contact [email protected] to delete if infringement.
edited at
- Prev: Is there any way to increase 'realmax' in MATLAB?
- Next: Hashmap that keeps original key/value when duplicate key entered
Related
Related Related
- 1
how remove space between two div in different columns in Bootstrap
- 2
Too much space in between CardViews
- 3
How do i reduce the vertical space/margin between two bootstrap rows?
- 4
How to keep space between three columns in Bootstrap?
- 5
My Windows folder takes up too much space - how can I reduce it?
- 6
How to reduce space between two rows of Table Layout for android?
- 7
How can I reduce the space between two elements in CSS?
- 8
How to reduce the space between two lines of text in a circle
- 9
Bootstrap Add Space between Columns
- 10
Group addon taking up too much space in bootstrap table
- 11
How to reduce space between lines?
- 12
Font rendering issue in urxvt -- too much space between characters
- 13
Achartengine graph displaying too much space between values
- 14
Too much space between bars in matplotlib bar chart
- 15
How to create two equal columns with a fix space in between
- 16
How to add space between two wells in bootstrap 3?
- 17
Too much boilerplate, how can I reduce my POJO builders?
- 18
Text not horizontally centre in nav bar / How to make a <br> half the size/ Too much space between nav bar text
- 19
Too much blank space in the spinner
- 20
Mongo using (much) too much space
- 21
Mongo using (much) too much space
- 22
Bootstrap: add margin/padding space between columns
- 23
Bootstrap: Empty uncolored space between columns
- 24
Space between columns Bootstrap3
- 25
space between 3 columns with border in bootstrap
- 26
How can I reduce the space between two discrete values in the x-axis?
- 27
How to remove space between columns
- 28
How to reduce space between section header?
- 29
How to reduce space between items of RecyclerView in Android?
Comments