Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

web development

How to create a fixed layout in Bootstrap

Muhammad Shmoon

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

A fixed layout sets the maximum width of any element fixed for all screen sizes in Bootstrap. We also call it a static layout, as it always remains the same.

In the visualization below, we assume that the pink background is the screen size, and the grey box is the main web design. The border around the grey box is the maximum width of the container. We can see that the border around the grey box stops increasing at one point, as it reaches its maximum fixed width.

Visualizing a fixed layout

Bootstrap is an open-source tool for creating responsive and good-looking web applications. It has built-in classes that help developers build better-looking styles.

In Bootstrap, we can use the fixed layout by using the container class in a div tag, or any other HTML tag. The container class is a wrapper element that ensures it does not move in any situation.

Syntax

After we import Bootstrap, the syntax of the container class is as follows:

< tag  class = 'container' >

The tag can be any HTML tag that makes sections.

Code

Explanation

  • Line 6: We import Bootstrap with an HTML file by using a link tag.
  • Line 9: This line uses the container class to make a fixed design layout.
  • Line 11: We use the text-dark Bootstrap class to change the text color to black (dark).

Note: To learn more about the Bootstrap container class, we can click here.

Pros and cons

Some of the pros and cons of using the fixed layout in Bootstrap are as follows:

Pros

  • It has no concept of maximum or minimum width.
  • It is easy to customize the web design.
  • The same width ensures a consistent view of digital content.

Cons

  • It makes long scroll bars on small screens, which may cause a bad user experience.
  • It can create large white spaces on large screens.
  • It upsets the design principles, like the "rule of thirds," which may cause a bad user experience.

RELATED TAGS

web development

CONTRIBUTOR

Muhammad Shmoon
Copyright ©2022 Educative, Inc. All rights reserved

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

Keep Exploring