CODEWITHSUNDEEP
htmltwitter-bootstrapcss
user5711656
user5711656

Reputation: 3678

how to shift text from right in bootstrap?

I make a simple demo in which I have two columns ..my second column text is right align (float:right)..along that I need to give some pixel from right.I used right:20px .it is not give margin to text.it give margin to column why ?

http://codepen.io/naveennsit/pen/VePxWO

<div class='row'>
    <div class='col-xs-8' style='background-color:red'>first</div>
    <div class='col-xs-4 text-right' style='background-color:yellow;'>second</div>  
</div>

Upvotes: 0

Views: 4160

Answers (4)

Binod Gurung
Binod Gurung

Reputation: 453

@Vikram_Timwari is right. And Its not a good idea to add styles in the layout it self. Try to wrap the content inside the columns with a div and use styles to that div and use margin or spacing.

<div class='row'>
   <div class='col-xs-8'>
      <div style='background-color:red; padding: 15px'>first</div>
   </div>
   <div class='col-xs-4 text-right'>
      <div style='background-color:yellow; padding: 15px'>second</div>
   </div>
</div>

Upvotes: 0

Jonathan P
Jonathan P

Reputation: 458

Firstly, to use 

.element {
    right: 0px;
    left: 0px;
    top: 0px;
    bottom: 0px;
}

the element must have a set position:

.element {
    position: relative;   /*Set Position*/
    right: 20px;          /*Allows use of absolute positioning */
}

BUT

I think what you need however is to know the difference between padding and margin, assuming i'm understanding what you're saying correctly. Here's an image that explains the box model of an element. It explains how padding, margin, border etc work in contribution to the spacing and size of an element.

enter image description here

So i think what you need to give some space between the text and the edge is to use: 

.text-right {
    padding-right: 20px;
}

Upvotes: 0

Natasha Lawson
Natasha Lawson

Reputation: 111

Use padding-right:20px; to create space between the text and container

Upvotes: 0

Vikram Tiwari
Vikram Tiwari

Reputation: 3895

Try to learn basic classes provided by bootstrap first and then add your own CSS styles on top.

You can simply use container-fluid class and have it padded. And if this is not your desired view, you can make use of more layout based classes provided by bootstrap. Go through reference.

Here's your solution in a codepen. http://codepen.io/anon/pen/adpGER

Upvotes: 1

Related Questions