Bootstrap 3 Tutorial

Bootstrap 3 Templates

Last modified on: October 28, 2024

<div class="flex-shrink-0 flex flex-col relative items-end">
<div>
<div class="pt-0">
<div class="gizmo-bot-avatar flex h-8 w-8 items-center justify-center overflow-hidden rounded-full">&nbsp;</div>
</div>
</div>
</div>
<div class="group/conversation-turn relative flex w-full min-w-0 flex-col agent-turn">
<div class="flex-col gap-1 md:gap-3">
<div class="flex max-w-full flex-col flex-grow">
<div class="min-h-8 text-message flex w-full flex-col items-end gap-2 whitespace-normal break-words [.text-message+&amp;]:mt-5" dir="auto" data-message-author-role="assistant" data-message-id="6b058d4d-7eea-4d20-a128-089c8d7750c7" data-message-model-slug="gpt-4o-mini">
<div class="flex w-full flex-col gap-1 empty:hidden first:pt-[3px]">
<div class="markdown prose w-full break-words dark:prose-invert light">
<h3>Bootstrap 3 Templates</h3>
<p>Bootstrap 3 provides a powerful framework for developing responsive websites and applications. Below are some basic templates you can use as starting points for your projects. Each template demonstrates different aspects of Bootstrap's grid system, components, and utility classes.</p>
<hr />
<h4>1. Basic Bootstrap 3 Template</h4>
<p>This is a simple template that includes the Bootstrap CSS and JS files, a navigation bar, and a footer.</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;Basic Bootstrap 3 Template&lt;/title&gt;
    &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;nav class="navbar navbar-default"&gt;
    &lt;div class="container"&gt;
        &lt;div class="navbar-header"&gt;
            &lt;a class="navbar-brand" href="#"&gt;My Website&lt;/a&gt;
        &lt;/div&gt;
        &lt;ul class="nav navbar-nav"&gt;
            &lt;li class="active"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Services&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/div&gt;
&lt;/nav&gt;

&lt;div class="container"&gt;
    &lt;h1&gt;Welcome to My Website&lt;/h1&gt;
    &lt;p&gt;This is a basic Bootstrap 3 template.&lt;/p&gt;
&lt;/div&gt;

&lt;footer class="footer"&gt;
    &lt;div class="container"&gt;
        &lt;p class="text-muted"&gt;&copy; 2024 My Website. All Rights Reserved.&lt;/p&gt;
    &lt;/div&gt;
&lt;/footer&gt;

&lt;script src="https://code.jquery.com/jquery-1.11.1.min.js"&gt;&lt;/script&gt;
&lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h3>Explanation</h3>
<ul>
<li>This template includes a responsive navigation bar, a welcome message, and a footer. It serves as a foundation for building more complex layouts.</li>
</ul>
<hr />
<h4>2. Bootstrap 3 Landing Page Template</h4>
<p>This template is designed for a landing page layout featuring a hero section, features, and a call-to-action.</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;Landing Page&lt;/title&gt;
    &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
    &lt;style&gt;
        .hero {
            background-color: #f8f9fa;
            padding: 50px 0;
            text-align: center;
        }
        .feature {
            text-align: center;
            margin: 20px 0;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;nav class="navbar navbar-default"&gt;
    &lt;div class="container"&gt;
        &lt;div class="navbar-header"&gt;
            &lt;a class="navbar-brand" href="#"&gt;My Product&lt;/a&gt;
        &lt;/div&gt;
        &lt;ul class="nav navbar-nav"&gt;
            &lt;li class="active"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Features&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Pricing&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/div&gt;
&lt;/nav&gt;

&lt;div class="hero"&gt;
    &lt;div class="container"&gt;
        &lt;h1&gt;Welcome to Our Product&lt;/h1&gt;
        &lt;p&gt;Our product is the best solution for your needs.&lt;/p&gt;
        &lt;a href="#" class="btn btn-primary btn-lg"&gt;Get Started&lt;/a&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;div class="container"&gt;
    &lt;h2&gt;Features&lt;/h2&gt;
    &lt;div class="row"&gt;
        &lt;div class="col-xs-12 col-sm-4 feature"&gt;
            &lt;h3&gt;Feature 1&lt;/h3&gt;
            &lt;p&gt;Description of feature 1.&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class="col-xs-12 col-sm-4 feature"&gt;
            &lt;h3&gt;Feature 2&lt;/h3&gt;
            &lt;p&gt;Description of feature 2.&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class="col-xs-12 col-sm-4 feature"&gt;
            &lt;h3&gt;Feature 3&lt;/h3&gt;
            &lt;p&gt;Description of feature 3.&lt;/p&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;footer class="footer"&gt;
    &lt;div class="container"&gt;
        &lt;p class="text-muted"&gt;&copy; 2024 My Product. All Rights Reserved.&lt;/p&gt;
    &lt;/div&gt;
&lt;/footer&gt;

&lt;script src="https://code.jquery.com/jquery-1.11.1.min.js"&gt;&lt;/script&gt;
&lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h3>Explanation</h3>
<ul>
<li>This landing page template features a hero section with a call-to-action button and a section highlighting product features. It is visually appealing and user-friendly.</li>
</ul>
<hr />
<h4>3. Bootstrap 3 Blog Template</h4>
<p>This template is ideal for creating a simple blog layout, complete with a sidebar and post previews.</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;Blog&lt;/title&gt;
    &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;nav class="navbar navbar-default"&gt;
    &lt;div class="container"&gt;
        &lt;div class="navbar-header"&gt;
            &lt;a class="navbar-brand" href="#"&gt;My Blog&lt;/a&gt;
        &lt;/div&gt;
        &lt;ul class="nav navbar-nav"&gt;
            &lt;li class="active"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/div&gt;
&lt;/nav&gt;

&lt;div class="container"&gt;
    &lt;div class="row"&gt;
        &lt;div class="col-md-8"&gt;
            &lt;h2&gt;Blog Posts&lt;/h2&gt;
            &lt;div class="well"&gt;
                &lt;h3&gt;Post Title 1&lt;/h3&gt;
                &lt;p&gt;Excerpt of the first blog post...&lt;/p&gt;
                &lt;a href="#" class="btn btn-default"&gt;Read More&lt;/a&gt;
            &lt;/div&gt;
            &lt;div class="well"&gt;
                &lt;h3&gt;Post Title 2&lt;/h3&gt;
                &lt;p&gt;Excerpt of the second blog post...&lt;/p&gt;
                &lt;a href="#" class="btn btn-default"&gt;Read More&lt;/a&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="col-md-4"&gt;
            &lt;h2&gt;Sidebar&lt;/h2&gt;
            &lt;div class="well"&gt;
                &lt;h4&gt;About Me&lt;/h4&gt;
                &lt;p&gt;Short bio...&lt;/p&gt;
            &lt;/div&gt;
            &lt;div class="well"&gt;
                &lt;h4&gt;Categories&lt;/h4&gt;
                &lt;ul&gt;
                    &lt;li&gt;&lt;a href="#"&gt;Category 1&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#"&gt;Category 2&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#"&gt;Category 3&lt;/a&gt;&lt;/li&gt;
                &lt;/ul&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;

Web Technology View More