Bootstrap grid layout. Empty div

Question

I have a question concerning the Bootstrap grid layout and empty div's.

I have text and a button and i want the text and the button to show up in the middle (Horizontally) of the page. I have used empty div's to achieve this.

Is there a better way to do this. I don't want my text to be right aligned, because the text will be in two rows.

What is the best way to do this? Do people just use empty div's?

Thanks in advance

<div class="row">
        <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12"></div>
        <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
            <span>
                This is a new feature 
                </br> for the site.
            </span>
        </div>
        <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
                <a class="btn btn-default size" href="">Click button</a>
        </div>
        <div class="col-lg-2 col-md-2 col-sm-12 col-xs-12"></div>
    </div>

score 4 · Accepted Answer · answered Mar 01 '16 at 18:36

4

If you not use text align center. You can use bootstrap class col-md-offset-3

answered Mar 01 '16 at 18:36

Ankit Virani

125
1
13

United with text-center, I believe this is the proper answer. Learn more about in http://getbootstrap.com/css/#grid-offsetting – teefars Mar 02 '16 at 00:05

score 1 · Answer 2 · answered Mar 01 '16 at 18:36

If you want to center all your content in the row, just simply add text-center to your row and give your div's inside class="col-xs-12".

<div class="row text-center">
  <div class="col-xs-12">
    <span>
      This is a new feature for the site.
    </span>
  </div>
  <div class="col-xs-12">
    <a class="btn btn-default size" href="">Click button</a>
  </div>
</div>

JSFiddle

score 0 · Answer 3 · edited May 23 '17 at 12:33

0

Use the text-center class for the div containing the text and button.

Update: I've done a quick search and found related posts. I'd recommend searching before asking, as your question might get down-voted and/or put on hold.

edited May 23 '17 at 12:33

Community

1
1

answered Mar 01 '16 at 18:29

Kody

905
9
19

score 0 · Answer 4 · answered Mar 01 '16 at 18:39

how about something simple like this - https://jsfiddle.net/8cuyc32z/1/ ?

HTML

<div class="text-center">
  <div class="tc-text">
    This is a new feature <br />for the site.
  </div>
  <div class="tc-btn">
    <a class="btn btn-default size" href="">Click button</a>
  </div>
</div>

CSS

.tc-text, .tc-btn {
  display:inline-block;
  vertical-align:middle;
  margin:0 10px;
}

hope that helps!

score 0 · Answer 5 · answered Mar 01 '16 at 18:59

0

The way Tricky12 described is to center all content in the column is that what you are trying to do? If so that method is correct.

answered Mar 01 '16 at 18:59

Tyler Harris

1
1

Bootstrap grid layout. Empty div

5 Answers5