Hi stephane-lavoisard,
The Bootstrap grid system is a powerful and responsive layout system that allows you to create complex layouts with ease. It is based on a 12-column grid, which makes it flexible and adaptable to various screen sizes and devices.
Columns: Columns are placed inside rows, and the grid system allows you to divide each row into up to 12 columns. You can specify the width of each column using classes like .col-, .col-sm-, .col-md-, .col-lg-, and .col-xl-, where the suffixes represent different screen sizes (extra small, small, medium, large, and extra large, respectively).
For example:
.col-6 creates a column that spans 6 out of 12 columns on all screen sizes.
.col-md-4 creates a column that spans 4 out of 12 columns on medium and larger screen sizes.
With your site, you can try this:
<div class="header-wrap row d-flex align-items-center collapse-static t4-height">
<div class="col-5 col-lg-4 col-xl-4">
<!-- logo section -->
</div>
<div class="t4-navbar col-1 col-lg-6 col-xl-6 d-flex justify-content-center collapse-static">
<!-- menu item -->
</div>
<div class="t4-header-r col-6 col-lg-2 col-xl-2 d-flex align-items-center justify-content-end">
<!-- offcanvas -->
</div>
</div>
The layout consists of 3 columns, each spanning 4 , 6 and 2 out of 12 columns (40% - 60% - 20% width).
