Containers in Bootstrap with examples Last Updated : 20 Sep, 2024 Summarize Comments Improve Suggest changes Share Like Article Like Report In Bootstrap, containers are fundamental building blocks for structuring your webpage's content. They help to organize and encapsulate content within a defined device or viewport. By using containers, you ensure that your website is responsive, with elements aligned properly, and adaptable to different screen sizes for a smooth and consistent layout presentation.There are two container classes in Bootstrap: ClassDescription.containerFixed-width layout for webpage content, ensuring consistent padding and alignment..container-fluidFluid-width layout for webpage content, spanning the full width of the viewport.Let's look at each of the above two classes in detail with examples:1 .container: Fixed-Width LayoutThe .container class creates a fixed-width layout that adjusts its size based on the current viewport or device. This class ensures that content within it is aligned and padded appropriately, providing a visually consistent presentation across different screen sizes.Example: In the example we utilize Bootstrap 5 to create a layout with a dark background, displaying "GeeksforGeeks" in green text and a description in light text, within a container. HTML <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href= "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet"> <title>Bootstrap Example</title> <script src= "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"> </script> </head> <body> <!-- Since we are using the class container, the below div will not take complete width of its parent. --> <div class="container mt-4"> <div class="bg-dark"> <h1 class="text-success"> GeeksforGeeks </h1> <p class="text-light"> A computer science portal for geeks. </p> </div> </div> </body> </html> Output:Containers in Bootstrap Example Output2 .container-fluid: Full-Width LayoutThe .container-fluid class provides a fluid-width layout, meaning the container stretches to occupy the full width of the viewport. This makes it ideal for layouts that need to cover the entire screen, ensuring that the content adjusts seamlessly across all devices and screen sizes.Example: In this example we use Bootstrap to create a responsive layout with a dark background, displaying "GeeksforGeeks" in green text and a description in light text. HTML <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href= "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> <link href= "https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet"> <title>Bootstrap Example</title> <script src= "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"> </script> </head> <body> <!-- Since we are using the class container-fluid, the below div will expand whenever the viewport is resized. --> <div class="mt-4 container-fluid bg-dark"> <h1 class="text-success">GeeksforGeeks</h1> <p class="text-light">A computer science portal for geeks.</p> </div> </body> </html> Output:Containers in Bootstrap Example Output Comment More infoAdvertise with us C chaitanyashah707 Follow Improve Article Tags : Web Technologies Bootstrap Similar Reads Display Property in Bootstrap with Examples In Bootstrap, the display property controls the layout behavior of elements. Bootstrap provides utility classes like d-none (hide), d-block (display as block), d-inline (display as inline), etc., for responsive display manipulation. The available classes are: Class NameDescription.d-blockSets the di 2 min read Responsive Video or Slideshow Embeds in Bootstrap with Examples Bootstrap allows creating responsive video or slideshow embeds based on the width of the display or parent element by creating a native ratio that scales with the device. Using responsive video or slideshow embeds the content can be scaled automatically as per the screen size or the parent container 1 min read Screen Reader utilities in bootstrap with Examples The screen reader utility in Bootstrap helps to restrict an element to the screen readers only. That is by using the screen reader utility we can hide an element in all other devices except for screen readers. The Screen Reader utility also provide an option to display the hidden elements again when 2 min read Input Groups in Bootstrap with Examples Input Groups in Bootstrap are used to extend the default form controls by adding text or buttons on either side of textual inputs, custom file selectors, or custom inputs. Basic input groups: The following classes are the base classes that are used to add the groups to either side of the input boxes 7 min read Bootstrap Buttons Bootstrap Buttons are pre-designed styled buttons elements that come in various styles, colors, and sizes. Bootstrap buttons are pre-defined by Bootstrap classes. Solid ButtonsBootstrap provides us with a series of classes that correspond to different solid button styles. These classes are listed be 2 min read Responsive images in Bootstrap with Examples Responsive images in Bootstrap adjust automatically to fit different screen sizes, Bootstrap provides utilities to create responsive images that adapt to various screen sizes. By applying the img-fluid class, images scale proportionally within their parent containers, ensuring optimal viewing on dif 3 min read Borders in bootstrap with examples Borders: Borders are generally used to display an outline around a box or table cell or any other HTML element. In Bootstrap, there are different classes available to add or remove borders. The classes that are used to add borders are referred as Additive classes and those that are used to remove bo 4 min read Displaying inline and multiline blocks of code using Bootstrap Bootstrap provides a number of classes for displaying inline and multiline blocks of code. Displaying Inline Code: Inline code should be wrapped in <code> tags. The resulting text will be displayed in a fixed-width font and given a red font color. Note: The < and > tags should be replace 3 min read BootStrap | Positioning an element with Examples The Bootstrap framework provides us with a series of classes that allows us to change the position of an element. It provides us with five classes that are common in function with the CSS position property. In addition, it provides three additional classes for controlling the position of an element. 6 min read Bootstrap Float Utilities Bootstrap provides us a series of float utility classes, that allow an element to float left, or right, or make it not to float, just like CSS float property.Bootstrap breakpoints:Â sm: Viewport greater than 576px.md: Viewport greater than 768px.lg: Viewport greater than 992px.xl: Viewport greater th 6 min read Like