# Bootstrap 4 grid span over two rows and aurelia

**URL:** <https://discourse.aurelia.io/t/bootstrap-4-grid-span-over-two-rows-and-aurelia/2937>\
**Category:** Uncategorized\
**Created:** [September 18, 2019, 9:42am UTC](https://discourse.aurelia.io/t/bootstrap-4-grid-span-over-two-rows-and-aurelia/2937 "2019-09-18T09:42:01Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![NvdGoorbergh](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/nvdgoorbergh/32/1613_2.png) [@NvdGoorbergh](https://discourse.aurelia.io/u/NvdGoorbergh)\
**Post date:** [September 18, 2019, 9:42am UTC](https://discourse.aurelia.io/t/bootstrap-4-grid-span-over-two-rows-and-aurelia/2937/1 "2019-09-18T09:42:01Z")

</div>

Dear aurelia crew,

im trying to create a frontpage with 5 news items. The first item is larger and consists of two rows.  
EG:

 ![SZ_home](https://canada1.discourse-cdn.com/flex027/uploads/aurelia/original/2X/5/5b511f0a440103eb017fb5b7f3d942c442a2e0e3.jpeg)

Normally in bootstrap grid it is pretty easy and I would do something like:

> ```
> <div class="container-fluid">
> <div class="row">
> <div class="col-md-6">
> </div>
> <div class="col-md-6">
> <div class="row">
> <div class="col-md-6">
> </div>
> <div class="col-md-6">
> </div>
> </div>
> <div class="row">
> <div class="col-md-6">
> </div>
> <div class="col-md-6">
> </div>
> </div>
> </div>
> </div>
> </div>
> 
> ```

But the tricky part is combining aurelia and this design together.  
I really want to use the repeat for loop instead of hardcoding everything.

Any ideas on how to do this?

---

<div class="post-metadata">

**Author:** ![mroeling](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/mroeling/32/781_2.png) [@mroeling](https://discourse.aurelia.io/u/mroeling)\
**Post date:** [September 18, 2019, 12:15pm UTC](https://discourse.aurelia.io/t/bootstrap-4-grid-span-over-two-rows-and-aurelia/2937/2 "2019-09-18T12:15:16Z")

</div>

You could use the `$index` value to specify what to do. And combine this with the modulus operator `%`.

```auto
<div class="container-fluid">
    <div class="row" repeat.for="newsItem of newsItems">
<template if.bind="$index % 5 === 1 || $index % 5 === 3">
        <div class="row">
          <div class="col-md-6">
</template>
          <div class="col-md-6">
<template if.bind="$index % 5 === 2 || $index % 5 === 4">
            </div>
</template>
          </div>
<template if.bind="$index % 5 === 0">
      </div>
</template>
    </div>
  </div>
</div>

```

Disclaimer: untested and probably not best solution, but to give you a hint in how to solve the problem. 😉 Please share your solution afterwards.

See bottom of next paragraph: [https://aurelia.io/docs/fundamentals/cheat-sheet#templating-view-resources](https://aurelia.io/docs/fundamentals/cheat-sheet#templating-view-resources)

---

<div class="post-metadata">

**Author:** ![arnederuwe](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/arnederuwe/32/737_2.png) [@arnederuwe](https://discourse.aurelia.io/u/arnederuwe)\
**Post date:** [September 20, 2019, 9:49am UTC](https://discourse.aurelia.io/t/bootstrap-4-grid-span-over-two-rows-and-aurelia/2937/3 "2019-09-20T09:49:52Z")

</div>

I’m not getting why you would want to use a repeat.for here, your UI is static, so why shouldn’t your bindings be static?

```auto
<div class="container-fluid">
    <div class="row">
      <div class="col-md-6" with.bind="newsItems[0]">
      </div>
      <div class="col-md-6">
        <div class="row">
          <div class="col-md-6" with.bind="newsItems[1]">
          </div>
          <div class="col-md-6" with.bind="newsItems[2]">
          </div>
        </div>
        <div class="row">
          <div class="col-md-6" with.bind="newsItems[3]">
          </div>
          <div class="col-md-6" with.bind="newsItems[4]">
          </div>
        </div>
      </div>
    </div>
  </div>

```

You could opt for a hybrid approach, making the first block static and iterate the four smaller ones, but I really don’t see the point, it will be less performant with no added benefit.  
If you would want to go with this approach, see this SO post: [https://stackoverflow.com/questions/38532233/dynamically-create-another-row-of-images-using-aurelia/38606955#38606955](https://stackoverflow.com/questions/38532233/dynamically-create-another-row-of-images-using-aurelia/38606955#38606955)

---

<div class="post-metadata">

**Author:** ![NvdGoorbergh](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/nvdgoorbergh/32/1613_2.png) [@NvdGoorbergh](https://discourse.aurelia.io/u/NvdGoorbergh)\
**Post date:** [September 20, 2019, 10:58am UTC](https://discourse.aurelia.io/t/bootstrap-4-grid-span-over-two-rows-and-aurelia/2937/4 "2019-09-20T10:58:12Z")

</div>

Hmm. Good point actually.  
I think I have read somewhere that the :active state is not available if you don’t use the for loop. But I could be wrong. Will definitly look into that solution! Thanks.

---

<div class="post-metadata">

**Author:** ![NvdGoorbergh](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/nvdgoorbergh/32/1613_2.png) [@NvdGoorbergh](https://discourse.aurelia.io/u/NvdGoorbergh)\
**Post date:** [September 22, 2019, 8:02pm UTC](https://discourse.aurelia.io/t/bootstrap-4-grid-span-over-two-rows-and-aurelia/2937/5 "2019-09-22T20:02:33Z")

</div>

> [@arnederuwe](#):
>
> with.bind="newsItems[0]

might be my dumb ass but I cant get that to work.  
I am trying to get it from an array of posts. So trying posts[0] didn’t do much.  
What am I missing here?

---

<div class="post-metadata">

**Author:** ![arnederuwe](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/arnederuwe/32/737_2.png) [@arnederuwe](https://discourse.aurelia.io/u/arnederuwe)\
**Post date:** [September 23, 2019, 6:42am UTC](https://discourse.aurelia.io/t/bootstrap-4-grid-span-over-two-rows-and-aurelia/2937/6 "2019-09-23T06:42:19Z")

</div>

Might be good to reproduce your issue in a codesandbox, working example:

> **[Aurelia Sandbox - CodeSandbox](https://codesandbox.io/embed/aurelia-sandbox-fg2f8)**
>
> CodeSandbox is an online editor tailored for web applications.