API Call Layout Bootstrap
—
### ✅ Features:
– Material Design UI
– Language Tabs (Vue, React, Python, etc.)
– Responsive Layout
– Bootstrap 5 CDN only (no build process)
– Ready-to-embed code examples
—
### ✅ Folder Structure (suggested)
api-docs/
│
├── index.html
├── css/
│ └── styles.css
└── assets/
└── logo.png (optional)—
### ✅ `index.html` (core layout)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>API Examples – Free Bootstrap Material Layout</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="css/styles.css">
</head>
<body class="bg-light">
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<div class="container-fluid">
<a class="navbar-brand" href="#">API Code Examples</a>
</div>
</nav>
<div class="container mt-4">
<h1 class="mb-4">How to Call an API – Examples in Popular Languages</h1>
<ul class="nav nav-tabs" id="apiTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="vue-tab" data-bs-toggle="tab" data-bs-target="#vue" type="button" role="tab">Vue.js</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="react-tab" data-bs-toggle="tab" data-bs-target="#react" type="button" role="tab">React</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="python-tab" data-bs-toggle="tab" data-bs-target="#python" type="button" role="tab">Python</button>
</li>
</ul>
<div class="tab-content bg-white p-4 shadow-sm rounded-bottom" id="apiTabContent">
<!-- Vue Tab -->
<div class="tab-pane fade show active" id="vue" role="tabpanel">
<h4>API Call in Vue.js (Axios)</h4>
<pre><code>import axios from 'axios';
axios.get('https://api.example.com/data')
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error(error);
});</code></pre>
</div>
<!-- React Tab -->
<div class="tab-pane fade" id="react" role="tabpanel">
<h4>API Call in React (Fetch)</h4>
<pre><code>useEffect(() => {
fetch('https://api.example.com/data')
.then(res => res.json())
.then(data => console.log(data))
.catch(err => console.error(err));
}, []);</code></pre>
</div>
<!-- Python Tab -->
<div class="tab-pane fade" id="python" role="tabpanel">
<h4>API Call in Python (Requests)</h4>
<pre><code>import requests
response = requests.get('https://api.example.com/data')
if response.status_code == 200:
print(response.json())</code></pre>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>—
### ✅ `css/styles.css` (optional)
body {
font-family: 'Roboto', sans-serif;
}
pre {
background-color: #f5f5f5;
padding: 1rem;
border-radius: 6px;
font-size: 0.9rem;
}—
Would you like me to generate a downloadable `.zip` with the layout or extend it with more languages like Node.js, PHP, and cURL?
—
### 🖼️ Preview
—
### 📁 Download the Template
You can download the complete template as a ZIP file here:
👉 [Download Material Design Bootstrap Layout](https://mdbootstrap.com/docs/standard/getting-started/download/)
—
### 📄 Template Overview
**1. Header (Navbar):**
– Responsive and collapsible navigation bar.
– Includes a brand logo and navigation links.
– Styled with Material Design colors and shadows.
**2. Main Content:**
– A container to showcase your API examples or any other content.
– Utilizes Bootstrap's grid system for layout.
**3. Footer:**
– Multi-column footer with links and contact information.
– Styled to match the Material Design aesthetic.
—
### 🛠️ How to Use
1. **Download and Extract:**
– Click on the download link above to get the ZIP file.
– Extract the contents to your project directory.
2. **Customize Content:**
– Open the `index.html` file in your preferred code editor.
– Modify the header links, main content, and footer information as needed.
3. **Add Your API Examples:**
– Within the main content area, insert code snippets or documentation for API calls in different languages like Vue.js, React, etc.
4. **Preview Your Site:**
– Open `index.html` in a web browser to see your customized layout.
—
This template leverages **Material Design for Bootstrap (MDB)**, providing a modern and responsive design out of the box. For more customization and components, you can explore the MDB documentation: linkturn0search0
If you need further assistance or additional features, feel free to ask!
nodeByUri(uri: "/") {
__typename
… on ContentType {
id
name
}
… on Page {
id
title
}
}
}
convert this to code
—
### ✅ JavaScript (using `fetch`):
const query = `
{
nodeByUri(uri: "/") {
__typename
... on ContentType {
id
name
}
... on Page {
id
title
}
}
}
`;
fetch('https://your-graphql-endpoint.com/graphql', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ query }),
})
.then(res => res.json())
.then(data => console.log(data))
.catch(err => console.error(err));—
### ✅ Python (using `requests`):
import requests
query = '''
{
nodeByUri(uri: "/") {
__typename
... on ContentType {
id
name
}
... on Page {
id
title
}
}
}
'''
response = requests.post('https://your-graphql-endpoint.com/graphql', json={'query': query})
print(response.json())—
### ✅ GraphiQL / GraphQL Playground (raw):
{
nodeByUri(uri: "/") {
__typename
... on ContentType {
id
name
}
... on Page {
id
title
}
}
}—
Would you like me to embed this in your Bootstrap API demo page?
—
### ✅ GraphQL Query – Page by ID
query GetPageByID {
page(id: 123, idType: DATABASE_ID) {
id
databaseId
title
content
slug
uri
date
}
}—
### 📝 Notes:
– Replace `123` with your actual page ID.
– You can use other `idType` values like `URI`, `SLUG`, `ID`, etc., depending on what you're passing.
idType: DATABASE_ID | ID | URI | SLUG—
### ✅ Example using `fetch` in JavaScript:
const query = `
query GetPageByID {
page(id: 123, idType: DATABASE_ID) {
id
databaseId
title
content
slug
uri
date
}
}
`;
fetch('https://your-site.com/graphql', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ query }),
})
.then(res => res.json())
.then(data => console.log(data.data.page))
.catch(err => console.error(err));Would you like this integrated into a working Bootstrap UI layout or test it via GraphiQL?