title: How to make an iFrame inside bootstrap container-fluid class occupy screen width?
body: <p>I am trying to build ASP.NET website with Master page based on bootstrap framework. I need to fit one page containing an iFrame to occupy complete screen width. Currently it is leaving some space to the left and right (might be default 15px of container class which I have tried changing to 0 in bootstrap.css)</p>
  
  <p>I have also tried using row class within container-fluid and then col-lg-12 and col-md-12 but right and left white space just doesn't vanish!!
  Any help would be appreciated since I'm pretty new to this technology.
  MASTER PAGE CODE:</p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
  
  &lt;html lang="en"&gt;
  &lt;body&gt;
      &lt;div class="container-fluid col-lg-12 col-md-12"&gt;
  
          &lt;form runat="server"&gt;
              &lt;asp:ScriptManager runat="server"&gt;
  
                  &lt;Scripts&gt;
                      &lt;%--To learn more about bundling scripts in ScriptManager see http://go.microsoft.com/fwlink/?LinkID=301884 --%&gt;
                      &lt;%--Framework Scripts--%&gt;
  
                  &lt;/Scripts&gt;
              &lt;/asp:ScriptManager&gt;
  
  
              &lt;div class="navbar navbar-inverse navbar-fixed-top"&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="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" runat="server" href="About.aspx"&gt;
                              &lt;img class="media-object media-middle" src="logo.png" alt="Logo" /&gt;&lt;/a&gt;
                          &lt;a class="navbar-brand" runat="server" href="~/"&gt;DASHBOARDS&lt;/a&gt;
  
  
  
                      &lt;/div&gt;
                      &lt;div class="navbar-collapse collapse" style="text-align: end"&gt;
  
                          &lt;asp:Label ID="Label1" CssClass="label" runat="server" Text=""&gt;&lt;/asp:Label&gt;
                          &lt;asp:Label ID="Label2" CssClass="label" runat="server" Text=""&gt;&lt;/asp:Label&gt;
                          &lt;asp:Label ID="Label3" CssClass="label" runat="server" Text=""&gt;&lt;/asp:Label&gt;
                          &lt;asp:Button ID="btnClose" CssClass=" btn btn-primary btn-default" runat="server" Text="Change Parameters" OnClick="btnChange_Click" /&gt;
  
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
            &lt;div class="container body-content"&gt;
                  &lt;asp:ContentPlaceHolder ID="MainContent" runat="server"&gt;
                  &lt;/asp:ContentPlaceHolder&gt; 
                  &lt;hr /&gt;
              &lt;/div&gt;
          &lt;/form&gt;
      &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>PAGE CODE:</p>
  
  <pre><code>&lt;asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server"&gt;
  
  
     &lt;div class="container-fluid col-lg-12 col-md-12"&gt;               
  
              &lt;asp:Panel ID="Panel1" runat="server"&gt;
  
                  &lt;div id="menu" role="group"&gt;
  
                      &lt;asp:LinkButton ID="LinkButton1" CssClass="activenew" runat="server" OnClick="LinkButton1_Click"&gt;Button1&lt;/asp:LinkButton&gt;
  
                      &lt;asp:LinkButton ID="LinkButton2" runat="server" OnClick="LinkButton2_Click"&gt;Button2&lt;/asp:LinkButton&gt;
  
                      &lt;asp:LinkButton ID="LinkButton3" runat="server" OnClick="LinkButton3_Click"&gt;Button3&lt;/asp:LinkButton&gt;
  
                      &lt;asp:LinkButton ID="LinkButton4" runat="server" OnClick="LinkButton4_Click"&gt;Button4&lt;/asp:LinkButton&gt;
  
  
                  &lt;/div&gt;
  
              &lt;/asp:Panel&gt;
  
              &lt;!-- 16:9 aspect ratio --&gt;
              &lt;div class="embed-responsive embed-responsive-16by9"&gt;
                  &lt;iframe id="iFrameDiv" runat="server" class="embed-responsive-item" style="border: 1px solid"&gt;&lt;/iframe&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
  &lt;/asp:Content&gt;
  </code></pre>
  
  <p>I want the iFrame in the second page to occupy space according to screen width and height. Currently it leaves space at the bottom, and left and right!</p>