Centering elements with CSS in Bootstrap

Question

Centering elements with CSS in Bootstrap

Navigation

#1 by (5 votes)

3

I am trying to center the following without losing the responsive and there is no way:

    <div class="row">
        <span class="col-md-1 text-right">Periodo:</span>
        <div class="col-md-2">
            <input value="01/11/2016" class="form-control" type="text">
        </div>
        <div class="col-md-2">
            <input value="29/11/2016" class="form-control" type="text">
        </div>
    </div>
    <div class="row">
        <span class="col-md-1 text-right">Select1</span>
        <div class="col-md-4">
            <select class="form-control">
                <option selected="selected" value="15">A</option>
                <option value="19">B</option>
            </select>
        </div>
    </div>
    <div class="row">
        <span class="col-md-1 text-right">Select2</span>
        <div class="col-md-4">
            <select tabindex="5" class="form-control">
                <option value="9">9</option>
                <option selected="selected" value="7">7</option>
                <option value="42">42</option>
                <option value="45">45</option>
                <option value="5">5</option>
                <option value="8">8</option>
            </select>
        </div>
    </div>
    <div class="text-center">
        <input value="Button1" class="btn btn-default" type="submit">
        <input value="Button2" class="btn btn-default" type="submit">
    </div>

link

The buttons with a text-center are centered, but the spans and the textboxs above there is no way.

How can I make the rest of the elements also centered?

html5 css3 css bootstrap

asked by Andrés73 29.11.2016 в 10:20

source

1 answer

How to get a json's length How to send two data with Laravel lists?

score 5 · Accepted Answer

You can use flexbox and the property justify-content: center for your class .row .

.row{
  display: flex;
  justify-content: center;
}

In this way each of the elements will be centered horizontally within their corresponding lines.

Explanation of why some elements are centered and others not with text-center

In your case, the buttons (which in this case are actually inputs ) are centering with the text-center property because they are inline elements and this property only works for the inline or inline-block elements %. Therefore, since the div by default are elements that act as a block ( block ), they will not be centered with this property.

Updated Codepen .