# Box Layout

### Box layout

![](https://460755057-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fl1d49lBAg3jv6axyszMB%2Fuploads%2FKbc8SOQ8rk6FGg87LJN5%2Fbox-layout.png?alt=media\&token=121fff13-231d-4d30-bc29-5c3f3fd0aa7a)

Follow the below steps to create a box layout.

**Step:1**

open a text blog

**Step:2**

copy and paste the below code

```html
<div class="col-xs-12 col-md-12 col-lg-12 col-sm-12 box-layout simple-layout">
<div class="col-xs-12 col-md-6 col-lg-6 col-sm-12">
<div class="box-content">
<div class="page-header">
<h1>Appetizer Menu - Box layout</h1>
</div>
[product_category category="course" columns="1" per_page="4" order="asc"]

</div>
</div>
<div class="col-xs-12 col-md-6 col-lg-6 col-sm-12">
<div class="box-content">
<div class="page-header">
<h1>course Menu - Box layout</h1>
</div>
[product_category category="course" columns="1" per_page="4" order="asc"]

</div>
</div>
<div class="col-xs-12 col-md-12 col-lg-12 col-sm-12">
<div class="box-content dessert-menu">
<div class="page-header">
<h1>Dessert Menu - Box layout</h1>
</div>
[product_category category="course" columns="1" per_page="4" order="asc"]

</div>
</div>
</div>
```

Extra class name: None

and click to update the page.