# Section

The section Block generates an HTML section element with various customizations based on the values of the `section` object passed to the template. This section generates Bootstrap Columns and be adjusted based on the column section of each block

The general idea behind Section blocks is that you can add any content in here, but follow Semantic HTML. 

The section's tag name is either `section` or the `section.html_tag` in the [Advanced Tab](https://artistro08.gitbook.io/tailor-starter-documentation/pages/blocks/section/advanced-tab) fields if you have it set. The Advanced Tab fields also add an ID attribute and CSS Classes that you specify. You can also adjust the Bootstrap container type as well in this tab. 

You can set a background to a section by going under the Background Image Tab.

You can also adjust the spacing before and after using the switches from `section.disable_top_spacing`, and `section.disable_bottom_spacing` respectfully. 

The section element contains a `row` element with a `class` attribute set to `row-cols-lg-` followed by the length of `section.columns`  and is dynamically set by the number of column blocks, as well as additional classes to set the row's direction on mobile devices based on the value of `section.reverse_columns_on_mobile`. 

For each `column` block in `section.columns`, the template generates a Bootstrap Column  and adds spacing unless `column.disable_bottom_spacing` is true, as well as additional classes based on the values of `column.position`, and `column.width`. The Bootstrap Column will contain content that depends on which column block you add.

### Section Column Blocks

You can view more about each column block by browsing each block below:

* [Content Column ](https://artistro08.gitbook.io/tailor-starter-documentation/pages/blocks/section/content-column)Block
* [Buttons Column ](https://artistro08.gitbook.io/tailor-starter-documentation/pages/blocks/section/buttons-column)Block
* [Image Column ](https://artistro08.gitbook.io/tailor-starter-documentation/pages/blocks/section/image-column)Block
* [Posts Column ](https://artistro08.gitbook.io/tailor-starter-documentation/pages/blocks/section/posts-column)Block
* [Events Column](https://artistro08.gitbook.io/tailor-starter-documentation/pages/blocks/section/events-column) Block
* [Products Column](https://artistro08.gitbook.io/tailor-starter-documentation/pages/blocks/section/products-column) Block
* [Form Column ](https://artistro08.gitbook.io/tailor-starter-documentation/pages/blocks/section/form-column-1)Block

### Files Used

The following files are used to display this content

* [`section.yaml`](https://github.com/artistro08/tailor-starter/blob/main/seeds/blueprints/content/mixins/builder/section/section.yaml) which is used in the [`builder.yaml`](https://github.com/artistro08/tailor-starter/blob/main/seeds/blueprints/content/mixins/builder/builder.yaml) blueprint file
* [`general_options/advanced_fields.yaml`](https://github.com/artistro08/tailor-starter/blob/main/seeds/blueprints/content/mixins/builder/general_options/advanced_fields.yaml) file
* [`general_options/section_header.yaml`](https://github.com/artistro08/tailor-starter/blob/main/seeds/blueprints/content/mixins/builder/general_options/section_header.yaml) file
* [`builder/sections/section.htm`](https://github.com/artistro08/tailor-starter/blob/main/partials/builder/sections/section.htm) partial file