GCWeb Alignment example

Horizontal Alignment

Left aligned text-left

Code

<p class="text-left">Use to align text to the left.</p>

Right aligned text-right

Use to align text to the right.

Code

<p class="text-right">Use to align text to the right.</p>

Center text-center

Use to align text to the center.

Code

<p class="text-center">Use to align text to the center.</p>

Center content blocks center-block

Code

<img class="center-block" alt="..." src="x.jpg" />

Left aligned from small view text-sm-left

Left-aligned in small view and over

Code

<p class="text-right text-sm-left">Left-aligned in small view and over</p>

Right aligned from small view text-sm-right

Right-aligned in small view and over

Code

<p class="text-sm-right">Right-aligned in small view and over</p>

Vertical alignment

Code

<table>
	<tr>
		<td> ... </td>
		<td class=" align-top "><p class="mrgn-tp-0 mrgn-bttm-0"> ... </p></td>
	</tr>
	<tr>
		<td> ... </td>
		<td class=" align-middle "><p class="mrgn-tp-0 mrgn-bttm-0"> ... </p></td>
	</tr>
	<tr>
		<td> ... </td>
		<td class=" align-bottom "><p class="mrgn-tp-0 mrgn-bttm-0"> ... </p></td>
	</tr>
</table>

Items Alignment (Grid)

The following CSS classes are used in conjunction with flex grids. Examples of these are with the example of the flex grid. (link to come)

• align-self-center
• align-self-end
• align-items-center
• align-items-sm-center