bulmacss/docs/documentation/columns/responsiveness.html at master · GlenSmale/bulmacss · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
---
title: Columns responsiveness
layout: documentation
doc-tab: columns
doc-subtab: responsiveness
breadcrumb:
- home
- documentation
- columns
- columns-responsiveness
---

{% capture columns_mobile %}
<div class="columns is-mobile">
  <div class="column">1</div>
  <div class="column">2</div>
  <div class="column">3</div>
  <div class="column">4</div>
</div>
{% endcapture %}

{% capture columns_desktop %}
<div class="columns is-desktop">
  <div class="column">1</div>
  <div class="column">2</div>
  <div class="column">3</div>
  <div class="column">4</div>
</div>
{% endcapture %}

{% capture columns_multiple_breakpoints %}
<div class="columns is-mobile">
  <div class="column is-three-quarters-mobile is-two-thirds-tablet is-half-desktop is-one-third-widescreen is-one-quarter-fullhd">
    <code>is-three-quarters-mobile</code><br>
    <code>is-two-thirds-tablet</code><br>
    <code>is-half-desktop</code><br>
    <code>is-one-third-widescreen</code><br>
    <code>is-one-quarter-fullhd</code>
  </div>
  <div class="column">2</div>
  <div class="column">3</div>
  <div class="column">4</div>
  <div class="column">5</div>
</div>
{% endcapture %}

{% include elements/anchor.html name="Mobile columns" %}

<div class="content">
  <p>
    By default, columns are only activated from <strong>tablet</strong> onwards. This means columns are stacked on top of each other on <strong>mobile</strong>.
    <br>
    If you want columns to work on <strong>mobile too</strong>, just add the <code>is-mobile</code> modifier on the <code>columns</code> container:
  </p>
</div>

<div class="columns is-mobile">
  <div class="column">
    <p class="bd-notification is-primary">1</p>
  </div>
  <div class="column">
    <p class="bd-notification is-primary">2</p>
  </div>
  <div class="column">
    <p class="bd-notification is-primary">3</p>
  </div>
  <div class="column">
    <p class="bd-notification is-primary">4</p>
  </div>
</div>

{% highlight html %}{{ columns_mobile }}{% endhighlight %}

<div class="message is-info">
  <p class="message-header">
    Resize
  </p>
  <p class="message-body">
    If you want to see the difference, resize your browser and see <em>when</em> the columns are stacked and when they are horizontally distributed.
  </p>
</div>

<div class="content">
  <p>
    If you <em>only</em> want columns on <strong>desktop</strong> upwards, just use the <code>is-desktop</code> modifier on the <code>columns</code> container:
  </p>
</div>

<div class="columns is-desktop">
  <div class="column">
    <p class="bd-notification is-primary">1</p>
  </div>
  <div class="column">
    <p class="bd-notification is-primary">2</p>
  </div>
  <div class="column">
    <p class="bd-notification is-primary">3</p>
  </div>
  <div class="column">
    <p class="bd-notification is-primary">4</p>
  </div>
</div>

{% highlight html %}{{ columns_desktop }}{% endhighlight %}

{% include elements/anchor.html name="Different column sizes per breakpoint" %}

<div class="content">
  <p>You can define a <strong>column size</strong> for <em>each</em> viewport size: mobile, tablet, and desktop.</p>
</div>

<div class="columns is-mobile">
  <div class="column is-three-quarters-mobile is-two-thirds-tablet is-half-desktop is-one-third-widescreen is-one-quarter-fullhd">
    <p class="bd-notification is-primary">
      <code>is-three-quarters-mobile</code><br>
      <code>is-two-thirds-tablet</code><br>
      <code>is-half-desktop</code><br>
      <code>is-one-third-widescreen</code><br>
      <code>is-one-quarter-fullhd</code><br>
    </p>
  </div>
  <div class="column">
    <p class="bd-notification is-primary">2</p>
  </div>
  <div class="column">
    <p class="bd-notification is-primary">3</p>
  </div>
  <div class="column">
    <p class="bd-notification is-primary">4</p>
  </div>
  <div class="column">
    <p class="bd-notification is-primary">5</p>
  </div>
</div>

<div class="message is-info">
  <p class="message-header">Resize</p>
  <p class="message-body">If you want to see these classes in action, resize your browser window and see how the same column varies in width at each breakpoint.</p>
</div>

{% highlight html %}{{ columns_multiple_breakpoints }}{% endhighlight %}