# callouts

Callouts are great tools to encourage visitors to do an action. Here is a simple example:

![](/files/-LLV0B4ISPQtPHhkeE_9)

## Markup

```
<section class="section">
  <div class="container">
    <div class="row">

      <!-- -----Begin call to action-->
      <div class="call-out tb-vcenter-wrapper">

        <div class="col-sm-9 vcenter">
          <h2 class="title">Fellowship opportunities available</h2>
          <h4 class="sub-title">Absolutely Stunning Design &amp; Functionality Common Things Expected</h4>
        </div>

        <div class="col-sm-3 vcenter text-center">
          <a href="#" class="btn btn-medium btn-anim-i btn-skin-blue btn-icon-right btn-circle">
            <i class="oli oli-forward"></i>
             <span>Apply now</span>
            </a>
         </div>

      </div>
      <!-- -----End call to action-->

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

Using `.vcenter` class in `.tb-vcenter-wrapper` parent would position the child vertically centered, so that the button at the right will be vertically aligned with the text at the left.

## Add Parallax Background

You will add the background to the `section` that contains the call to action by usong `data-img-src` attribute along with the `.parallax-layer` class. More on this at parallax sections.

```
<section data-img-src="../../assets/img/backgrounds/09.jpg" class="section parallax-layer ov-light-alpha-90">
  ...
</section>
```

![](/files/-LLV0B4OjIfN90IQwc7y)

## Alternative

```
<section data-img-src="../../assets/img/backgrounds/09.jpg" class="section dark-wrapper parallax-layer ov-grad1-alpha-70">
  <div class="container">
    <div class="row">

      <!-- -----Begin call to action-->
      <div class="call-out tb-vcenter-wrapper">
        <div class="col-sm-8 col-sm-push-4 vcenter">
          <h2 class="title">Fellowship opportunities available</h2>
          <h4 class="sub-title">Absolutely Stunning Design &amp; Functionality Common Things Expected</h4>
        </div>
        <div class="col-sm-4 col-sm-pull-8 vcenter text-right">
          <a href="#" class="btn btn-medium btn-circle"><i class="oli oli-unlock-filled"></i>Apply now</a>
        </div>
      </div>
      <!-- -----End call to action-->

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

![](/files/-LLV0B4Rx95bD4L2G6dp)

**Notice** the usage of `.col-sm-push-4` and `.col-sm-pull-8`. These classes are asset classes of Bootsstrap to allow you manipulate the columns. Using above code will cause teh button to remain at the bottom of the texts at mobile devices while the button is at the left at desktop devices.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://owwwlab.gitbook.io/chaos-docs/els/callouts.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.