bootstrap Diminuer le nombre de colonnes de base

mikadox

Membre
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...
 
Solution
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...

DaCode

Membre
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

Membre
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

Membre
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

Membre
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

Membre
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 ?
 

Bibix

Membre
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 😀
 

Ces discussions pourraient vous intéresser...

Hello, Quand j'essaie de connecter mon fichier PHP à la base de données sur mon serveur local cela ne fonctionne pas. (site WordPress) ERROR ESTABLISHING A DATABASE CONNECTION Pourtant mes éléments sont bons, j'ai vérifié et revérifié. Je vous colle le code du fichier PHP...
Salut, Je suis en train de tester bootstrap sur mon localhost et j'ai un problème d'affichage. Je m'explique : Je veux afficher 4 colonnes qui contiennent chacune d'entre elles du texte mais j'ai beau chercher je ne comprends pas pourquoi elles s'affichent une au dessus des autres...
Hello, je vous partage un lien intéressant sur les compétences programmeurs les plus recherchés en ce début d'année 2021, les voici: Développement front-end Conception et utilisation d’API Programmation principes de base Développement full-stack Programmation orientée objet...
Haut