What is a Bootstrap Container?

1.	What is a Bootstrap Container?
Answer» Bootstrap needed something to wrap elements and CONTAIN its grid system, therefore that leaded to introduction of container, which can be fixed or fluid. Fixed Container Use the container class when you want fixed-WIDTH which is responsive. Include it like this: &LT;div class="container"> … </div> The following is an example: <!DOCTYPE html> <html LANG="en"> <head> <title>Bootstrap Demo</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h1>Demo Page</h1> <p>The .container class provides a fixed width container.</p> </div> </body> </html> Fluid Container Use the container-fluid element to provide a full width container that spans the entire width of the viewport: Include it like this: <div class="container-fluid"> … </div> Let us SEE an example: <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Demo</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> </head> <body> <div class="container-fluid"> <h1>Demo Page</h1> <p>The .container-fluid class provides a full width container that spans the entire width of the viewport.</p> </div> </body> </html>

Answer»

Bootstrap needed something to wrap elements and CONTAIN its grid system, therefore that leaded to introduction of container, which can be fixed or fluid.

Fixed Container

Use the container class when you want fixed-WIDTH which is responsive. Include it like this:

&LT;div class="container"> … </div>

The following is an example:

<!DOCTYPE html> <html LANG="en"> <head> <title>Bootstrap Demo</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h1>Demo Page</h1> <p>The .container class provides a fixed width container.</p> </div> </body> </html>

Fluid Container

Use the container-fluid element to provide a full width container that spans the entire width of the viewport:

Include it like this:

Let us SEE an example:

<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Demo</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> </head> <body> <div class="container-fluid"> <h1>Demo Page</h1> <p>The .container-fluid class provides a full width container that spans the entire width of the viewport.</p> </div> </body> </html>

What is a Bootstrap Container?

Discussion

No Comment Found

Related InterviewSolutions

Reply to Comment