user4756836 user4756836 - 6 months ago 10
HTML Question

Place text on the right side of the div

I would like my text to remain centered by I would like to move it to the right side of the div. My div is covered with an image background.

I tried changing:

<div class="col-sm-12">


to:

<div class="col-sm-12" style="float:right;">


but it didn't have any effect. Is there a way for me to do this within bootstrap or do I have to use my custom css? And how can this be done?

HTML:

<div id="box" class="vcenter">
<div class="container">
<div class="row center">
<div class="col-md-12">
<div class="row">
<div class="col-sm-12">
<p>Text text text text text text text text text ext text text text text text text text/p>
<p>Text text text text text text text text text ext text text text text text text text/p>
<p>Text text text text text text text text text ext text text text text text text text/p>
</div>
</div>
</div>
</div>
</div>
</div>


CSS:

.vcenter {
display: flex;
align-items: center;
}

#box {
background: url("url here") no-repeat center;
height: 500px;
}

.center {
text-align: center;
}


JSFiddle Demo

Answer

You can use bootstrap's grid system

For example like this if your left and right side (column) should be same width

<div class="col-xs-6">
  <p>Something left</p>
</div>
<div class="col-xs-6 center">
  <p>Something right</p>
</div>

Full example is here: https://jsfiddle.net/woeote07/3/

If you don't need left column you can use offset. Just use latest bootstrap version for this because some older ones doesn't support offset for all column types.

<div class="col-xs-6 col-xs-offset-6 center">

Example here: https://jsfiddle.net/woeote07/5/

Comments