CODEWITHSUNDEEP
htmlcsstwitter-bootstrapcss-float
user4756836
user4756836

Reputation: 1337

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

Upvotes: 1

Views: 9183

Answers (5)

Jakob
Jakob

Reputation: 3546

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/

Upvotes: 4

aholtry
aholtry

Reputation: 2753

One way to accomplish this with bootstrap would be to add a separate div that maybe only had a span of 2. This would essentially push your current div to the right side of the screen. 

     <div class="row">
        <div class="col-sm-2">
          <p>First Text Area</p>
          <p>First Text Area</p>
          <p>First Text Area</p>
        </div>
        <div class="col-sm-10">
          <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>

Plunker Example

Otherwise an easy solution would be to add a margin-left attribute to the style of the div like so.

        <div class="col-sm-12" style="margin-left: 60px;">
          <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>

Plunker Example 2

Upvotes: 2

Michael Schwartz
Michael Schwartz

Reputation: 8415

Weave: http://kodeweave.sourceforge.net/editor/#0b6cf679309a05c75de936bc691576ca
Forked Fiddle: https://jsfiddle.net/woeote07/4/

I would like my text to remain centered by I would like to move it to the right side of the div.

First off .col-sm-12 has a width 100% by default (being the same width as it's parent). Thus you can change it to 50% and then you can use float to have your text on the right side.

.col-sm-12 {
  float: right;
  width: 50%;
}

Here's a simple snippet!

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

#box {
  background: url("http://2.bp.blogspot.com/-WEArLbKazLg/Ujg2PL6NG7I/AAAAAAAABSo/UZE_Z-UwPVQ/s1600/Simple-white-light-web-vector-design-image-wallpaper.jpg") no-repeat center;
  height: 500px;
}

.center {
  text-align: center;
}

.col-sm-12 {
  float: right;
  width: 50%;
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

<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>

Upvotes: 2

Aloso
Aloso

Reputation: 5387

col-sm-12 can't float if it has the same width as its parent. Specify a width (absolute or percentage), and it can float.

Like this: new Fiddle

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

#box {
  background: url("http://2.bp.blogspot.com/-WEArLbKazLg/Ujg2PL6NG7I/AAAAAAAABSo/UZE_Z-UwPVQ/s1600/Simple-white-light-web-vector-design-image-wallpaper.jpg") no-repeat center;
  height: 500px;
}

.center {
  text-align: center;
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<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" style="float:right; width:50%">
            <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>

Upvotes: 1

matmik
matmik

Reputation: 670

Your text is centered right now. If you want it to be on the right side of the page, you can't do the 'col-sm-12', as that takes up the entire row.

Instead, do something like this:

<div class="col-sm-6"><p>the left side</p></div>
<div class="col-sm-6"><p>Text text text text text text text text</p></div>

Then if you want it centered inside the columns, just assign text-align: center; to them.

Upvotes: 2

Related Questions