• Accueil
  • Info
  • Publicité
  • Privacy & Policy
  • Nous Contacter
No Result
View All Result
Technique de pointe
  • Actualité
  • Technologies
  • Jeu vidéo
  • Mobile
  • Astuces
  • HTML5 / CSS
  • Java Script
  • PHP
  • Article Sponsorisé
  • Astuces
  • Jeu vidéo
  • Nous Contacter
MYCAMER
  • Actualité
  • Mobile
  • Jeu vidéo
    10 tropes de jeux vidéo qui n’ont aucun sens

    10 tropes de jeux vidéo qui n’ont aucun sens

    Dead Space Remake – Dans le vide (Chapitre 7)

    Dead Space Remake – Dans le vide (Chapitre 7)

    Sony brevète un « coach d’inventaire de jeux vidéo » pour aider les joueurs indécis dans la gestion des stocks

    Sony brevète un « coach d’inventaire de jeux vidéo » pour aider les joueurs indécis dans la gestion des stocks

    10 boss de jeux vidéo les plus hilarants involontairement

    10 boss de jeux vidéo les plus hilarants involontairement

    Tout ce que nous avons vu au Xbox Developer Direct d’aujourd’hui

    Tout ce que nous avons vu au Xbox Developer Direct d’aujourd’hui

    Le Xbox Game Pass a atteint de nouveaux sommets d’abonnés lors du deuxième trimestre 2023 de Microsoft (MSFT)

    Le Xbox Game Pass a atteint de nouveaux sommets d’abonnés lors du deuxième trimestre 2023 de Microsoft (MSFT)

    DANIEL MATTHEWS: Arsenal ‘Starboy’ Saka est l’assassin souriant, craignant Dieu et aimant les jeux vidéo

    The Last of Us Episode 2 est réalisé par le co-créateur du jeu vidéo

    The Last of Us Episode 2 est réalisé par le co-créateur du jeu vidéo

    Le créateur de personnage dans le jeu vidéo russe vous permet de choisir entre 3 types différents de gars blanc chauve grimaçant

    Le créateur de personnage dans le jeu vidéo russe vous permet de choisir entre 3 types différents de gars blanc chauve grimaçant

  • Developpement web
    • All
    • Java Script
    • Language HTML5
    Nouvelles FE |  Avez-vous les compétences que rechercheront les employeurs en 2023?

    Nouvelles FE | Avez-vous les compétences que rechercheront les employeurs en 2023?

    À la recherche d’un emploi en développement Web ?  Vérifiez la dernière date, le lien d’application, l’allocation ici

    À la recherche d’un emploi en développement Web ? Vérifiez la dernière date, le lien d’application, l’allocation ici

    À la recherche d’un emploi dans le développement Web ?  Voici une liste de stages auxquels postuler

    À la recherche d’un emploi dans le développement Web ? Voici une liste de stages auxquels postuler

    Le spécialiste du marketing numérique Farhadul Alam gère avec succès sa société d’hébergement de domaine à Dubaï, qui fournit aux clients des services d’hébergement abordables

    Trois seront honorés au ‘Sunshine Sunday’ au profit du camp de jour Sunrise Lucille et Jay Chazanoff du JCC

    Trois seront honorés au ‘Sunshine Sunday’ au profit du camp de jour Sunrise Lucille et Jay Chazanoff du JCC

    Nouveaux produits infosec de la semaine : 27 janvier 2023

    Nouveaux produits infosec de la semaine : 27 janvier 2023

    10 tendances de développement Web en 2023

    10 tendances de développement Web en 2023

    CCS HOOPS : Lady Mountaineers dépasse Covenant ;  Les alpinistes tombent |  Des sports

    CCS HOOPS : Lady Mountaineers dépasse Covenant ; Les alpinistes tombent | Des sports

    Job Vacancies For Today Wednesday 25th January 2023

    Job Vacancies For Today Wednesday 25th January 2023

  • Astuces
    Amorcer un document Quarto {ojs} avec un bloc-notes observable

    WordPress Password Protection – A Complete Guide

    La vulnérabilité du plugin anti-spam WordPress affecte jusqu’à 60 000 sites

    La vulnérabilité du plugin anti-spam WordPress affecte jusqu’à 60 000 sites

    Comment déployer facilement une application full-stack dans Portainer avec des templates

    Comment déployer facilement une application full-stack dans Portainer avec des templates

    Microsoft dévoile le nouveau plugin IndexNow pour les sites WordPress

    Comment créer un site Web WordPress

    Shopify chute légèrement alors que les pertes et les licenciements se profilent

    Shopify chute légèrement alors que les pertes et les licenciements se profilent

    WordPress atteint de multiples vulnérabilités dans les versions antérieures à 6.0.3

    WordPress atteint de multiples vulnérabilités dans les versions antérieures à 6.0.3

    Exam Cram est de retour à la bibliothèque publique de Burlington « Burlington Gazette

    Exam Cram est de retour à la bibliothèque publique de Burlington « Burlington Gazette

    Comment créer un thème enfant et un thème de bloc

    Comment créer un thème enfant et un thème de bloc

    Hébergement web vs hébergement WordPress : quelle est la différence ?

    Hébergement web vs hébergement WordPress : quelle est la différence ?

  • Nous contacter
