Fedora Bootstrap Docs

Fedora Bootstrap is a custom Bootstrap 4 build used for Fedora Community applications. It is based on Bootstrap 4, and currently is built using the Bootstrap 4.0.0-alpha6 prerelease.

Getting the Files

The built CSS and Javascript files are hosted on apps.fedoraproject.org for inclusion in Fedora Infrastructure apps. To include the most recent version of Fedora Bootstrap in your Fedora app, use the following lines in your HTML output:

<link href="https://apps.fedoraproject.org/global/fedora-bootstrap-1.1.1/fedora-bootstrap.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="https://apps.fedoraproject.org/global/fedora-bootstrap-1.1.1/fedora-bootstrap.js"></script>

If you don't want to include from this location, you can download built versions of these files from the Fedora Bootstrap pagure

Fedora Bootstrap does not bundle jQuery as part of fedora-bootstrap.js . You will have to include this seperately as part of the other JS imports in your application.
Fonts

Apps that use Fedora Bootstrap require you include 3 webfonts: Open Sans for general use, Hack for code and the like that need monospace, and FontAwesome for icons.

The fonts are also available on apps.fedoraproject.org for inclusion in Fedora Infra apps, and can be included like this:

<link href="https://apps.fedoraproject.org/global/fedora-bootstrap-fonts/hack.css" type="text/css" rel="stylesheet" />
<link href="https://apps.fedoraproject.org/global/fedora-bootstrap-fonts/open-sans.css" type="text/css" rel="stylesheet" />
<link href="https://apps.fedoraproject.org/global/fedora-bootstrap-fonts/font-awesome.css" type="text/css" rel="stylesheet" />

If you don't want to include from this location, you can download these files as they appear there from the Fedora Bootstrap Fonts pagure

Basic Layout

All Fedora Bootstrap based apps follow a similar layout. This includes

  • A masthead component at the top of the page for the app logo, top-level app navigation, and user login / menu
  • an optional subheader for apps provide information about an item under the main app. For example, a project in pagure. The subheader also can include a tabbed navigation for the item, and actions
  • a dark coloured body colour that should only be seen for the footer. This is to ensure the footer colour extends to the bottom of the browser window
  • a bodycontent class that sets the colour of the main body of the document to white

An example of this basic layout would be:

Subheader One

A subtitle in the Subheader

Tabpage Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis congue augue, sit amet interdum eros facilisis a. Nullam nec placerat ligula, non luctus velit. Sed maximus rutrum nunc ut mollis. Nunc sed condimentum ante, non rutrum mi. Praesent finibus laoreet dolor id rhoncus. Curabitur nisl elit, sollicitudin ac placerat ac, accumsan non quam. Mauris eu efficitur libero. Vivamus tincidunt tincidunt lacus a ornare. Duis tincidunt malesuada consequat. Suspendisse purus neque, faucibus vel libero nec, pretium eleifend dui. Aenean faucibus lorem non posuere congue. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris semper, libero ac consectetur vestibulum, turpis lectus hendrerit nisi, id consequat nulla neque a quam.

Quisque id cursus nibh. Duis quis lacus condimentum, placerat risus sed, semper magna. Nullam ut urna est. Fusce finibus quis libero et hendrerit. Sed posuere tellus dolor, a placerat ex faucibus non. Aliquam iaculis, augue vitae rhoncus maximus, eros leo egestas nulla, id sagittis enim justo vitae leo. Mauris ut diam nisl. Phasellus sapien erat, eleifend ut justo condimentum, aliquet aliquet lacus. Pellentesque varius enim vitae cursus pulvinar. Vivamus a blandit sem. Aenean in efficitur leo, malesuada hendrerit sapien. Ut varius ex a augue finibus, a consequat tellus porttitor. Proin id quam augue. In malesuada convallis massa. Aenean lacinia, elit sed auctor aliquam, nisi urna cursus lorem, scelerisque commodo lorem lacus non est.

