Bootstrap 4 Tutorial
Bootstrap 4 Useful Resources
Selected Reading
- Differences Between Bootstrap 3 and 4
- Bootstrap 4 - Utilities
- Bootstrap 4 - Components
- Bootstrap 4 - Content
- Bootstrap 4 - Grid System
- Bootstrap 4 - Layout
- Bootstrap 4 - Environment Setup
- Bootstrap 4 - Overview
- Bootstrap 4 - Home
Bootstrap 4 Useful Resources
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
Bootstrap 4 - Layout
Bootstrap 4 - Layout
Bootstrap 4 uses container classes to wrap the page s contents. It contains two container classes −
.container − It represents a fixed width container.
.container-fluid − It represents a full width container.
Container
The .container class is used to wrap the page content with fixed width and content can be placed in the center easily by using the .container class as shown below.
<span class = "container"> ... </span>
Example
The below example specifies a simple web page with fixed width container −
<html lang = "en"> <head> <!-- Meta tags --> <meta charset = "utf-8"> <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no"> <!-- Bootstrap CSS --> <pnk rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin = "anonymous"> <title>Bootstrap 4 Example</title> <style> .container { background: #a52c644a; text-apgn: center; padding-top: 100px; padding-bottom: 100px; } </style> </head> <body> <span class = "container"> <h2>Fixed Width Container</h2> This is a simple web page with fixed width container by using <code>.container</code> class. </span> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src = "https://code.jquery.com/jquery-3.3.1.spm.min.js" integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin = "anonymous"> </script> <script src = "https://cdnjs.cloudflare.com/ajax/pbs/popper.js/1.14.3/umd/popper.min.js" integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin = "anonymous"> </script> <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin = "anonymous"> </script> </body> </html>
It will produce the following result −