Layout

On this page:

• Flexbox
• CSS-grid
• Grid baseline (containers)

Flexbox

.d-flex class working example

Code sample

<div class="well d-flex">
	<div class="child">
		This is a flex container with the .d-flex class. Its children are aligned in a row by default.
	</div>
	<div class="child">
		You can add multiple children to the flex container to see them aligned horizontally.
	</div>
</div>

.flex-column class working example

Code sample

<div class="well d-flex flex-column">
	<div class="child">
		This is a flex container with the .d-flex and .flex-column classes.
		Its children are aligned in a column direction. Each child takes the full width of the container.
	</div>
	<div class="child">
		You can add multiple children to the flex container with .flex-column to see them aligned vertically.
	</div>
</div>

.align-items-center class working example

Code sample

<div class="well d-flex align-items-center">
	<div class="child">
		This is a flex container with the .d-flex and .align-items-center classes.
		Its children are aligned vertically in the center.
	</div>
</div>

.align-self-center class working example

Code sample

<div class="well d-flex" style="height: 250px;">
	<div class="child align-self-center">
		This is a flex container with the .d-flex class.
		The first child (.align-self-center) is aligned vertically in the center within the flex container.
	</div>
	<div class="child">
		The second child is not aligned and follows the default alignment.
	</div>
</div>

.align-self-end class working example

Code sample

<div class="well d-flex">
	<div class="child align-self-end">
		This is a flex container with the .d-flex class.
		The first child (.align-self-end) is aligned vertically at the end within the flex container.
	</div>
	<div class="child">
		The second child is not aligned and follows the default alignment.
	</div>
</div>

CSS Grid

[class*=col-] class working example

Code sample

<div class="well">
	<div class="row">
	<div class="col-6">
		This element has the class col-6. It has a padding left and right of 0.
	</div>
	</div>
</div>

Bootstrap .row class working example

Code sample

<div class="well">
	<div class="row">
	<div class="col-md-6">
		This element is inside a Bootstrap grid row with the class .row.
		It contains and clear the floats of your columns.
	</div>
	<div class="col-md-6">
		This is another column with the class .col-md-6.
	</div>
	</div>
</div>

GCWeb Override .brdr-tp .row class working example

Code sample

<div class="well brdr-tp">
	<div class="row">
	<div class="col-md-4">Column 1</div>
	<div class="col-md-4">Column 2</div>
	<div class="col-md-4">Column 3</div>
	</div>
</div>

GCWeb Override .pagedetails class working example

Code sample

<div class="well pagedetails">
	<div class="row">
	<div class="col-sm-6">
		<p>This is a row inside a div with the .pagedetails class.</p>
		<p>The row contains two columns, each occupying 50% of the container width on small screens (sm).</p>
		<p>The columns have padding on the left and right sides due to the [class*=col-] class.</p>
	</div>
	<div class="col-sm-6">
		<p>This is the second column of the row.</p>
		<p>The row class provides a negative margin on the left and right sides to counteract the padding applied to the columns.</p>
	</div>
	</div>
	<details>
	<summary>Page Details Summary</summary>
	<p>This is a details element inside a div with the .pagedetails class.</p>
	<p>It has padding of 2em at the top and bottom.</p>
	<p>The .row class is used for backwards compatibility with GCWeb 4.0.26 and below.</p>
	<p>The details element inside the .row class has margins applied.</p>
	<p>The first child of the .row class has a top margin, affecting the "Report a Problem" link.</p>
	</details>
</div>

Bootstrap .row-no-gutters class working example

.row-no-gutters class is applied to the row, which removes the gutters (spacing) between columns inside the row.

Code sample

<div class="container">
	<div class="row row-no-gutters">
	<div class="col-4">
		<div class="content-box">
	Column 1
		</div>
	</div>
	<div class="col-4">
		<div class="content-box">
	Column 2
		</div>
	</div>
	<div class="col-4">
		<div class="content-box">
	Column 3
		</div>
	</div>
	</div>
</div>

Bootstrap [class*=col-] class working example with no gutters

In these examples, the Bootstrap classes `[class*=col-]` are used in various scenarios: with no gutters, with default gutters, within a form, and within a table. These classes allow to create responsive layouts with grid columns and customize the spacing between the columns.

Code sample

