Twitter Bootstrap Question posted in

Twitter bootstrap – how to align column to the right?

I am getting my head around twitter bootstrap 3 and specifically the column setup. I got a 2 columns on the same line:

<!--datetime row-->
  <div>
    <div class="col-md-6 form-group">
      <label for="">Title:</label>
      <div class="dropdown">
        <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"
                aria-expanded="true">
          Dropdown
          <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
        </ul>
      </div>
    </div>
    <div class="col-md-6 form-group">
      why is this left instead of right aligned??

    </div>
  </div>

The problem is I cannot get the second column to sit to the right where the dropdown is. So I would like the dropdown in the first column and in the second column the ‘why is this…’ text. What causes this? Here is a ref to the full snippet: http://plnkr.co/edit/tufLd2?p=preview

Tags:

4

Answers


  1. 0

    You can add ‘ text-right to your <div class="col-md-6 form-group">
    please see here

    http://plnkr.co/edit/rUAdxLJ6ExKZYFbkveuC?p=preview

    and if you want to have column for 50% of screen even on small devices

    change col-md-6 to col-xs-6

    http://plnkr.co/edit/RxPx0zzT5YmodepQ3zIj?p=preview

    Login or Signup to reply.
  2. 0 
    <!--datetime row-->
  <div **class="row"**>
    <div class="col-md-6 form-group">
      <label for="">Title:</label>
      <div class="dropdown">
        <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"
                aria-expanded="true">
          Dropdown
          <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
        </ul>
      </div>
    </div>
    <div class="col-md-6 form-group">
      why is this left instead of right aligned??

    </div>
  </div>
    Login or Signup to reply.
  3. 0

    Copy this code in your example and scratch the preview window to the left.

    <form class="form-horizontal">
<div class="form-group">
  <label for="" class="col-sm-2 control-label">Title:</label>
  <div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"
            aria-expanded="true">
      Dropdown
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
    </ul>
  </div>
</div>
<div class=" form-group">
  why is this left instead of right aligned??

</div>

    Live example

    Login or Signup to reply.
  4. 0

    This might solve the problem

    <div>
    <div class="col-xs-6 form-group">
      <label for="">Title:</label>
    </div>
    <div class="col-xs-6 form-group  text-right">
        <div class="dropdown">
            <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"
            aria-expanded="true">
            Dropdown
            <span class="caret"></span>
            </button>

            <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
            </ul>
        </div>
    </div>
    <div class="col-md-6 form-group">
      why is this left instead of right aligned??
    </div>
</div>

    Live Demo

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search