Bootstrap Navbar-এ কম্পোনেন্ট সজ্জা: navbar-left এবং navbar-right

Navbar-এ নেভ লিংক, ফর্ম, বাটন বা টেক্সট বাম বা ডানে সাজানোর জন্য .navbar-left এবং .navbar-right ইউটিলিটি ক্লাস ব্যবহার করা হয়। এই ক্লাসগুলো CSS float প্রয়োগ করে।

উদাহরণ

নিচের উদাহরণে বাম এবং ডানে বিভিন্ন কম্পোনেন্ট সাজানো হয়েছে:

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap Example</title>
    <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <script src="/scripts/jquery.min.js"></script>
    <script src="/bootstrap/js/bootstrap.min.js"></script>
  </head>
  <body>
    <nav class="navbar navbar-default" role="navigation" style="background: orange;">
      <div class="navbar-header">
        <a class="navbar-brand" href="#">Alignment</a>
      </div>
      <div>
        <!-- বাম সজ্জা -->
        <ul class="nav navbar-nav navbar-left">
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
              Java <b class="caret"></b>
            </a>
            <ul class="dropdown-menu">
              <li><a href="#">JMeter</a></li>
              <li><a href="#">EJB</a></li>
              <li><a href="#">Jasper Report</a></li>
              <li class="divider"></li>
              <li><a href="#">Separated link</a></li>
              <li class="divider"></li>
              <li><a href="#">One more separated link</a></li>
            </ul>
          </li>
        </ul>
        <form class="navbar-form navbar-left" role="search">
          <button type="submit" class="btn btn-default">বাম সাজানো সাবমিট বাটন</button>
        </form>
        <p class="navbar-text navbar-left">বাম সাজানো টেক্সট</p>
        <!-- ডান সজ্জা -->
        <ul class="nav navbar-nav navbar-right">
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
              Java <b class="caret"></b>
            </a>
            <ul class="dropdown-menu">
              <li><a href="#">JMeter</a></li>
              <li><a href="#">EJB</a></li>
              <li><a href="#">Jasper Report</a></li>
              <li class="divider"></li>
              <li><a href="#">Separated link</a></li>
              <li class="divider"></li>
              <li><a href="#">One more separated link</a></li>
            </ul>
          </li>
        </ul>
        <form class="navbar-form navbar-right" role="search">
          <button type="submit" class="btn btn-default">ডান সাজানো সাবমিট বাটন</button>
        </form>
        <p class="navbar-text navbar-right">ডান সাজানো টেক্সট</p>
      </div>
    </nav>
  </body>
</html>

টিপস: রেসপন্সিভ ডিজাইন মেনে navbar-left/navbar-right ছাড়া Flexbox ইউটিলিটি ব্যবহার করুন।