<div class="container">
	<div class="row row-no-gutters">
	<div class="col-4">
		<div class="content-box">
	Column 1
		</div>
	</div>
	<div class="col-4">
		<div class="content-box">
	Column 2
		</div>
	</div>
	<div class="col-4">
		<div class="content-box">
	Column 3
		</div>
	</div>
	</div>
</div>

Bootstrap [class*=col-] class working example with default gutters

Code sample

<div class="container">
	<div class="row">
	<div class="col-4">
		<div class="content-box">
	Column 1
		</div>
	</div>
	<div class="col-4">
		<div class="content-box">
	Column 2
		</div>
	</div>
	<div class="col-4">
		<div class="content-box">
	Column 3
		</div>
	</div>
	</div>
</div>

Bootstrap [class*=col-] class working example within a form

Code sample

<div class="container">
	<form>
	<div class="row">
		<div class="col-6">
	<label for="name">Name:</label>
	<input type="text" id="name" name="name" class="form-control">
		</div>
		<div class="col-6">
	<label for="email">Email:</label>
	<input type="email" id="email" name="email" class="form-control">
		</div>
	</div>
	<div class="row">
		<div class="col-12">
	<label for="message">Message:</label>
	<textarea id="message" name="message" class="

form-control" rows="4"></textarea>
		</div>
	</div>
	</form>
</div>

Bootstrap [class*=col-] class working example within a table

Code sample

<div class="container">
	<table class="table">
	<thead>
		<tr>
	<th class="col-4">Name</th>
	<th class="col-4">Age</th>
	<th class="col-4">Occupation</th>
		</tr>
	</thead>
	<tbody>
		<tr>
	<td class="col-4">John Doe</td>
	<td class="col-4">30</td>
	<td class="col-4">Engineer</td>
		</tr>
		<tr>
	<td class="col-4">Jane Smith</td>
	<td class="col-4">25</td>
	<td class="col-4">Doctor</td>
		</tr>
		<tr>
	<td class="col-4">Michael Johnson</td>
	<td class="col-4">35</td>
	<td class="col-4">Teacher</td>
		</tr>
	</tbody>
	</table>
</div>

Bootstrap Grid Column with Auto Width Based on Content col-xs-auto col-sm-auto col-md-auto col-lg-auto

The columns with the .col-xs-auto, .col-sm-auto, .col-md-auto, and .col-lg-auto classes will automatically adjust their width based on the content inside them. This ensures that the content is not truncated, and the columns will take up only the necessary space to accommodate the content.

Code Sample

<div class="well">
	<div class="row">
	<div class="col-xs-auto col-sm-auto col-md-auto col-lg-auto">
		<div class="content-box">
	This is a column with auto width based on content.
	It will adjust its width to fit the content inside.
		</div>
	</div>
	<div class="col-xs-auto col-sm-auto col-md-auto col-lg-auto">
		<div class="content-box">
	This is another column with auto width based on content.
	The content inside will determine its width dynamically.
		</div>
	</div>
	</div>
</div>

col-me-push-3 class working example (with RTL direction)

Code Sample

<div class="wb-outer-container" dir="rtl">
	<div class="wb-inner-container">
	<div class="col-md-6 col-md-push-3">
		<div class="content-box">This is a column that occupies 6 units (50%) of the width in its normal position, but with <code>col-md-push-3</code> class, it is pushed 3 units to the right, and its effective position will be after the first 3 units. </div>
	</div>
	</div>
</div><div class="clearfix"></div>

GCWeb Infostripe with .col- Classes

Code Sample

<div class="well"><div class="infostripe col-md-8 col-sm-6 col-xs-12">
	
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lectus nibh, finibus ut sagittis lacinia, consectetur sit amet nunc. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus et lectus at turpis tristique pretium. Aenean vel massa eu neque consequat dictum. Integer elit ante, egestas non eros non, consectetur posuere justo. Nam vel sollicitudin nisl, et imperdiet mauris. Quisque scelerisque tincidunt nibh, sed bibendum mauris laoreet vel. In hac habitasse platea dictumst.</p>
</div></div>

Working example of a fluid container page

Code Sample

<main><div class="container-fluid">
	
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div></main>

GCWeb Fixed-width Container

Code Sample

<div class="well"><div class="container-fixed">
	
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div></div>