lafikl

<div class="top-bar">
  <div class="container">
      <div class="row">

          <div class="col-three-mobile col-two logo">

             <a href="#" class="brand">اسم الموقع</a>

          </div>

lafikl

<form class="inline">  
  <input type="text" placeholder="الحقل الأول" id="field1" />
  <button class="btn btn-black btn-fancy">إضافة</button>
</form>

lafikl

<div class="top-bar">
    <div class="container">
        <div class="row">

            <div class="col-three-mobile col-two logo">

               <a href="#" class="brand">اسم الموقع</a>

            </div>

lafikl

<form>  
  <input type="text" placeholder="الحقل الأول" id="field1" />
  <span class=" prefix">$</span>  <input type="text" placeholder="القيمة المادية" id="field1" />
  <textarea placeholder="تجربة" rows="5" cols="45" ></textarea>
  <button class="btn btn-black btn-fancy">إضافة</button>
</form>

lafikl

<form>
  <fieldset>
      <legend>مجموعة حقول</legend>
      <input type="text" placeholder="الحقل الأول" id="field1" />
      <input type="text" placeholder="الحقل الثاني" id="field1" />
      <textarea placeholder="تجربة" rows="5" cols="45" ></textarea>
      <button class="btn btn-black btn-fancy">إضافة</button>

  </fieldset>
</form>

lafikl

<form>
        <div class="col-two  col-one-mobile">
            <label>اسمك</label>
        </div>
        <div class="col-ten col-three-mobile">
            <input type="text" class="" />
        </div>
        <div class="col-two col-one-mobile">
            <label>اسمك</label>
        </div>

lafikl

<form>
    <input type="text" placeholder="الحقل الأول" id="field1" />
    <input type="text" placeholder="الحقل الثاني" id="field1" />
    <textarea placeholder="تجربة" rows="5" cols="45" ></textarea>
    <button class="btn btn-black btn-fancy">إضافة</button>
</form>

lafikl

<div class="pull-left">
  محاذاة لليسار
</div>
<div class="pull-right">
  محاذاة لليمين
</div>

lafikl

<!-- with forms -->
<input type="submit" value="حفظ" class="btn" />
<button class="btn">حفظ</button>

lafikl

<!-- Sizes -->
<a href="#" class="btn btn-large">زر كبير</a>
<a href="#" class="btn">زر متوسط الحجم</a>
<a href="#" class="btn btn-small">زر صغير</a>
<a href="#" class="btn btn-mini">زر صغير جداً</a>