Skip to content

Commit

Permalink
tweak homepage layout
Browse files Browse the repository at this point in the history
  • Loading branch information
@mdo
mdo committed May 30, 2017
1 parent 39a258d commit 942645b
Showing 1 changed file with 31 additions and 19 deletions.
50 changes: 31 additions & 19 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,20 +16,20 @@

<div class="bd-featurette">
<div class="container">
<h2 class="bd-featurette-title">Easy to get started.</h2>
<h2 class="bd-featurette-title">Easy to get started</h2>
<p class="lead">Quickly include Bootstrap's CSS and JS into any project. Use your favorite package manager, download the source, or use the Bootstrap CDN.</p>

<div class="row">
<div class="col-sm-6 mb-3">
<div class="row text-center">
<div class="col-sm-6 col-md-5 offset-md-1 mb-3 pr-md-4">
<h4>Managed dependencies</h4>
<p>Include Bootstrap's source Sass and JavaScript files via Bower, Composer, Meteor, or npm. Package managed installs don't include documentation, but do include our build system and readme.</p>
<p>
<a class="btn btn-bd-purple" href="{{ site.baseurl }}/getting-started/download/#package-managers">View install methods</a>
</p>
</div>
<div class="col-sm-6 mb-3">
<div class="col-sm-6 col-md-5 mb-3 pl-md-4">
<h4>Bootstrap CDN</h4>
<p>When you just need to include Bootstrap's compiled CSS and JS, use the Bootstrap CDN, free from the MaxCDN folks.</p>
<p>When you only need to include Bootstrap's compiled CSS and JS, you can use the Bootstrap CDN.</p>
{% highlight html %}
<link rel="stylesheet" href="{{ site.cdn.css }}" integrity="{{ site.cdn.css_hash }}" crossorigin="anonymous">
<script src="{{ site.cdn.jquery }}" integrity="{{ site.cdn.jquery_hash }}" crossorigin="anonymous"></script>
Expand All @@ -39,19 +39,23 @@ <h4>Bootstrap CDN</h4>
</div>
</div>

<hr class="half-rule mt-0">
<hr class="half-rule mx-auto">

<p><strong>Looking for something else?</strong> Compiled builds of Bootstrap's CSS and JS are also available.</p>
<a href="{{ site.baseurl }}/getting-started/download/" class="btn btn-bd-purple">More download options</a>
<div class="text-center">
<p>
<strong>Looking for something else?</strong> Compiled builds of Bootstrap's CSS and JS are also available.
</p>
<a href="{{ site.baseurl }}/getting-started/download/" class="btn btn-bd-purple">More download options</a>
</div>
</div>
</div>

<div class="bd-featurette">
<div class="container">
<h2 class="bd-featurette-title">Designed for everyone, everywhere.</h2>
<h2 class="bd-featurette-title">Designed for everyone, everywhere</h2>
<p class="lead">Bootstrap makes front-end web development faster and easier. It's made for folks of all skill levels, devices of all shapes, and projects of all sizes.</p>

<div class="row">
<div class="row text-center">
<div class="col-sm-4 mb-3">
<img src="{{ site.baseurl }}/assets/img/sass.png" alt="Sass support" class="img-fluid">
<h4>Preprocessor</h4>
Expand All @@ -69,22 +73,26 @@ <h4>Full of features</h4>
</div>
</div>

<hr class="half-rule mt-0">
<hr class="half-rule mx-auto">

<p><strong>Bootstrap is open source!</strong> It's hosted, developed, and maintained on GitHub by folks like you.</p>
<a href="{{ site.repo }}" class="btn btn-bd-purple">View the GitHub project</a>
<div class="text-center">
<p>
<strong>Bootstrap is open source!</strong> It's hosted, developed, and maintained on GitHub by folks like you.
</p>
<a href="{{ site.repo }}" class="btn btn-bd-purple">View the GitHub project</a>
</div>
</div>
</div>

<div class="bd-featurette">
<div class="container">
<h2 class="bd-featurette-title">Official Bootstrap Themes.</h2>
<h2 class="bd-featurette-title">Official Bootstrap Themes</h2>
<p class="lead">
Take Bootstrap to the next level with official premium themes. Each theme is its own toolkit featuring all of Bootstrap, brand new components and plugins, full docs, build tools, and more.
</p>

<p class="lead">
<a href="{{ site.themes }}" class="btn btn-bd-purple">Browse themes</a>
<a href="{{ site.themes }}" class="btn btn-lg btn-bd-purple">Browse themes</a>
</p>

<img class="img-fluid mx-auto" src="{{ site.baseurl }}/assets/img/bs-themes.png" alt="Bootstrap Themes" width="1024" height="388">
Expand All @@ -93,7 +101,7 @@ <h2 class="bd-featurette-title">Official Bootstrap Themes.</h2>

<div class="bd-featurette">
<div class="container">
<h2 class="bd-featurette-title">Built with Bootstrap.</h2>
<h2 class="bd-featurette-title">Built with Bootstrap</h2>
<p class="lead">Millions of amazing sites across the web are being built with Bootstrap. Get started on your own with our growing <a href="{{ site.baseurl }}/examples/">collection of examples</a> or by exploring some of our favorites.</p>

<div class="row bd-featured-sites">
Expand All @@ -106,9 +114,13 @@ <h2 class="bd-featurette-title">Built with Bootstrap.</h2>
{% endfor %}
</div>

<hr class="half-rule">
<hr class="half-rule mx-auto">

<p>We showcase dozens of inspiring projects built with Bootstrap on the Bootstrap Expo.</p>
<a href="{{ site.expo }}" class="btn btn-bd-purple">Explore the Expo</a>
<div class="text-center">
<p>
We showcase dozens of inspiring projects built with Bootstrap on the Bootstrap Expo.
</p>
<a href="{{ site.expo }}" class="btn btn-bd-purple">Explore the Expo</a>
</div>
</div>
</div>

0 comments on commit 942645b

Please sign in to comment.