> For the complete documentation index, see [llms.txt](https://docs.devhub.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.devhub.com/themes-and-custom-templates/example-themes/location-focused-page-with-bootstrap.md).
# Location focused page with bootstrap
## Custom theme
### Header code
Adds bootstrap library from a CDN and includes some Google webfonts
```markup
```
### 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
```markup
```
### Footer template
Simple copyright notice for the bottom of the pages
```markup
```
## 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
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] %}
```
### Block #2 - Custom field examples
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