HOME C C++ PYTHON JAVA HTML CSS JAVASCRIPT BOOTSTRAP JQUERY REACT PHP SQL AJAX JSON DATA SCIENCE AI

Bootstrap Containers

In Bootstrap, a container is a fundamental layout element used to structure the content within a web page. It helps to create a responsive and organized layout by providing a fixed-width container or a fluid-width container, depending on the class you use. Containers are a key component of the Bootstrap grid system.

There are two main types of containers in Bootstrap:

1.Fixed-Width Container (container class):

  • The container class creates a responsive fixed-width container.
  • The container will adapt its width based on the screen size but maintains a fixed maximum width for larger screens.
  • It is suitable for designs where you want to limit the width of the content and provide a consistent layout.
  • Container Example:

     <div class="container">
    <h1>My First Bootstrap Page</h1> <p>This is some text.</p> </div>
    You can click on above box to edit the code and run again.

    Output

    2.Fluid-Width Container (container-fluid class):

  • The container-fluid .class creates a full-width, fluid container that spans the entire width of the viewport.
  • It is suitable for designs where you want the content to extend across the full width of the screen.
  • Container-Fluid Example:

      
     <div class="container-fluid">
            <h1>My First Bootstrap Page</h1>
            <p>This is some text.</p>
        </div>
    
    You can click on above box to edit the code and run again.

    Output