No Result
View All Result
MYCAMER
No Result
View All Result
ADVERTISEMENT
Home Astuces

Understanding Bootstrap 5 Layout – Designmodo

Caleb by Caleb
mars 28, 2021
in Astuces
0
0
Understanding Bootstrap 5 Layout – Designmodo
353
SHARES
2.1k
VIEWS
Share on FacebookShare on TwitterRedditLinkedinWhatsappTelegram
Obtenez des bénéfices toutes les 10 minutes!



BootstrapSam Norton • March 24, 2021 • 10 minutes READ

Building website layouts is a complex task. When the web was introduced we don’t have any specific methods, only tables that were initiated later on.

After a few years came divs along with some other HTML tags and tools that can help you build decent boxy website layouts. Then, as technology progressed, the idea of responsive website design was introduced hence frontend frameworks were inveterate.

One of the most popular front-end frameworks to build powerful yet awesome web layouts is Bootstrap. Bootstrap has always been the in-demand potent framework for developing responsive projects. Bootstrap offers a responsive, mobile-first fluid grid system that adequately scales up to 12 columns as the screen or viewport size increases. It’s jam-packed with predefined classes for easy layout creation, as well as useful mixins for generating semantic and fluid layouts.

With Bootstrap 5 recently released, there are few additional classes that we’re added related to the layout system. The following is a guide to the fundamental concept of the new version of Bootstrap, particularly the grid system.

The Bootstrap 5 Layout Grid System

With so many efforts for a virtual grid foundation, there hasn’t been any success even with the use of tables which made scaling impossible especially for smaller viewports due to its horizontal range inflexibility. When divs were introduced, it became possible using CSS to provide a grid-like system which then became the basic basis of every CSS frameworks including Bootstrap.

Bootstrap is like a canvas by default with a horizontal grid on a web page where elements are being placed within a particular viewport control as screen size increases. In order to use the basic grid system of Bootstrap, you must use the right doctype using HTML5 along with the viewing area settings via meta viewport.

Online Email Template Builder

With Postcards you can create and edit email templates online without any coding skills! Includes more than 100 components to help you create custom emails templates faster than ever before.

Try FreeOther Products

See code below.


<!DOCTYPE html>
<html lang="en">
   <head>
      <meta name="viewport" content="width=device-width, initial-scale=1" />
   </head>
   ....
</html>

Using the responsive meta viewport tag above simply means that the browser will render the width of the webpage with the size of the viewport where the webpage is currently being viewed. Just a note that you must not use this meta tag if you are not sure if your website was designed for responsive design or not. The result might be unpredictable.

Containers

Bootstrap uses container elements as the basis for its grid system. Containers can be used several times, but should not be nested. There are three types of container class that you can use: .container, .container-fluid and responsive container. The .container class provides a centered responsive pixel grid layout while the .container-fluid provides a full-width layout across all viewport sizes. The responsive container simply generates a responsive container which is width: 100% until the specified breakpoint. The maximum width of the container will change on different viewports based on the container’s semantic width breakpoint (e.g .container-*).

The table below shows each container’s max-width when you choose to use any of the predefined container classes.

Understanding Bootstrap 5 Layout

Let’s see how each container class works on different screen resolutions or viewport sizes. Below, we have a basic markup for each container class.


<div class="container">.container</div>
<div class="container-fluid">.container-fluid</div>
<div class="container-sm">.container-sm</div>
<div class="container-md">.container-md</div>
<div class="container-lg">.container-lg</div>
<div class="container-xl">.container-xl</div>
<div class="container-xxl">.container-xxl</div>

The containers above should look like this on double extra-large screen resolution:

Bootstrap 5 Containers

And this is how it should look like on extra-large screen resolution:

Extra-large screen resolution

This is how it should look like on large screen resolution:

Large screen resolution

Here’s on medium screen resolution or tablet devices:

Medium screen resolution

Finally, this how it should look like on smaller screen resolution or mobile devices:

Small screen resolution

Rows

In order to use the Bootstrap grid system, you need to insert at least a single row of columns. Each container class can have one or more rows nested inside of it. A bootstrap row is simply a group of horizontal Bootstrap columns that can be broken into 12 parts.

Before we talk about columns, let’s look at the markup for rows.


<div class="container">
   <div class="row">
      <!-- insert column code here -->
   </div>
</div>

The code above simply creates one row but you can have as many rows within a container as you like. Rows can be reused as many times as you like on a single web page. Here’s how you would code a three-row layout:


<div class="container">
   <div class="row">
      <!-- insert column code here -->
   </div>
   <div class="row">
      <!-- insert column code here -->
   </div>
   <div class="row">
      <!-- insert column code here -->
   </div>
</div>

Columns

Bootstrap consists of a six-column class at your disposal which can adapt across all six default breakpoints. Let’s go over the fine points of each column class in Bootstrap 5.

  • Extra small (xs) column class for targeting mobile devices that has a max-width of 575 pixels.
  • Small (sm) column class for targeting devices with a resolution greater than or equal to 576 pixels but smaller than 768 pixels.
  • Medium (md) column class for targeting devices that are greater than or equal to 768 pixels but smaller than 992 pixels.
  • Large (lg) column class for targeting devices that are larger than equal to 992 pixels but smaller than 1200 pixels.
  • Extra large (xl) column class for targeting devices that are larger than equal to 1200 pixels but smaller than 1140 pixels.
  • Extra extra large (xxl) column class option is for all resolutions greater than or equal to 1400 pixels.

As stated above, each of these classes has its unique class prefix and modifiers. The width of the spacing between columns or gutter is 1.5rem (.75rem on the left and right).

The table below shows the widths of the dimensions of the columns.

Rows

As an example, let’s create a simple responsive three-column layout. Here’s what your markup should look like:


<div class="container">
   <div class="row">
      <div class="col-md-4">
         Column 1
      </div>
      <div class="col-md -4">
         Column 2
      </div>
      <div class="col-md -4">
         Column 3
      </div>
   </div>
</div>

As seen in the markup above, we used three divs inside the .row class div, each contains the .col-md-4 class. For devices that have a resolution greater than and equal to 768 pixels and smaller than 992 pixels, you’ll see the three-column layout like this:

Columns

As the screen resolution decreases until it reaches a resolution smaller than 768 pixels, each column’s width would change to 100% and each column would be stacked on top of the other. With this state, you’ll see the three-column layout like this:

Three-column layout

Next, let’s see how we can mix column classes for different screen resolutions. Let’s consider the three-column layout from above. We want the first and second columns to sit next to each other and have 50% of width each when the screen resolution decreases to less than 768 pixels. Then, the third column should stretch to 100% width and must sit below the first two columns.

In order to do this layout, we’ll mix some different column classes. Here’s what the markup should look like:


<div class="container">
   <div class="row">
      <div class="col-md-4 col-sm-6">
         Column 1
      </div>
      <div class="col-md-4 col-sm-6">
         Column 2
      </div>
      <div class="col-md-4 col-sm-12">
         Column 3
      </div>
   </div>
</div>

Notice that we’ve added the .col-sm-6 class to the first and second column divs. When the screen resolution is greater than or equal to 576 pixels but smaller than 768 pixels it will set the first two columns into 50% width each and the third column will span to 100% width layout with the use of .col-sm-12.

The result should look like this on small device/viewport:

Small device/viewport

Responsive Columns

If you want to have a column that has the same size from smallest to the largest device/viewport, you can use the .col or.col-* class. This means that no matter how you increase or decrease the screen resolution, the size of each column will remain the same according to your defined column size.

Let’s have an example on this one. Let’s create a two rows layout. The first row will have three columns, each will have a .col class while the second row will have three columns with .col-3, .col-6 and .col-3 classes in order.

Here’s what the markup should look like:


<div class="container">
   <div class="row">
      <div class="col">Column 1</div>
      <div class="col">Column 2</div>
      <div class="col">Column 3</div>
   </div>
   <div class="row">
      <div class="col-3">Column 3/12</div>
      <div class="col-6">Column 6/12</div>
      <div class="col-3">Column 3/12</div>
   </div>
</div>

The result should look like this:

Responsive columns

Additionally, you can also create stacked to horizontal columns using .col-* class. The “*” represents the viewport size which can be either xs, sm, md, lg, xl, xxl. This will make each column collapse and stack to horizontal view when it reaches the defined screen resolution or viewport size.

As an example, let’s go back to our previous example and modify the first three column divs from .col class to .col-sm. This will simply collapse and stack at the top of each column when the screen resolution is less than 768 pixels.

The markup should look like this:


<div class="container">
   <div class="row">
      <div class="col-sm">Column 1</div>
      <div class="col-sm">Column 2</div>
      <div class="col-sm">Column 3</div>
   </div>
   <div class="row">
      <div class="col-3">Column 3/12</div>
      <div class="col-6">Column 6/12</div>
      <div class="col-3">Column 3/12</div>
   </div>
</div>

If the screen resolution is greater than or equal to 768 pixels, the result should look like this:

Bootstrap 5 screen resolution

Then, if you decrease the size of the screen up to screen resolution smaller than 768 pixels, the columns should look like this:

768 pixels

Row Columns

Bootstrap also gives you the ability to rapidly set the number of columns to render each content using .row-cols-* class. This will simply create basic grid layouts or control content layouts.

As an example, let’s create a two rows layout with six equal-size columns. In order to do this, we need to add .row-cols-3 class inside the usual .row class div and then create a six-column div class with .col class on each one of them.

Here’s what the markup should look like:


<div class="container">
   <div class="row row-cols-3">
      <div class="col">Column 1</div>
      <div class="col">Column 2</div>
      <div class="col">Column 3</div>
      <div class="col">Column 4</div>
      <div class="col">Column 5</div>
      <div class="col">Column 6</div>
   </div>
</div>

The result should look like this:

Row Columns

As you can see above, using the .row.cols-3 class distributed three columns each on two rows.

Offset Columns

Perhaps your layout requires you to offset some columns and have some horizontal blank space before or after your element. Bootstrap 5 offers two ways to do this. First by using the responsive .offset-*-* (the first “*” stands again for the base widths of the media queries and the second “*” is the number of columns to offset) grid classes and the second is by using margin utilities such as .ms-auto to force sibling columns away from one another.

Let’s see how .offset-*-* class works first. Here’s what our markup should look like:


<div class="container">
  <div class="row">
	<div class="col-md-4">.col-md-4</div>
	<div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
  </div>
  <div class="row">
	<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
	<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
  </div>
</div>

As seen on the markup above, we used .offset-md-4 class on the second column of the first .row class div. This will give a blank space of four columns to the left side of the grid before the last four columns. In the same way, we added .offset-md-3 to each of the divs of the second .row class div so this will give three blank spaces each to the left of the grid accordingly.

The result should like this:

Offset Columns

Next, let’s see how to achieve the same thing using margin utilities. Here’s what our markup should look like:


<div class="container">
   <div class="row">
      <div class="col-md-4">.col-md-4</div>
      <div class="col-md-4 ms-auto">.col-md-4 .ms-auto</div>
   </div>
   <div class="row">
      <div class="col-md-3 ms-md-auto">.col-md-3 .ms-md-auto</div>
      <div class="col-md-3 ms-md-auto">.col-md-3 .ms-md-auto</div>
   </div>
</div>

