Using Bootstrap for 1170px Fixed Width Layout

Rathi_kumari

This discussion will focus on how to use Bootstrap's fixed-width layout for an 1170px width website. We will discuss the different components of Bootstrap's fixed-width layout and how to customize it for an 1170px width website. We will also discuss the pros and cons of using this layout and how to ensure that the website looks good on all devices. Additionally, we will discuss the best practices for using Bootstrap's fixed-width layout for an 1170px width website.

taara_raval

Using a bootstrap fixed width layout for an 1170px width is fairly straightforward. Here are the steps you need to follow:

Start by setting the main container to 1170px. To do this, open the ‘bootstrap.css’ file from the Bootstrap framework and look for the .container element. This is where you will update the max-width value to 1170px.
After setting the main container, you need to adjust the columns sizes. Look for the ‘grid.scss’ file containing different breakpoints and update the ‘Grid Containers’ to 1170px.
Next, adjust the columns themselves. Look for the ‘columns.scss’ file and update the column widths to 1170px.
Lastly, you need to adjust the media queries. Look for the ‘responsive-utilities.scss’ file and look for the ‘Grid Containers’ and ‘Max Widths’ sections, followed by ‘Media Queries’. Adjust the max-widths to 1170px and you are set.

Once you have done that, you have successfully implemented the Bootstrap fixed width layout. However, if you encounter any problems, you can always refer to the official Bootstrap Documentation page (https://getbootstrap.com/docs/4.4/getting-started/introduction/) for further help.

Samira_taul

Bootstrap provides a fixed-width layout design that you can use for a website of 1170 pixels wide. Here's how to set up your layout:

Open your Bootstrap CSS file and find the @media (min-width: 1200px) entry. If this does not exist, insert this code into the stylesheet:

@media (min-width: 1200px) {
.container {
width: 1170px;
}
}

Change the margin-left margins for all columns in the same media query to match the distance you want from the left and right:

@media (min-width: 1200px) {
.col-md-1,
.col-md-2,
.col-md-3,
.col-md-4,
...
.col-md-12 {
float: left;
margin-left: 15px;
margin-right: 15px;
}
}

Adjust the grid fractions (column numbers) accordingly. For example, if you have a two-column layout (md-12) and you want 1170px width, the fractions would need to be adjusted to be able to fit into 1170px:

@media (min-width: 1200px) {
.col-md-12 {
width: 58.5%;
}
.col-md-6 {
width: 29.25%;
}
...
}

For more information and detailed instructions on how to configure Bootstrap's fixed-width layouts, please refer to this guide:
https://getbootstrap.com/docs/4.0/layout/overview/#fixed-width-layouts