# Styling

### Full Width Row

Adjusting the width of a footer row is straightforward.&#x20;

Simply click the three dots on the row you want to modify, go to the **Container** section, and toggle the **Full Width** option:

<figure><img src="https://2905187046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1O25QgF7NUwiK2Ek4ro8%2Fuploads%2FxHm8KoXV8dYw8hYTEQj1%2FFooter%20Row%20Full%20Width.jpg?alt=media&#x26;token=2d21c2a2-ad6e-4424-acaf-88e62fb84052" alt=""><figcaption></figcaption></figure>

### Changing Row Style

You can apply styles like background, and custom link and text colors directly to the **Row** element.&#x20;

To apply your style for the row, click the _vertical three dots_ on the **Row** element, then go to the **Style** tab. Here, you can set colors for _text_, _headings_ and _links_, and choose a _background_ for the row, including the option to add an image.:

<div><figure><img src="https://2905187046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1O25QgF7NUwiK2Ek4ro8%2Fuploads%2FsvxW6FnhOobm5PUquAT4%2FFooter%20Row%20-%20Background.jpg?alt=media&#x26;token=bfc60125-71b2-48a6-8806-73b73859f4a7" alt="" width="271"><figcaption><p>Row Background</p></figcaption></figure> <figure><img src="https://2905187046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1O25QgF7NUwiK2Ek4ro8%2Fuploads%2FRgHgGvlwIfp4GZGSq8wg%2FFooter%20Row%20-%20Colors.jpg?alt=media&#x26;token=666b5995-4010-4add-8852-45b859f3504c" alt="" width="272"><figcaption><p>Row Elements Colors</p></figcaption></figure></div>

This will result in the row appearing as shown in the example below:

<figure><img src="https://2905187046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1O25QgF7NUwiK2Ek4ro8%2Fuploads%2F3QQkaiCmUJrHd8SEIisc%2FFooter%20Row%20-%20Style%20Preview.jpg?alt=media&#x26;token=6d086d3f-7bf7-4d94-9eb7-565c47b37370" alt=""><figcaption></figcaption></figure>

### Columns

When you want to balance columns or set custom widths, you can adjust these settings for each column individually.​

<figure><img src="https://2905187046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1O25QgF7NUwiK2Ek4ro8%2Fuploads%2FgHWhFq9F1shdQDqKZzZ2%2FFooter%20Columns%20-%20Two%20Cols.jpg?alt=media&#x26;token=d47d7e88-dd10-4be9-bef9-9ed0c1aac726" alt=""><figcaption><p>Two columns of the same width</p></figcaption></figure>

Now, we will set the width for **Column 1** to span 3 columns out of the 12-column grid by clicking the vertical three dots button, then in **Content** section setting the **Width** value:

<figure><img src="https://2905187046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1O25QgF7NUwiK2Ek4ro8%2Fuploads%2F6fmBY0LYQfNo3UQCeSRr%2FFooter%20Columns%20-%20Column%20Width.jpg?alt=media&#x26;token=586b5f53-41a8-4cfd-8e59-c5433987320b" alt="" width="281"><figcaption></figcaption></figure>

For the other column, set the width to **Auto**, which will fill the remaining space. Additionally, for responsive viewports, you can adjust these rows to display one column per row or according to your preference. The result will be:

<figure><img src="https://2905187046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1O25QgF7NUwiK2Ek4ro8%2Fuploads%2Fsvz18QIZgHNnRNBhMioP%2FFooter%20Columns%20-%20Two%20Cols%20Balanced.jpg?alt=media&#x26;token=99e10cd6-7efd-4c9c-9150-b5c383ea279d" alt=""><figcaption><p>Balanced columns</p></figcaption></figure>

### Spacings

You can adjust the spacing of elements for each row, as the **Row** provides settings for both _vertical_ and _horizontal_ spacing.

Click the vertical three dots on **Row** element and go to **Content** section, scroll to _Horizontal_ and _Vertical_ Gap:

<figure><img src="https://2905187046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1O25QgF7NUwiK2Ek4ro8%2Fuploads%2FA1CSCpWXQ8HwFuJnAUsn%2FFooter%20Columns%20-%20Spacing.jpg?alt=media&#x26;token=1f3ec2e2-6f9c-4012-8877-92c626f3c779" alt=""><figcaption><p>Adjusting the elements spacing in a row</p></figcaption></figure>

