How to make 7 columns with Bootstrap?

Question

How to make 7 columns with Bootstrap?

Navigation

#1 by (1 votes)
#2 by (1 votes)
#3 by (1 votes)
#4 by (1 votes)

2

I have the following menu below:

HowwouldImakethecolumnssidebyside(fromthefirsttotheseventh)?

I'musingBootstrap4.Itriedthecodebelow,butthispicturemesswaskkkk

<divclass="row">
        <div class="col-md-9" style="border-right: 2px solid #FFF">
          <div class="row">

        <div class="col-md-2">
          <a href="#" class="btn btn-primary btn-custom">
            <i class="fas fa-user-plus"></i>
          </a><br>
          Primeira coluna
        </div>
        <div class="col-md-2">
          <a href="#" class="btn btn-primary btn-custom">
            <i class="fas fa-user-plus"></i>
          </a><br>
        Segunda coluna
        </div>
        <div class="col-md-2">
          <a href="#" class="btn btn-primary btn-custom">
            <i class="fas fa-user-plus"></i>
          </a><br>
        Terceira Coluna
        </div>
        <div class="col-md-2">
          <a href="#" class="btn btn-primary btn-custom">
            <i class="fas fa-user-plus"></i>
          </a><br>
          Quarta Coluna
        </div>
        <div class="col-md-2">
          <a href="#" class="btn btn-primary btn-custom">
            <i class="fas fa-user-plus"></i>
          </a><br>
          Quinta Coluna
        </div>
        <div class="col-md-2">
          <a href="#" class="btn btn-primary btn-custom">
            <i class="fas fa-user-plus"></i>
          </a><br>
        Sexta Coluna
        </div>
        <div class="col-md-2">
          <a href="#" class="btn btn-primary btn-custom">
            <i class="fas fa-user-plus"></i>
          </a><br>
        Sétima Coluna
        </div>
  </div>
</div>
    <div class="col-md-3">
      <span>Compras Efetuadas:</span>
    </div>
</div>

twitter-bootstrap

asked by anonymous 15.12.2018 / 20:31

4 answers

score 1 · Answer 1

I was able to resolve it as follows:

CSS

@media (min-width: 768px){
  .seven-cols .col-md-1,
  .seven-cols .col-sm-1,
  .seven-cols .col-lg-1  {
    width: 100%;
    *width: 100%;
  }
}
@media (min-width: 992px) {
  .seven-cols .col-md-1,
  .seven-cols .col-sm-1,
  .seven-cols .col-lg-1 {
    width: 14.285714285714285714285714285714%;
    *width: 14.285714285714285714285714285714%;
    max-width: 14.285714285714285714285714285714% !important;
flex:none !important;
  }
}

@media (min-width: 1200px) {
  .seven-cols .col-md-1,
  .seven-cols .col-sm-1,
  .seven-cols .col-lg-1 {
    width: 14.285714285714285714285714285714%;
    *width: 14.285714285714285714285714285714%;
    max-width: 14.285714285714285714285714285714% !important;
flex:none !important;
  }
}

HTML

<div class="row seven-cols">
  <div class="col-md-1"></div>
  <div class="col-md-1"></div>
  <div class="col-md-1"></div>
  <div class="col-md-1"></div>
  <div class="col-md-1"></div>
  <div class="col-md-1"></div>
  <div class="col-md-1"></div>
</div>

Source Code

score 1 · Answer 2

@ Fox.11. By analyzing your code, the Bootstrap framework allows you to create a maximum of 12 columns on a page, or even within a row ( row ). They are not aligned, because by adding all the col-md- x you put, you want to create 16 columns to position the 7 columns in this container. p> Youcancorrectthenumberingofthecolumnsorinasimplerway,setanidforallthesedivsthatcontainsthecol-md-...classandinCSSdothefollowingapplication:Example:

#id_bloco{
  float: left;
  width: 14.2%; /*Seria a largura total 100% dividida por 7 colunas*/
}

