RagnaLugria RagnaLugria - 9 days ago 6
CSS Question

bootstrap col space before the labels

Hi how do i add space before my labels in this div? im using the bootstrap grid system. is it possible to do it without padding?

screenshot

<div class="module-body">
<div class="row">
<label class="event-label col-md-2" style="font-size:16px">Event:</label>
<input type="text" class="event-input">
</div>
<div class="row">
<label class="event-label col-md-2" style="font-size:16px">When:</label>
</div>
<div class="row">
<label class="event-label col-md-2" style="font-size:16px">Where:</label>
<input type="text" class="event-input">
</div>
<div class="row">
<label class="event-label col-md-2" style="font-size:16px">Cause:</label>
</div>
<div class="row">
<label class="event-label col-md-2" style="font-size:16px">Preferred Skills:</label>
<input type="text" class="event-input">
</div>
<div class="row">
<label class="event-label col-md-2" style="font-size:16px">No. of Volunteers:</label>
</div>
<div class="row">
<label class="description-label col-md-2" style="font-size:16px">Description:</label>
</div>
<input type="text" class="event-description">
</div>

Answer

You just need to add container class to your wrapper div or if you want a full width container you can use container-fluid class instead of container.

<div class="module-body container">

Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.

You are adding a row for each label and input group which is not a good practice.

@import url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css);
<div class="module-body container">
                                    <div class="row">
                                        <label class="event-label col-md-2" style="font-size:16px">Event:</label>
                                        <input type="text" class="event-input">
                                    </div>
                                    <div class="row">
                                        <label class="event-label col-md-2" style="font-size:16px">When:</label>
                                    </div>
                                    <div class="row">                                    
                                        <label class="event-label col-md-2" style="font-size:16px">Where:</label>
                                        <input type="text" class="event-input">
                                    </div>
                                    <div class="row">
                                        <label class="event-label col-md-2" style="font-size:16px">Cause:</label>
                                    </div>
                                    <div class="row">
                                        <label class="event-label col-md-2" style="font-size:16px">Preferred Skills:</label>
                                        <input type="text" class="event-input">
                                    </div>
                                    <div class="row">
                                        <label class="event-label col-md-2" style="font-size:16px">No. of Volunteers:</label>
                                    </div>
                                    <div class="row">
                                        <label class="description-label col-md-2" style="font-size:16px">Description:</label>
                                    </div>
                                        <input type="text" class="event-description">
                                </div>