WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

Bootstrap 4 - Layout


Bootstrap four uses box classes to wrap the web page's contents. It includes field classes

  • .Container − It represents a hard and fast width box.

  • .Box-fluid − It represents a complete width field.

Bootstrap calls for a containing detail to wrap elements and include its grid system (greater on the grid gadget next).

fixed Container

A constant box is a (responsive) constant width field. As you resize your browser, its width remains intact, until it passes a certain breakpoint (as exact via you — more on that next), at which period it will resize to the brand new width for that ruin factor.
<div magnificence = "field">
   ...
</div>

Example

The underneath example specifies a easy net page with constant width box
<html lang="en">
    <head>
        <!-- Meta tags -->
        <meta charset="utf-eight">
        <meta name="viewport" content material="width=tool-width, preliminary-scale=1, reduce-to-in shape=no">
        <!-- Bootstrap CSS -->
        <hyperlink rel="stylesheet" href="https://stackpath.Bootstrapcdn.Com/bootstrap/four.1.Three/css/bootstrap.Min.Css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="nameless">
        <title>Bootstrap 4 Example</identify>
    <style>
        .Container 
        history: #a52c644a;
        textual content-align: middle;
        padding-top: 100px;
        padding-backside: 100px;
        
    </fashion>
    </head>
    <body>
        <div magnificence="field">
            <h2>Fixed Width Container</h2>
            This is a easy web page with fixed width container via using <code>.Field</code> elegance.
        </div>
        <!-- jQuery first, then Popper.Js, then Bootstrap JS -->
        <script src="https://code.Jquery.Com/jquery-three.3.1.Slender.Min.Js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="nameless"></script>
        <script src="https://cdnjs.Cloudflare.Com/ajax/libs/popper.Js/1.14.3/umd/popper.Min.Js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="nameless"></script>
        <script src="https://stackpath.Bootstrapcdn.Com/bootstrap/four.1.3/js/bootstrap.Min.Js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="nameless"></script>
    </frame>
</html>
It will produce the subsequent end result − Bootstrap four Example

Fixed Width Container

This is a easy internet web page with fixed width field via using .Box magnificence.
Try it Yourself »

Fluid Container

A fluid box spans the full width of the viewport. It will amplify and agreement fluidly as you resize the browser. This is in comparison to the constant width box so as to seem to "jump" to the new length as you skip a given wreck factor.
<div elegance = "box-fluid">
   ...
</div>
The beneath instance specifies a simple internet page with full width box −
<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta call = "viewport" content = "width = tool-width, preliminary-scale = 1, decrease-to-match = no">
      
      <!-- Bootstrap CSS -->
      <hyperlink rel = "stylesheet" 
         href = "https://stackpath.Bootstrapcdn.Com/bootstrap/four.1.3/css/bootstrap.Min.Css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      <identify>Bootstrap 4 Example</name>
       <fashion>
         .box-fluid 
            historical past: #a52c644a;
            text-align: center;
            padding-pinnacle: 100px;
            padding-backside: 100px;
            
      </fashion>
   </head>
   
   <body>
      <div class = "box-fluid">
         <h2>Full Width Container</h2>
         This is a easy internet page with full width container by way of the usage of 
         <code>.Box-fluid</code> class.
      </div>
      
      <!-- jQuery first, then Popper.Js, then Bootstrap JS -->
      <script src = "https://code.Jquery.Com/jquery-3.3.1.Slender.Min.Js" 
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://cdnjs.Cloudflare.Com/ajax/libs/popper.Js/1.14.Three/umd/popper.Min.Js" 
         integrity =" sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "nameless">
      </script>
      
      <script src = "https://stackpath.Bootstrapcdn.Com/bootstrap/4.1.Three/js/bootstrap.Min.Js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </frame>
</html>
Try it Yourself »

It will produce the following result −

Bootstrap four Example

Full Width Container

This is a easy net web page with full width container by using using .Container-fluid elegance.