<div class="masthead">
    <div class="container">
        <div class="row">
            <div class="col-sm-3">
                <img src="logo.png" height=40px />
            </div>
            <div class="col-sm-9">
                <nav class="navbar navbar-toggleable-sm navbar-light p-0 float-right">
                    <ul class="nav navbar-nav">
                        <li class="nav-item">
                            <a class="nav-link active" href="#">Toplevel 1</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Toplevel 2</a>
                        </li>
                        <li class="nav-item dropdown ml-1">
                            <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
                                <img class="avatar circle" src="https://seccdn.libravatar.org/avatar/de5bf8d06663adb3bb1b8d49ccab259828fad7dddeb233b073d0c447d79b4c14?s=24&d=retro">
                            </a>
                            <div class="dropdown-menu dropdown-menu-right">
                                <div class="dropdown-header">
                                    <strong>username</strong>
                                </div>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item" href="#">My Profile</a>
                                <a class="dropdown-item" href="#">My Settings</a>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item" href="/logout/?next=https://pagure.io/fedora-bootstrap/releases">Log Out</a>
                            </div>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>
</div>
<div class="subheader pt-3">
    <div class="container">
        <h2>
      Subheader One
      <div class="float-right">
        <a href="#" class="btn btn-primary btn-sm">Action 1</a>
        <a href="#" class="btn btn-secondary btn-sm">Action 2</a>
      </div>
    </h2>
        <p>
            A subtitle in the Subheader
        </p>
        <ul class="nav nav-tabs nav-small pt-1">
            <li class="nav-item">
                <a class="nav-link active" href="#">
          Tab One
        </a>
            </li>
            <li class="nav-item">
                <a class="nav-link text-sm-center" href="#">
          Tab Two
        </a>
            </li>
        </ul>
    </div>
</div>
<div class="bodycontent">
    <div class="container py-4">
        <h3>Tabpage Title</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis congue augue, sit amet interdum eros facilisis a. Nullam nec placerat ligula, non luctus velit. Sed maximus rutrum nunc ut mollis. Nunc sed condimentum ante, non rutrum mi.
            Praesent finibus laoreet dolor id rhoncus. Curabitur nisl elit, sollicitudin ac placerat ac, accumsan non quam. Mauris eu efficitur libero. Vivamus tincidunt tincidunt lacus a ornare. Duis tincidunt malesuada consequat. Suspendisse purus neque,
            faucibus vel libero nec, pretium eleifend dui. Aenean faucibus lorem non posuere congue. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
            posuere cubilia Curae; Mauris semper, libero ac consectetur vestibulum, turpis lectus hendrerit nisi, id consequat nulla neque a quam. </p>
        <p>Quisque id cursus nibh. Duis quis lacus condimentum, placerat risus sed, semper magna. Nullam ut urna est. Fusce finibus quis libero et hendrerit. Sed posuere tellus dolor, a placerat ex faucibus non. Aliquam iaculis, augue vitae rhoncus maximus,
            eros leo egestas nulla, id sagittis enim justo vitae leo. Mauris ut diam nisl. Phasellus sapien erat, eleifend ut justo condimentum, aliquet aliquet lacus. Pellentesque varius enim vitae cursus pulvinar. Vivamus a blandit sem. Aenean in efficitur
            leo, malesuada hendrerit sapien. Ut varius ex a augue finibus, a consequat tellus porttitor. Proin id quam augue. In malesuada convallis massa. Aenean lacinia, elit sed auctor aliquam, nisi urna cursus lorem, scelerisque commodo lorem lacus
            non est. </p>
    </div>
</div>
<div class="footer py-3">
    <div class="container">
        <div class="text-center text-muted">
            This is a footer of the page
        </div>
    </div>
</div>

If you don't want to include from this location, you can download these files as they appear there from the Fedora Bootstrap Fonts pagure