Bonjour à tous,

Voila j'ai 2 questions:

Si je ne dis pas de bétise, un containeur sur boostrap prendra la largeur suivant la taille max de la fenetre, mais comment faire si je ne veux qu'elle prenne qu'une certaine largeur ?

Je vous explique mon soucis.

Je crée un site composer de plusieurs section, qui prenne pour la plupart toute la largeur ( donc la class="container" est tres bien ), mais j'aimerais que sur une seul section, le background prenne la totalité de la largeur, mais que le contenu ( il s'agit de 3 colonne ) soit centré.

J'avais pensé à un push, mais j'aimerais que mes 3 colonne soit de 3, se qui ferais un push de 1.5 ....

J'espere avoir était assez clair, au besoin je ferais un petit croquis.

Merci

Pour que le background prenne toute la largeur il te suffit d'ajouter un div avant celle du container comme ceci :

<div>
   <div class="container">
      //ton contenu
   </div>
</div>

Et malheuresment pour les 3 colonnes de trois avec bootstrap c'est assez difficile ...

L'astuce que tu peux utiliser c'est de diviser en trois colonnes égales 

<div class="container">
   <div class="row">
      <div class="col-lg-4">
         // Section 1
      </div>
      <div class="col-lg-4">
         // Section 2
      </div>
      <div class="col-lg-4">
         // Section 3
      </div>
   </div>
</div>

Et part la suite leur donner une margin left et right équivalente pour les espacer.

Si tu veux juste un espace avant et un espace après, il te suffit de mettre un padding sur ton container.

J'espère t'avoir aider,

Maxime

Merci pour ta réponse.

J'avais justement pensé à faire 3 colonne de 4, et mettre un marge droite et gauche assez importante pour justement "centrer" un peu les colonnes, mais je pensais qu'il y avait une méthode plus "propre" pour ca.

Je te remercie de ta réponses.

Et si je fais une row de 10 colonne avec un push de 1, et que je place mes 3 colonnes dedans ceci fonctionnerais peut-etre, je vais tester ce soir voir le resultat. ( j'entend par là, avoir le meme resultat que le site d'OCR par exemple, un contenu qui ne soit au milieu ). Ou c'est juste en mettant un margin spécifique ?

Car si on veux utiliser Boostrap, mais qu'on ne souhaite pas avoir une page en pleine écran, il suffit juste de faire une section principal avec un push et de mettre le nombre de colonne voulu non ?

Sinon pour illustrer ce que je veux voila un petit dessin:

Mettre la 1er et 2eme section en pleine écran

Et la 3eme mettre le contenu (en jaune) centré (comme le site d'openclassrooms)

Merci encore

Ouais mais j'ai jamais vraiment utiliser push. 

Par contre tu peux très bien utiliser un offset de 1 qui permet de laisser un espace blanc de 1 avant ta div. Et ensuite mettre tes 3 div de 4 normalement ca devrait être bien centré comme tu le souhaite.

Au final cela donnerait ça :

<div> // bien verifier que la width soit à 100% mais normalement pas de soucis
	<div class="container">
		// Section 1
	</div>
<div>
<div> // bien verifier que la width soit à 100% mais normalement pas de soucis
	<div class="container">
		// Section 2
	</div>
<div>
<div class="container"> // bien verifier que la width soit à 100% mais normalement pas de soucis
	<div class="row">
		<div class="col-lg-offset-1 col-lg-10">
			<div class="col-lg-4">
				// Div 1
			</div>
			<div class="col-lg-4">
				// Div 2
			</div>
			<div class="col-lg-4">
				// Div 3
			</div>
		</div>
	</div>
<div>

En revanche je ne sais pas si il faut rajouter un row entre la ligne 

<div class="col-lg-offset-1 col-lg-10">

et 

<div class="col-lg-4">

Mais dans l'idée ca devrait fonctionner

http://jsfiddle.net/va1jmezs/

Maxime

-
Edité par MaximeDétaille 12 septembre 2017 à 16:01:07

En effet avec l'offset ca fonctionne parfaitement.

Merci de ton coup de main

EDIT: J'ai une nouvelle question ( oui désolé, je débute un peu )

Voila mon code

	<div class="row">
		<div class="col-lg-offset-1 col-lg-10">
			<div class="row">
				<div class="col-lg-4">
					<i class="fa fa-circle"></i>
					<h1 class="titre">Prestation 1</h1>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
				</div>
				<div class="col-lg-4">
					<i class="fa fa-circle"></i>
					<h1 class="titre">Prestation 2</h1>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
				</div>
				<div class="col-lg-4">
					<i class="fa fa-circle"></i>
					<h1 class="titre">Prestation 3</h1>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
				</div>	
			</div>
		</div>						
	</div>

CSS

.titre {

  text-align: center;
  padding: 20px;
}

#troisiemesection {

  background-color: rgb(209, 209, 209);
  height: 100%;
  width: 100%;
  padding: 50px;
}

#troisiemesection > .row > .fa-circle {

  text-align: center;
  font-size: 100px;
}

Le soucis, est que les cercle ( fa fa-circle ) je n'arrive pas à modifier la taille et à les centrer au dessus du text.

Je pourrais mettre le font-size dans le fichier HTML, mais j'aimerais comprendre pourquoi il ne prend pas en compte si je le met dans le CSS ...

Encore merci

-
Edité par Eolynas 13 septembre 2017 à 0:21:13