# How can I add columns into my page using shortcode?

**URL:** <https://discourse.gohugo.io/t/how-can-i-add-columns-into-my-page-using-shortcode/20201>\
**Category:** support\
**Created:** [August 14, 2019, 12:02pm UTC](https://discourse.gohugo.io/t/how-can-i-add-columns-into-my-page-using-shortcode/20201 "2019-08-14T12:02:48Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![minaminfo](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/minaminfo/32/9118_2.png) [@minaminfo](https://discourse.gohugo.io/u/minaminfo)\
**Post date:** [August 14, 2019, 12:02pm UTC](https://discourse.gohugo.io/t/how-can-i-add-columns-into-my-page-using-shortcode/20201/1 "2019-08-14T12:02:48Z")

</div>

Hi. I’m using aether theme. I’m ok with its one big column where whole of my stuff goes. but sometimes I need to insert stuff(suppose text or divs) in 2-3 columns which should align side-by-side like for comparison etc. Can I ask you how can I get shortcodes into use here?

I know how to do this in CSS but quite new to Hugo and after some time I came to conclusion that only shortcodes can help me here. So please help me construct shortcode which I can use in post markdown.

From image you can see I made three boxes at bottom. In each box I wish I could be able to insert either some text/image or any thing. Is that possible? Actually my markup should look like a main `div` containing three `divs`

 ![Untitled%20Design](https://canada1.discourse-cdn.com/flex036/uploads/gohugo/original/2X/5/52679c8163f97e24a03cb8b8da902f50b6e18cde.jpeg)

---

<div class="post-metadata">

**Author:** ![olafghanizadeh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/olafghanizadeh/32/4494_2.png) [@olafghanizadeh](https://discourse.gohugo.io/u/olafghanizadeh)\
**Post date:** [August 14, 2019, 3:01pm UTC](https://discourse.gohugo.io/t/how-can-i-add-columns-into-my-page-using-shortcode/20201/2 "2019-08-14T15:01:17Z")

</div>

You can do a nested shortcode. There are seveal threads on the forum and info in the docs on it 🙂 Happy coding!

---

<div class="post-metadata">

**Author:** ![davidsneighbour](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/davidsneighbour/32/24507_2.png) [@davidsneighbour](https://discourse.gohugo.io/u/davidsneighbour)\
**Post date:** [August 14, 2019, 3:18pm UTC](https://discourse.gohugo.io/t/how-can-i-add-columns-into-my-page-using-shortcode/20201/3 "2019-08-14T15:18:08Z")

</div>

I recently did a quick shortcode thingy with that outcome:

row shortcode row.html:

```auto
<div class="row">{{ .Inner }}</div>

```

column shortcode column.html:

```auto
<div class="col-md">{{ .Inner }}</div>

```

call it like that:

```auto
{{% row %}}
{{% column % }}something{{% /column %}}
{{% column % }}something else{{% /column %}}
{{% /row %}}

```

That’s just a sample for Bootstrap columns that share the width of the row.

---

<div class="post-metadata">

**Author:** ![nipa](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/nipa/32/11215_2.png) [@nipa](https://discourse.gohugo.io/u/nipa)\
**Post date:** [April 29, 2020, 8:33pm UTC](https://discourse.gohugo.io/t/how-can-i-add-columns-into-my-page-using-shortcode/20201/4 "2020-04-29T20:33:29Z")

</div>

Hi @davidsneighbour,

I tried to do as you suggested (creating two html files named as the markup name into `/layout/shortcodes` but I got the following error  
`unrecognized character in shortcode action: U+0025 '%'. Note: Parameters with non-alphanumeric args must be quoted`

---

<div class="post-metadata">

**Author:** ![supriya\_dutta](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/supriya_dutta/32/11514_2.png) [@supriya\_dutta](https://discourse.gohugo.io/u/supriya_dutta)\
**Post date:** [May 31, 2020, 3:01pm UTC](https://discourse.gohugo.io/t/how-can-i-add-columns-into-my-page-using-shortcode/20201/5 "2020-05-31T15:01:09Z")

</div>

```auto
<!-- {{< row >}}
{{< column>}}
something1
{{< /column>}}
{{< column>}}
something1
{{< /column>}}
{{< column>}}
something1
{{< /column>}}
{{< /row >}} -->

```

---

<div class="post-metadata">

**Author:** ![alexandros](https://avatars.discourse-cdn.com/v4/letter/a/ecc23a/32.png) [@alexandros](https://discourse.gohugo.io/u/alexandros)\
**Post date:** [May 31, 2020, 3:01pm UTC](https://discourse.gohugo.io/t/how-can-i-add-columns-into-my-page-using-shortcode/20201/6 "2020-05-31T15:01:38Z")

</div>