# Location focused page with bootstrap

## Custom theme

### Header code

Adds bootstrap library from a CDN and includes some Google webfonts

```markup
<!-- Bootstrap CDN -->
<link href="//stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<!-- Google Fonts -->
<link href="//fonts.googleapis.com/css?family=Merriweather+Sans:400,700" rel="stylesheet">
<link href='//fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic' rel='stylesheet' type='text/css'>
```

### CSS

Some CSS styles to customize our elements

```css
body,
html {
  width: 100%;
  height: 100%;
}

.btn {
  font-family: "Merriweather Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

#contact {
    padding-top: 100px;
    padding-bottom: 100px;
}
```

### Header template

![](/files/-Lqmb0Hxlz61Y0uKeNSy)

```markup
<div class="navbar navbar-dark bg-dark shadow-sm">
  <div class="container d-flex justify-content-between">
    <a href="#" class="navbar-brand d-flex align-items-center">
      <strong>Example bootstrap theme</strong>
    </a>
  </div>
</div>
```

### Footer template

![](/files/-Lqmb5rOYE9yDiglo7yp)

Simple copyright notice for the bottom of the pages

```markup
<footer class="bg-light py-5">
<div class="container">
  <div class="small text-center text-muted">Copyright &copy; 2019 - ${business_name}</div>
</div>
</footer>
```

## Page blocks

These page blocks will be created from a HTML Code module dragged from the module tray into the body of the page. You can stack many of these kind of blocks to construct your page. Note: you will need to activate the "Enable Jinja rendering" option under "Advanced" when you add the module to the page.

### Block #1 - Location information

![](/files/-LqmbB56WNj73Br0n1Gv)

This example shows standard ways of outputting the location data as:

* Macros - i.e. `${location_name}`
* Template variables - i.e. `{{ location.street }}`

```markup
{$ set location = site.locations[0] %}
<section class="jumbotron text-center">
  <div class="container">
    <h1 class="jumbotron-heading">${location_name}</h1>
    <p class="lead text-muted">
    <p>
      {{ location.street }}{% if location.street2 %}{{ location.street2 }}{% endif %}<br>
      ${city}, ${state} ${postal_code}
    </p>
    <p>
      <strong>{{ now.today().weekday()|day_name }}</strong> ${todays_hours_of_operation}
    </p>
    <p>
      <a href="tel:${phone}">${phone}</a>
    </p>
    <p>
      <a class="btn btn-primary my-2" href="https://www.google.com/maps/search/?api=1&query=${street} ${city} ${state} ${postal_code}">Get directions</a>
      <a class="btn btn-secondary my-2" href="tel:${phone}">Call now</a>
    </p>
  </div>
</section>
```

### Block #2 - Custom field examples

![](/files/-LqmbYoYJt4Wz1UOIwpw)

This example shows how to access the custom fields as:

* Macros - i.e. `${custom_headline}`
* Template variables - i.e. `{{ site.custom_fields.description }}`

For more examples of custom fields, view those [here](/themes-and-custom-templates/using-custom-fields.md).

```markup
<section class="page-section" id="contact">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-lg-8 text-center">
        <h2 class="mt-0">${custom_headline}</h2>
        <hr class="divider my-4">
        <p class="text-muted mb-5">{{ site.custom_fields.description }}</p>
      </div>
    </div>
    <div class="row">
      <div class="col-lg-4 ml-auto text-center">
        <i class="fas fa-phone fa-3x mb-3 text-muted"></i>
        <div>${phone}</div>
      </div>
      <div class="col-lg-4 mr-auto text-center">
        <i class="fas fa-envelope fa-3x mb-3 text-muted"></i>
        <a class="d-block" href="mailto:${contact_email}">${contact_email}</a>
      </div>
    </div>
  </div>
</section>
```


---

# 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://docs.devhub.com/themes-and-custom-templates/example-themes/location-focused-page-with-bootstrap.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.