Sayed Rizwan Hashmi Sayed Rizwan Hashmi - 8 months ago 38
HTML Question

How to use boostrap column align from right side?

I am trying to design a form in arabic style. I have used a panel class. text field generally start from left side, but i want to design form from right to left.

.heading {
font-family: monospace;
font-size: 30px;
color: #0D91A5;

<link href="" rel="stylesheet"/>
<div class="col-md-12 ">
<h2 class="heading"> Registration</h2>

<div class="container" style="margin-top:30px">

<div class="col-md-10 col-md-offset-1">
<div class="panel panel-info" style="direction: rtl;">
<div class="panel-heading">
<h3 class="panel-title"><strong class="strong"> تفاصيل طالب | Executive Details</strong></h3>
<div class="panel-body">

<div class="row">

<div class=".col-sm-5 .col-md-6" style="direction: rtl;">

<div class="form-group col-md-12 ">
<div class="col-md-6 col-xs-12 col-xs-12 col-md-offset-6">
<input type="text" name="id_no" id="id_no" class="form-control" placeholder=" رقم| ID Number" tabindex="1">


<div class="col-md-6 col-xs-12 col-md-offset-0">
<input class="form-control" type="text" name="name" id="name" class="form-control" placeholder=" اسم| Name " tabindex="1">


this is coding i am using class offset-6 for textfield start to right side but another textfiled with same grom starting from another line. i want box field in same line.


can anyone tell me which class i want to use? or can i change in bootsrap css file?


If you wish to design your HTML in RTL style as in Arabic language you should use:

Bootstrap RTL

Include the bootstrap-rtl.css file after you include your original Bootstrap file and it will override all the CSS regarding to RTL designs

<link href="css/bootstrap.css" rel="stylesheet" />
<link href="css/bootstrap-rtl.css" rel="stylesheet" />

This is by far the simplest way to work with rtl languages using Bootstrap