Home How to float dynamically generated content to the right in bootstrap css?
Reply: 4

How to float dynamically generated content to the right in bootstrap css?

Del Monte
1#
Del Monte Published in 2018-01-13 10:30:19Z

I have a for loop that is dynamically generating two fields(label and text box). I want the second field to be on right most corner. How should I style it? This is the for loop I am using:

<div class="form-group">
    @for(int i=0;i<2;i++)
    {
            <label class="required col-sm-3 control-label">
                TextBox  
            </label>
            <div class="col-sm-2">
                @{
                    @Html.TextBox("TextBox")
                }
            </div>
    }
</div>  

This is my current output:

Gattbha
2#
Gattbha Reply to 2018-01-13 10:43:45Z

Add pull-right class like this so it will align right

<div class="form-group">
    @for(int i=0;i<data.Count;i++)
    {
            <label class="required col-sm-3 control-label">
                TextBox  
            </label>
            <div class="col-sm-2 pull-right">
                @{
                    @Html.TextBox("TextBox")
                }
            </div>
    }
</div>  
VR Patel
3#
VR Patel Reply to 2018-01-13 10:51:38Z

Try this one

 <div class="form-group">
    @for(int i=0;i<data.Count;i++)
    {
       <div class="col-sm-12" style="margin:0px;">
           <div class="col-sm-6">
              <label class="required col-sm-3 control-label">
                 TextBox  
              </label>
              <div class="col-sm-2">
                  @{
                      @Html.TextBox("TextBox")
                   }
              </div>
           </div>
           <div class="col-sm-6">
               <div class="pull-right">
                   <label class="required col-sm-3 control-label">
                      TextBox  
                   </label>
                   <div class="col-sm-2">
                       @{
                           @Html.TextBox("TextBox")
                        }
                   </div>
               </div>
           </div>
       </div>
    }
</div>  
Lakindu Gunasekara
4#
Lakindu Gunasekara Reply to 2018-01-13 10:52:29Z

I have used float option to align the specific component to right

.right-div {
  float: right;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="form-group">
  @for(int i=0;i
  <2;i++) { <label class="required col-sm-3 control-label">
    TextBox
    </label>
    <div class="col-sm-2 right-div">
      @{ @Html.TextBox("TextBox") }
    </div>
    }
</div>

S.Serp
5#
S.Serp Reply to 2018-01-13 10:55:43Z

You can apply pull-right class (it is replaced by float-right in bootstrap 4). But note that it will use float: right css and the float may have some issues in some conditions!

Other option is to use text-right as it use text-align css and this could be better in some cases.

<div class="form-group">
@for(int i=0;i<2;i++)
{
        <label class="required col-sm-3 control-label">
            TextBox  
        </label>
        <div class="col-sm-2 text-right"> <!-- or pull-right or float-right /-->
            @{
                @Html.TextBox("TextBox")
            }
        </div>
}
</div>  
You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.297342 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO