bootstrap Diminuer le nombre de colonnes de base

mikadox · 5 Fév. 2021

Salut tout le monde,

De base Bootstrap propose avec son système de grille flexbox 12 colonnes.

Les colonnes sont incroyablement flexibles. Il y a 12 colonnes de modèle disponibles par ligne, vous permettant de créer différentes combinaisons d'éléments qui s'étendent sur n'importe quel nombre de colonnes. Les classes de colonnes indiquent le nombre de colonnes de modèle à couvrir (par exemple, col-4s'étend sur quatre). widths sont définis en pourcentages afin que vous ayez toujours le même dimensionnement relatif.

Dans la doc je ne vois pas comment gérer ce problème : Grid system

Dans certaines conditions, pour un simple blog par exemple c'est un peu laborieux de gérer toujours 12 colonnes alors qu'on a besoin de visuellement de 2 ou 3 colonnes. Donc je me demandais si on pouvait réduire le nombre de colonnes de la grille flexbox.

Merci...

DaCode · 5 Fév. 2021

C'est si fastidieux de gérer 12 colonnes avec Bootstrap ? Je trouve ça plutôt flexible puisque qu'avec 12 tu peux faire 2x6 ou 3x4 ou 6x2 ou 8+4 ou 9+3 non ? Franchement...

Bootstrap GRID Flexbox

<div class="container">
  <div class="row"> /* 4 colonnes (4x3) */
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
  </div>
  <div class="row"> /* 2 colonnes : 1 de 8 col et 1 de 4 col */
    <div class="col-8">col-8</div>
    <div class="col-4">col-4</div>
  </div>
</div>

A la limite pour augmenter le nombre de colonne ça pourrait être utile mais le diminuer ça n'a pas vraiment de sens.
Je ne comprends pas bien pourquoi tu trouves ça "laborieux", c'est si simple à mettre en place.

Wazz9 · 6 Fév. 2021

Je suis assez d'accord avec DaCode, je ne vois pas trop l'intérêt de diminuer le nombre de colonnes sachant que c'est hyper facile de les gérer avec Bootstrap.
Est-ce que tu as bien saisi la fonctionnalité mikadox ?

Il peut y avoir un intérêt d'augmenter leur nombre, peut-être pour des tableaux ou autres besoins spécifiques mais les diminuer...
Dans tous les cas et si tu veux réellement diminuer le nombre de colonnes ou l'augmenter tu peux modifier les fichiers CSS : bootstrap.grid.css ou bootstrap.css suivant celui que tu utilises.

mikadox · 7 Fév. 2021

Ok je vois où vous voulez en venir, et vous avez pas tort.
Dans mon idée je pensais qu'il y avait une façon simple de gérer le nombre de colonnes et donc de travailler sur un site avec au max 3 colonnes en précisant à bootstrap je n'ai besoin que de 3 colonnes...

C'est vrai que l'adjectif laborieux est un peu exagéré.
Merci pour vos réponses.

Jack · 9 Fév. 2021

Et puis si tu commences à traficoter le CSS d'un framework autant faire ton propre fichier CSS, les frameworks comme Bootstrap c'est pour coder vite, avec des classes préétablies génériques qui conviennent dans la plupart des cas.

Après rien ne t'empêche de créer, à part, ton propre CSS pour fignoler quelques bricoles...

DaCode · 9 Fév. 2021

Je ne serais pas aussi formel que Jack car on peut se servir du fichier CSS de base Bootstrap et l'adapter selon ses besoins propres ou pour un projet spécifique. Cela évite de se taper 500 lignes de code CSS à créer alors qu'en adaptant avec quelques retouches on peut obtenir ce qu'on veut. C'est un sacré gain de temps.

C'est vrai qu'il y a la possibilité d'ajouter un fichier CSS perso en plus de celui de Bootstrap, c'est une solution aussi.

D'ailleurs à ce propos, voici une classe Bootstrap prise au hasard, la classe .card

CSS Bootstrap

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 1px solid rgba(0, 0, 0, 0.125);
  border-radius: 0.25rem;
}

Si dans un ficher CSS annexe j'entre ce code

CSS

.card {
    background-color: red;
}

Comment s'affichera la classe .card sur le navigateur ?
En blanc ou en rouge ? Mon fichier CSS écrase t-il le fichier CSS Bootstrap ?

WWWest · 10 Fév. 2021

Peut-être l'ordre de lecture du fichier, si tu places bootstrap.css en premier dans les balises <head> puis le fichier style.css probablement qu'il écrasera les propriétés communes des classes.

C'est une supposition, rien de certain.

Sam_du_13 · 16 Fév. 2021

WWWest à dit:
C'est une supposition, rien de certain.

Non c'est ça, le fichier CSS de l'utilisateur doit être placé en dernier pour que celui-ci écrase les propriétés Bootstrap.
Si tu héberges toi même les fichiers CSS Bootstrap il est toujours possible d'écrire tes propres propriétés en fin de fichier, le résultat sera le même.

Cascadeur · 20 Fév. 2021

Yo mikadox !

Cette ressource pourrait t'intéresser :

VIDÉO - Créer sa propre version Bootstrap avec SASS

Booststrap : Personnaliser les fichiers SCSS avec SASS Vidéo de 24 minutes Bootstrap selon Wikipédia https://fr.wikipedia.org/wiki/Bootstrap_(framework) Bootstrap est une collection d'outils utiles à la création du design (graphisme, animation...

cocoriweb.community

Bibix · 21 Fév. 2021

Wazz9 à dit:
Dans tous les cas et si tu veux réellement diminuer le nombre de colonnes ou l'augmenter tu peux modifier les fichiers CSS : bootstrap.grid.css ou bootstrap.css suivant celui que tu utilises.

Salut, non ce n'est pas dans ces fichiers qu'il faut les modifier, ce n'est pas très académique.
Comme c'est indiqué dans le tutoriel cité il vaut mieux télécharger les fichiers sources (non compilés) et modifier le fichier SCSS _variables.scss, en l'occurrence ces lignes:

SCSS

// Grid columns
//
// Set the number of columns and specify the width of the gutters.

$grid-columns:                12 !default;
$grid-gutter-width:           1.5rem !default;
$grid-row-columns:            6 !default;

Ensuite on compile pour son utilisation !
J'ai l'air de connaitre comme ça mais c'est juste que je me suis posé la question la semaine dernière

bootstrap Diminuer le nombre de colonnes de base

mikadox

Membre

DaCode

DaCode

Membre

Wazz9

Membre

mikadox

Membre

Jack

Membre

DaCode

Membre

WWWest

Membre

Sam_du_13

Membre

Cascadeur

Membre

VIDÉO - Créer sa propre version Bootstrap avec SASS

Bibix

Membre

Ces discussions pourraient vous intéresser...