Aulas
Disciplinas

Cursos / Informática para Internet / Desenvolvimento Front-end I / Aula

arrow_back Aula 14 - Frameworks para Layout

Containers e Grid (parte 2)

Nesta videoaula, você continuará o estudo de grids para conhecer como controlar o tamanho das colunas.

Como visto na videoaula anterior, o Bootstrap permite criar um grid com no máximo 12 colunas. No entanto, é possível controlar a distribuição dos espaços entre as colunas através do uso de classes específicas.

Por exemplo, se quisermos que uma coluna possua o tamanho referente a 4 espaços, devemos utilizar a classe "col-md-4" (você pode trocar o "md" por "sm", "lg", "xl" para diferentes pontos de quebra, ou até mesmo utilizar apenas "col-4").

Para verificar todas as opções disponíveis, consulte este link.

Acompanhe o vídeo com o exemplo abaixo:

HTML
CSS
JS
​x
1
 <!DOCTYPE html>
2
<html lang="pt-br">
3
​
4
<head>
5
  <meta charset="utf-8">
6
​
7
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
8
  <!-- Bootstrap CSS -->
9
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
10
    integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
11
  <link rel="stylesheet" type="text/css" href="style.css">
12
​
13
  <title>Olá Bootstrap!</title>
14
</head>
15
​
16
<body>
17
​
18
  <div class="container-fluid">
19
​
20
    <div class="row">
21
      <div class="col-md">
22
        Uma de três (col-md)
23
      </div>
24
      <div class="col-md">
25
        Duas de três (col-md)
26
      </div>
27
      <div class="col-md">
28
        Três de três (col-md)
29
      </div>
30
    </div>
31
​
32
    <div class="row">
33
      <div class="col-md-2">
34
        Uma de três (col-md-2)
35
      </div>
36
      <div class="col-md-9">
37
        Duas de três (col-md-9)
38
      </div>
39
      <div class="col-md-1">
40
        Três de três (col-md-1)
41
      </div>
42
    </div>
43
​
44
  </div>
45
  <!-- JavaScript (Opcional) -->
46
  <!-- jQuery primeiro, depois Popper.js, depois Bootstrap JS -->
47
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
48
    integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
49
    crossorigin="anonymous"></script>
50
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
51
    integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
52
    crossorigin="anonymous"></script>
53
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
54
    integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
55
    crossorigin="anonymous"></script>
56
</body>
57
​
58
</html>
88
1
 .container {
2
  background-color: lightgray;
3
}
4
​
5
.col,
6
.col-1,
7
.col-2,
8
.col-3,
9
.col-4,
10
.col-5,
11
.col-6,
12
.col-7,
13
.col-8,
14
.col-9,
15
.col-10,
16
.col-11,
17
.col-12 {
18
  background-color: lightslategrey;
19
  border: 1px solid grey;
20
}
21
​
22
.col-sm,
23
.col-sm-1,
24
.col-sm-2,
25
.col-sm-3,
26
.col-sm-4,
27
.col-sm-5,
28
.col-sm-6,
29
.col-sm-7,
30
.col-sm-8,
31
.col-sm-9,
32
.col-sm-10,
33
.col-sm-11,
34
.col-sm-12 {
35
  background-color: lightblue;
36
  border: 1px solid grey;
37
}
38
​
39
.col-md,
40
.col-md-1,
41
.col-md-2,
42
.col-md-3,
43
.col-md-4,
44
.col-md-5,
45
.col-md-6,
46
.col-md-7,
47
.col-md-8,
48
.col-md-9,
49
.col-md-10,
50
.col-md-11,
51
.col-md-12 {
52
  background-color: lightcoral;
53
  border: 1px solid grey;
54
}
55
​
56
.col-lg,
57
.col-lg-1,
58
.col-lg-2,
59
.col-lg-3,
60
.col-lg-4,
61
.col-lg-5,
62
.col-lg-6,
63
.col-lg-7,
64
.col-lg-8,
65
.col-lg-9,
66
.col-lg-10,
67
.col-lg-11,
68
.col-lg-12 {
69
  background-color: lightseagreen;
70
  border: 1px solid grey;
71
}
72
​
73
.col-xl,
74
.col-xl-1,
75
.col-xl-2,
76
.col-xl-3,
77
.col-xl-4,
78
.col-xl-5,
79
.col-xl-6,
80
.col-xl-7,
81
.col-xl-8,
82
.col-xl-9,
83
.col-xl-10,
84
.col-xl-11,
85
.col-xl-12 {
86
  background-color: lightyellow;
87
  border: 1px solid grey;
88
}
1
1

[A] Anterior
4/7
Próxima [D]

Sumário

Versão 5.3 - Todos os Direitos reservados