# Headers

Headers are the top part of your page. We have created 7 variations for them, so they include multiple use-cases: blog, portfolio, shop, app, etc. The easiest way to use them is to select the one that is right for you and edit its content. To do so, you will need to be familiar with the Bootstrap Carousel. To see the full documentation for it, please go [here](https://getbootstrap.com/docs/4.1/components/carousel/).

Here is an example of a header with a custom carousel:

![](/files/-LG9SgyDLSBcXl0cfjea)

![](/files/-LG9Sl9rqesLjqx7ksU4)

![](/files/-LG9Sn8Ht_RMEi4y8JdD)

```markup
<div class="header header-5">
	<nav class="navbar navbar-expand-lg navbar-transparent navbar-absolute">
	  <a class="navbar-brand" href="#">grace</a>
	  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#header-5" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
	    <i class="navbar-toggler-icon fa fa-bars"></i>
	  </button>
	
	  <div class="collapse navbar-collapse" id="header-5">
	    <ul class="navbar-nav mr-auto mx-5">
	      <li class="nav-item active">
	        <a class="nav-link" href="#">Clothes <span class="sr-only">(current)</span></a>
	      </li>
	      <li class="nav-item">
	        <a class="nav-link" href="#">Stories</a>
	      </li>
	      <li class="nav-item">
	        <a class="nav-link disabled" href="#">Who we are</a>
	      </li>
	      <li class="nav-item d-block d-md-none">
	      	<a class="nav-link disabled" href="#">Shopping Cart</a>
	      </li>
	    </ul>
	    <div class="cart ml-auto d-none d-md-block">
	      <button class="btn btn-sm btn-icon btn-white" type="submit"><i class="fa fa-shopping-cart"></i></button>
	    </div>
	  </div>
	</nav>
    
    <div id="header-carousel-5" class="header-carousel carousel">
        <div class="row carousel-indicators">
	            <div class="col-md-3 ind active" data-target="#header-carousel-5" data-slide-to="0" >
	                Ref <i>&</i> Haim Collection
	            </div>
		        <div class="col-md-3 ind" data-target="#header-carousel-5" data-slide-to="1">
	                The Fall Wedding Collection
	            </div>
				<div class="col-md-3 ind" data-target="#header-carousel-5" data-slide-to="2">
				  	The New Collection		                
	            </div>
		</div>
		
		<a class="carousel-control-prev" href="#header-carousel-5" role="button" data-slide="prev">
		    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
		    <span class="sr-only">Previous</span>
		</a>
		<a class="carousel-control-next" href="#header-carousel-5" role="button" data-slide="next">
		    <span class="carousel-control-next-icon" aria-hidden="true"></span>
		    <span class="sr-only">Next</span>
		</a>
        <div class="carousel-inner" role="listbox">
            <div class="carousel-item active">
                <div class="header" style="background-image: url('./assets/media/img/headers/header_51.jpg');">
                    <div class="content">
                        <h1 class="title">Ref <i>&</i> Haim collection</h1>
	                    <a href="#a" class="btn">
                            Shop Now
                        </a>
                    </div>
                </div>
            </div>
            <div class="carousel-item">
                <div class="header" style="background-image: url('./assets/media/img/headers/header_52.jpg');">
                    <div class="content">
                        <h1 class="title">The Fall Wedding Collection</h1>
	                    <a href="#a" class="btn">
                            Shop Now
                        </a>
                    </div>
                </div>                    
            </div>
            <div class="carousel-item">
                <div class="header" style="background-image: url('./assets/media/img/headers/header_53.jpg');">
                    <div class="content">
                        <h1 class="title">The New Collection</h1>
	                    <a href="#a" class="btn">
                            Shop Now
                        </a>
                    </div>
                </div>                    
            </div>
        </div>
    </div>
</div>
```


---

# 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://bootstrapbay.gitbook.io/grace-ui-kit/components/headers.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.