On the first row above, we used .ms-auto class on the second div column. The letter “m” from .ms-auto stands for margin, while the letter “s” is used for setting margin-left and margin-right. The word “auto” means we are setting the margin to auto which will pull the .col-md-4 to the end of the grid.

For the second row, we use .ms-md-auto class. Again, the letter “m” stands for margin, while the letter “s” is used for setting margin-left and margin-right. The letters “md” stands for the breakpoint where the column will set to 100% max-width, in this case, medium viewport or medium screen resolution. You can change this to whatever breakpoint you prefer according to your layout’s needs. You can also visit the margin utilities page to learn more about spacing options.

The resulting layout will look like this:

Gutters

Gutters

Bootstrap 5 provides predefined gutter classes for adding padding between your columns which is principally used to responsively space and align content. Gutters are gaps between column content that can be responsively adjusted and are specifically built by horizontal padding.

There are few classes to remember when it comes to using bootstrap gutters:

  • .gx-* class is used mainly to control the horizontal gutter widths.
  • .gy-* class is used mainly to control the vertical gutter widths.
  • .g-* class is used mainly to control both the horizontal and vertical gutter widths.
  • .g-0 class removes the predefined grid classes including negative margins from .row class and horizontal padding from related columns.

Let’s take a closer look at each one of these gutter classes by setting some examples.


<div class="container">
   <div class="row gx-5">
      <div class="col">
         <div class="p-3 border">Horizontal Gutter</div>
      </div>
      <div class="col">
         <div class="p-3 border">Horizontal Gutter</div>
      </div>
      <div class="col">
         <div class="p-3 border">Horizontal Gutter</div>
      </div>
   </div>
</div>
<div class="container">
   <div class="row gy-5">
      <div class="col-6">
         <div class="p-3 border">Vertical Gutter</div>
      </div>
      <div class="col-6">
         <div class="p-3 border">Vertical Gutter</div>
      </div>
      <div class="col-6">
         <div class="p-3 border">Vertical Gutter</div>
      </div>
      <div class="col-6">
         <div class="p-3 border">Vertical Gutter</div>
      </div>
   </div>
</div>
<div class="container">
   <div class="row g-3">
      <div class="col-6">
         <div class="p-3 border">V & H Gutter</div>
      </div>
      <div class="col-6">
         <div class="p-3 border">V & H  Gutter</div>
      </div>
      <div class="col-6">
         <div class="p-3 border">V & H  Gutter</div>
      </div>
      <div class="col-6">
         <div class="p-3 border">V & H  Gutter</div>
      </div>
   </div>
</div>
<div class="container ">
   <div class="row g-0">
      <div class="col-3">
         <div class="p-3 border">No Gutter</div>
      </div>
      <div class="col-9">
         <div class="p-3 border">No Gutter</div>
      </div>
   </div>
</div>

To understand the markup above, let’s go over the fine points of each div class in details:

  • The first container represents the horizontal gutter. As you can see inside the .row class div of the first container we added .gx-5 class to add spaces between each column which controls the horizontal gutter width. The smaller number you put inside the .gx-* class, the less space or horizontal gutter width would be.
  • The second container represents the vertical gutter. Inside the .row class div of the second container, we added the class .gy-5 which will add space between each column in a vertical manner. Just like the horizontal gutter, the less number you put inside the .gy-* class, the less space or vertical gutter width it would be.
  • The third container represents both the horizontal and vertical gutter. By using .g-3 class inside the .row class div, we are basically adding space on both horizontal and vertical gutter width accordingly.
  • There are two ways to set an offset on columns in bootstrap: first is through the .offset-*-* class and through margin utilities.
  • The last container represents the zero gutter width which basically removes predefined grid classes related to gutter via .g-0 class added along with .row class div.
  • In order to avoid unwanted overflow on larger gutters, you can use matching padding utility class such as .px-* class or use .overflow-hidden class along with the .container class div as a wrapper solution.

Let’s see how this looks like in the browser:

Grid in a nutshell

Grid in a Nutshell

The main concept of any Bootstrap website is the layout or grid component. The Bootstrap grid system consists of 12 equal-width columns. Using its built-in predefined classes, you create columns and span a number of columns at a time. Alternatively, you can use rows inside columns to add new variation column widths.

