0

So there is a question that's been worrying me a considerable period of time. It would sound like, "What is a correct way to align content inside Bootstrap column?"

When I'm using Bootstrap Grid I normally divide the screen width into col-md-* blocks that form columns and which don't result in conflicts when resizing the window. But I'm not exactly certain about how to align what's inside these blocks.

The main bootstrap documentation page only mentions about how to float elements to the right or to the left using

<div class="pull-left">..</div>

or

<div class="pull-right">...</div>

classes. However, what would I need to do in case when I want to align elements to the bottom right corner? What is the most common way to do it following bootstrap markup?

Alex Nikolsky
  • 2,087
  • 6
  • 21
  • 36

3 Answers3

2

Inside a col-md-* div, you can either create a new row with other col-md-* div in it, or you can just use some helper class:

<div class="col-md-*">
    <div class="pull-right">content</div> <!--This will set a float:right on the div-->
</div>

Or

<div class="col-md-*">
    <div class="text-right">content</div> <!--The div will not float, but it will align your content to the right-->
</div>

But if want to fix your content in the bottom of a container, you should set the container's position as "relative" and the content's position to "absolute", and then "bottom:0"

This should work :

<div class="row">
    <div class="col-md-6" style="height:150px">
        <div class="text-right" style="position:absolute;bottom:0;left:0;right:0;">
            content
        </div>
    </div>
</div>
Clément Rigo
  • 420
  • 1
  • 3
  • 10
  • The bad thing about it you can observe [here](http://imgur.com/TeeyOdc). It turns out that you should every time manually specify certain height for this purpose. – Alex Nikolsky Oct 12 '15 at 08:41
  • Specifying height is just for the example, but it works even without the height property. col-md-* div does not have defined heights – Clément Rigo Oct 12 '15 at 08:44
  • I can't get your point, check out my [Jsfiddle](http://jsfiddle.net/Alexnotonfire/thcmvf9o/10/) to make sure it's not working that way. – Alex Nikolsky Oct 12 '15 at 08:49
  • col-md-* div are relative by default so the inline style is not necessary here. In your fiddle, the container has no height so you won't notice any difference if you align the content to the bottom :) So you might just do this : http://jsfiddle.net/thcmvf9o/11/ – Clément Rigo Oct 12 '15 at 08:55
  • I got you. Thank you, Clément! – Alex Nikolsky Oct 12 '15 at 08:56
1

you mean inside in your column just use align:(directions), but with inner container suppose 

<div class="col-md-6"><div class="text-align:right">some text</div></div>

for using float use pull-right and pull-left

riazshah
  • 163
  • 11
-1

you can simply use the 

<div class="col-md-6" style="border:1px solid grey;"><div class="text-right">some text</div></div>

for more detail you can refer

Refer

Community
  • 1
  • 1
Himesh Aadeshara
  • 2,114
  • 16
  • 26