<div id="id_bloco">BLOCO 1</div>
<div id="id_bloco">BLOCO 2</div>
<div id="id_bloco">BLOCO 3</div>
<div id="id_bloco">BLOCO 4</div>
<div id="id_bloco">BLOCO 5</div>
<div id="id_bloco">BLOCO 6</div>
<div id="id_bloco">BLOCO 7</div>

score 1 · Answer 3

Next, the Bootstrap grid is based on flex, so automatically it will already split the divs into equal sizes, but for this you can not explicitly define the value of these divs , so the first thing to do is remove col-md-2 from divs within row .

After that you will use these% original Bootstrap% classes. These classes will put in Flex which is the parent of 7 row . And as I said in the 7 divs you take the class divs

col-md-2 : It will space the 7 justify-content-between equally within container divs
row : Up to flex-lg-row or 992px as lg stand side by side
div : On screens smaller than flex-column will be lg per line
div : Do not let flex-nowrap fall to the bottom line even if it has a lot of content (the div nuna will fall to the bottom line, what we are going to do to change the horizontal orientation, to vertical "column" when the screen is less than div )

<div class="row justify-content-between flex-column flex-lg-row flex-nowrap"> 7 divs </div>

Official Flex Bootstrap documentation: link

Hereisthecodefortheexampleabove:(notethatyoudonothaveCSSinadditiontotheoriginalBootstrap)

<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
  
<div class="container">
    <div class="row">
          <div class="col-md-9" style="border-right: 2px solid #FFF">
            <div class="row justify-content-between flex-column flex-lg-row flex-nowrap">
  
          <div class=" ">
            <a href="#" class="btn btn-primary btn-custom">
              <i class="fas fa-user-plus"></i>
            </a><br>
            Primeira coluna
          </div>
          <div class=" ">
            <a href="#" class="btn btn-primary btn-custom">
              <i class="fas fa-user-plus"></i>
            </a><br>
          Segunda coluna
          </div>
          <div class=" ">
            <a href="#" class="btn btn-primary btn-custom">
              <i class="fas fa-user-plus"></i>
            </a><br>
          Terceira Coluna
          </div>
          <div class=" ">
            <a href="#" class="btn btn-primary btn-custom">
              <i class="fas fa-user-plus"></i>
            </a><br>
            Quarta Coluna
          </div>
          <div class=" ">
            <a href="#" class="btn btn-primary btn-custom">
              <i class="fas fa-user-plus"></i>
            </a><br>
            Quinta Coluna
          </div>
          <div class=" ">
            <a href="#" class="btn btn-primary btn-custom">
              <i class="fas fa-user-plus"></i>
            </a><br>
          Sexta Coluna
          </div>
          <div class=" ">
            <a href="#" class="btn btn-primary btn-custom">
              <i class="fas fa-user-plus"></i>
            </a><br>
          Sétima Coluna
          </div>
    </div>
  </div>
      <div class="col-md-3">
        <span>Compras Efetuadas:</span>
      </div>
  </div>
</div>

score 1 · Answer 4

There are two new concepts within Bootstrap 4. You can opt for the Flex Box concept or the traditional block concept.

My recommendation for the block you're following is that you try to think of the size of the columns as something that should suit the 12-column grid to go online.

.bloco {
display:flex;
align-items:center;
justify-content:center;
height:50px;
width:100%;
background-color:#ccc;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container">
	<div class="row">
		<div class="col-xl-9 col-lg-9 col-md-9 col-sm-9 col-xs-9">
			<div class="row">
				<div class="col-1">
					<div class="bloco">1</div>
				</div>
				<div class="col-1">
					<div class="bloco">1</div>
				</div>
				<div class="col-1">
					<div class="bloco">1</div>
				</div>
				<div class="col-1">
					<div class="bloco">1</div>
				</div>
				<div class="col-1">
					<div class="bloco">1</div>
				</div>
				<div class="col-1">
					<div class="bloco">1</div>
				</div>
				<div class="col-1">
					<div class="bloco">1</div>
				</div>
			</div>
		</div>
		<div class="col-xl-3 col-lg-3 col-md-3 col-sm-3 col-xs-3">
			<!-- Espaço vazio -->
		</div>
	</div>
</div>

But I like the concept of Flex Box where you can play with the proportional spacing by justify-content or align-items.