The following are helpful points to know when it comes to working with grid layout:

  • Each (.row) must be in a container (.container, .container-fluid or responsive container).
  • Each row may be used horizontally to place multiple elements together.
  • Each column must be placed inside rows. You can place additional rows inside one row to have more controlled column widths.
  • If a specific element needs columns that can be positioned within a row and exceed the element limit of twelve columns, the whole collection will be wrapped.
  • You can use .col class if you want to have grids with the same size from smallest to largest screen resolution.
  • You can also quickly set the number of columns to render to each using .row-cols-* This will simply create basic grid layouts or control content layouts.
  • If you want to have a horizontal stack grid, you can use .col-*-* class where in the first “*” is the breakpoint where you want your grids to stack and last “*” for the column count (e.g .col-sm-5).
  • Column gutters are predefined by default which starts at 1.5 rem (24 px) wide but can be responsively adjusted through .gy-*, .gx-*, .g-* and .g-0.

That concludes the basics of the Bootstrap 5 grid that you’ll need to know. We did not discuss flexbox or other helpful utilities here; it makes more sense to create a separate tutorial to avoid dubiety with the raw grid system.

Bootstrap’s grid is a powerful and fully responsive grid system designed for a wide range of uses and compatible with many devices and screen resolutions. Setting up your own layout is easy with basic knowledge.

For more information on the Bootstrap grid, please refer to the official documentation here.

Like what you’re reading? Subscribe to our top stories.

— to designmodo.com

Get real time update about this post categories directly on your device, subscribe now.

Unsubscribe
Obtenez des bénéfices toutes les 10 minutes!
Caleb

Caleb

Stay Connected

  • 87k Followers
  • 172k Subscribers

Articles populaires

  • 10 problèmes courants de l’iPhone 13 et comment les résoudre

    10 problèmes courants de l’iPhone 13 et comment les résoudre

    5574 shares
    Share 2230 Tweet 1394
  • Comment installer phpMyAdmin sur Debian 11 Bullseye (Apache)

    1679 shares
    Share 672 Tweet 420
  • Comment réparer le décalage d’Instagram sur iPhone et Android

    703 shares
    Share 281 Tweet 176
  • Avantages et inconvénients des concepteurs et créateurs de jeux vidéo

    656 shares
    Share 262 Tweet 164
  • Étapes pour installer MySQL sur Ubuntu 22.04 LTS Jammy Linux

    503 shares
    Share 201 Tweet 126

Follow Our Page

Follow Us

    Go to the Customizer > JNews : Social, Like & View > Instagram Feed Setting, to connect your Instagram account.
Facebook Twitter Youtube Vimeo Instagram

Informer et distraire les internautes en toute indépendance avec un grand souci de la qualité et de contenu.

Category

  • Actualité
  • Article Sponsorisé
  • Astuces
  • Developpement web
  • Featured
  • Java Script
  • Jeu vidéo
  • Language HTML5
  • Mobile
  • portrait
  • Technologies
  • Uncategorized

Recent News

Royal Mail en panne : des centaines de clients frustrés signalent des problèmes “ennuyeux” avec le site Web

Royal Mail en panne : des centaines de clients frustrés signalent des problèmes “ennuyeux” avec le site Web

janvier 30, 2023
Nouvelles FE |  Avez-vous les compétences que rechercheront les employeurs en 2023?

Nouvelles FE | Avez-vous les compétences que rechercheront les employeurs en 2023?

janvier 30, 2023

© 2023 JNews - Premium WordPress news & magazine theme by Jegtheme.

No Result
View All Result
  • Actualité
  • Mobile
  • Jeu vidéo
  • Developpement web
  • Astuces
  • Nous contacter

© 2023 JNews - Premium WordPress news & magazine theme by Jegtheme.

Welcome Back!

Sign In with Facebook
Sign In with Google
Sign In with Linked In
OR

Login to your account below

Forgotten Password?

Retrieve your password

Please enter your username or email address to reset your password.

Log In
fr French
ar Arabiczh-CN Chinese (Simplified)en Englishfr Frenchde Germanit Italianru Russianes Spanish

Add New Playlist

This website uses cookies. By continuing to use this website you are giving consent to cookies being used. Visit our Privacy and Cookie Policy.