I'm trying to develop an application with help of Bootstrap in order to respect Desktop, Tablet and Mobile.

Currently I'm facing an issue with the table responsiveness

Below I have provided the screenshot and the code, kindly let me know where i do a mistake.

You can see from the second screenshot, where the second getting aligned to responsiveness but the other not. 

Screenshot 1 :: Perfect alignment on tablet 

 

Screenshot 2 :: Not perfect on mobile



CODE ::

 &lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;meta name="description" content=""&gt;
    &lt;meta name="author" content=""&gt;
    &lt;link rel="icon" href="../../favicon.ico"&gt;

    &lt;title&gt;Fixed Top Navbar Example for Bootstrap&lt;/title&gt;

    &lt;!-- Bootstrap core CSS --&gt;
    &lt;link href="js/libs/bootstrap/css/bootstrap.min.css" rel="stylesheet"&gt;

    &lt;!-- Custom styles for this template --&gt;
    &lt;link href="js/libs/bootstrap/customcss/navbar-fixed-top.css" rel="stylesheet"&gt;

  &lt;/head&gt;

  &lt;body&gt;

    &lt;!-- Fixed navbar --&gt;
    &lt;div class="navbar navbar-default navbar-fixed-top" role="navigation"&gt;
      &lt;div class="container"&gt;
        &lt;div class="navbar-header"&gt;
          &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"&gt;
            &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
            &lt;span class="icon-bar"&gt;&lt;/span&gt;
            &lt;span class="icon-bar"&gt;&lt;/span&gt;
            &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;/button&gt;
          &lt;a class="navbar-brand" href="#"&gt;Project Title&lt;/a&gt;
        &lt;/div&gt;
        &lt;div class="navbar-collapse collapse"&gt;
          &lt;ul class="nav navbar-nav"&gt;
            &lt;li class="active"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;

            &lt;li class="dropdown"&gt;
              &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;Mission &lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
              &lt;ul class="dropdown-menu" role="menu"&gt;

                &lt;li class="divider"&gt;&lt;/li&gt;
                &lt;li class="dropdown-header"&gt;Nav header&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;Separated link&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;One more separated link&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
            &lt;/li&gt;
            &lt;li class="dropdown"&gt;
              &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;Request &lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
              &lt;ul class="dropdown-menu" role="menu"&gt;

                &lt;li class="divider"&gt;&lt;/li&gt;
                &lt;li class="dropdown-header"&gt;Nav header&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;Separated link&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;One more separated link&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
          &lt;ul class="nav navbar-nav navbar-right"&gt;
            &lt;li&gt;&lt;a href="../navbar/"&gt;Default&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="../navbar-static-top/"&gt;Static top&lt;/a&gt;&lt;/li&gt;
            &lt;!--li class="active"&gt;&lt;a href="./"&gt;Fixed top&lt;/a&gt;&lt;/li --&gt;
          &lt;/ul&gt;
        &lt;/div&gt;&lt;!--/.nav-collapse --&gt;
      &lt;/div&gt;
    &lt;/div&gt;

    &lt;div class="container"&gt;

      &lt;!-- Main component for a primary marketing message or call to action --&gt;
      &lt;div class="jumbotron"&gt;
        &lt;h1&gt;Project Title&lt;/h1&gt;
        &lt;p&gt;&lt;/p&gt;
        &lt;p&gt;&lt;/p&gt;
        &lt;p&gt;
          &lt;a class="btn btn-lg btn-primary" href="../../components/#navbar" role="button"&gt;View navbar docs &amp;raquo;&lt;/a&gt;
        &lt;/p&gt;
      &lt;/div&gt;


       &lt;div class="row"&gt;
        &lt;div class="col-md-12"&gt;
          &lt;div class="panel panel-warning"&gt;
            &lt;div class="panel-heading"&gt;
              &lt;h3 class="panel-title"&gt;Panel title&lt;/h3&gt;
            &lt;/div&gt;
            &lt;div class="panel-body"&gt;

                &lt;div class="col-md-12"&gt;
                &lt;table class="table table-bordered table-condensed files" border="1"&gt;
                  &lt;thead&gt;
                    &lt;tr&gt;
                        &lt;th&gt;Emp Id&lt;/th&gt;
                        &lt;th&gt;Emp Name&lt;/th&gt;
                        &lt;th&gt;Start Date&lt;/th&gt;
                        &lt;th&gt;End Date&lt;/th&gt;
                        &lt;th&gt;Days&lt;/th&gt;
                        &lt;th&gt;Status&lt;/th&gt;
                        &lt;th&gt;Status&lt;/th&gt;
                    &lt;/tr&gt;
                  &lt;/thead&gt;
                  &lt;tbody&gt;
                     &lt;tr&gt;
                        &lt;td&gt;123456&lt;/td&gt;
                        &lt;td&gt;Employee First &amp; Last Name&lt;/td&gt;
                        &lt;td&gt;04/DEC/14&lt;/td&gt;
                        &lt;td&gt;30/JAN/15&lt;/td&gt;
                        &lt;td&gt;35&lt;/td&gt;
                        &lt;td&gt;
                            &lt;button type="button" class="btn btn-success"&gt;
                                &lt;i class="glyphicon glyphicon-ok-sign"&gt;&lt;/i&gt;
                                 &lt;span&gt;Validated&lt;/span&gt;
                            &lt;/button&gt;
                        &lt;/td&gt;
                        &lt;td&gt;
                            &lt;button type="button" class="btn btn-warning"&gt;
                             &lt;i class="glyphicon glyphicon-question-sign"&gt;&lt;/i&gt;
                                 &lt;span&gt;Pending&lt;/span&gt;
                            &lt;/button&gt;     
                        &lt;/td&gt;
                    &lt;/tr&gt;
                  &lt;/tbody&gt;
                &lt;/table&gt;
              &lt;/div&gt; 

            &lt;/div&gt;
          &lt;/div&gt;

        &lt;/div&gt;
      &lt;/div&gt;



    &lt;/div&gt; &lt;!-- /container --&gt;


    &lt;!-- Bootstrap core JavaScript
    ================================================== --&gt;
    &lt;!-- Placed at the end of the document so the pages load faster --&gt;
    &lt;script src="js/libs/jQuery/js/jquery-2.0.3.js"&gt;&lt;/script&gt;
    &lt;script src="js/libs/bootstrap/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
&lt;/html&gt;



Question: What's the point in limiting the number of security groups per tenant In OpenStack?
Answer: The most obvious effect is to keep firewall rules to a manageable level, which does not have a significant impact on performance. At a certain point, you may end up with too many firewall rules and not enough CPU to process them quickly enough. The default limits may seem low, but they're sufficient for most people, who will never create more than a few security groups with perhaps half a dozen rules each.