Documentation Windows 95 UI Kit

On this page you'll get the code snippets for each component from the Windows 95 UI Kit

Buttons

Just add .border-dark for the small border and .border-dark-lg for the larger border.


<button class="btn mr-2 mb-2 btn-primary" type="button">
    <span class="btn-text">Primary</span>
</button>
<button class="btn mr-2 mb-2 btn-primary border-dark" type="button">
    <span class="btn-text">Bordered</span>
</button>
<button class="btn mr-2 mb-2 btn-primary border-dark-lg" type="button">
    <span class="btn-text">Bordered 2</span>
</button>
Color Variations

Use the classic Bootstrap 4 button color classes to add different colors to the buttons (eg. .btn-primary, .btn-secondary, .btn-tertiary, .btn-danger...).

    
<button class="btn mr-2 mb-2 btn-primary" type="button">
    <span class="btn-text">Primary</span>
</button>
<button class="btn mr-2 mb-2 btn-secondary" type="button">
    <span class="btn-text">Secondary</span>
</button>
<button class="btn mr-2 mb-2 btn-tertiary" type="button">
    <span class="btn-text">Tertiary</span>
</button>
<button class="btn mr-2 mb-2 btn-info" type="button">
    <span class="btn-text">Info</span>
</button>
<button class="btn mr-2 mb-2 btn-success" type="button">
    <span class="btn-text">Success</span>
</button>
<button class="btn mr-2 mb-2 btn-warning" type="button">
    <span class="btn-text">Warning</span>
</button>
<button class="btn mr-2 mb-2 btn-danger" type="button">
    <span class="btn-text">Danger</span>
</button>
Sizes

There are three sizes and you can change the size by adding the following ones: .btn-sm, .btn-md, .btn-lg.

        
<button class="btn mr-2 mb-2 btn-sm btn-primary" type="button">
    <span class="btn-text">Small</span>
</button>
<button class="btn mr-2 mb-2 btn-primary" type="button">
    <span class="btn-text">Regular</span>
</button>
<button class="btn mr-2 mb-2 btn-lg btn-primary" type="button">
    <span class="btn-text">Large</span>
</button>
Icon Buttons
            
<div class="d-flex align-items-center">
    <button class="btn btn-sm mr-2 mb-2 btn-primary" type="button">
        <span class="btn-text">📺 Start</span>
    </button>
    <button class="btn mr-2 mb-2 btn-primary" type="button">
        <span class="btn-text">📺 Start</span>
    </button>
    <button class="btn btn-lg mr-2 mb-2 btn-primary" type="button">
        <span class="btn-text">📺 Start</span>
    </button>
</div>

Forms

Form controls
Form Controls
                                
<div class="mb-4 mb-md-5">
    <h6 class="text-gray">Form Controls</h6>
</div>
<div class="form-group d-flex align-items-center justify-content-between">
    <label for="default" class="mr-3">Default:</label>
    <input id="default" type="text" class="form-control w-75" />
</div>
<div class="form-group d-flex align-items-center justify-content-between">
    <label for="disabled" class="mr-3">Disabled:</label>
    <input id="disabled" type="text" class="form-control w-75" disabled />
</div>
<div class="form-group has-success d-flex align-items-center justify-content-between">
    <label for="success" class="mr-3">Success:</label>
    <input id="success" type="text" class="form-control is-valid w-75" />
</div>
<div class="form-group has-danger d-flex align-items-center justify-content-between">
    <label for="error" class="mr-3">Error:</label>
    <input id="error" type="text" class="form-control is-invalid w-75" />
</div>
<div class="form-group d-flex justify-content-between mb-2">
    <label for="textarea" class="mr-3">Textarea:</label>
    <textarea id="textarea" class="form-control w-75" cols="30" rows="10"></textarea>
</div>
<div class="form-group d-flex justify-content-end mb-4">
    <div class="form-check">
        <label class="form-check-label">
            <input class="form-check-input" type="checkbox">
            <span class="form-check-x"></span>
            <span class="form-check-sign"></span>
            I agree to the terms and conditions
        </label>
    </div>
</div>
<div class="d-flex justify-content-end">
    <div class="d-flex">
        <button class="btn btn-sm mr-3 btn-primary border-dark" type="button">
            <span class="btn-text">Submit</span>
        </button>
        <button class="btn btn-sm btn-primary" type="button">
            <span class="btn-text">Cancel</span>
        </button>
    </div>
</div>
Checkboxes
                                
<!-- Checkbox -->
    <div class="form-check">
        <label class="form-check-label">
            <input class="form-check-input" type="checkbox">
            <span class="form-check-x"></span>
            <span class="form-check-sign"></span>
            Unchecked
        </label>
    </div>
    <!-- End of Checkbox -->
    <!-- Checkbox -->
    <div class="form-check">
        <label class="form-check-label">
            <input class="form-check-input" type="checkbox" checked>
            <span class="form-check-x"></span>
            <span class="form-check-sign"></span>
            Checked
        </label>
    </div>
    <!-- End of Checkbox -->
    <!-- Checkbox -->
    <div class="form-check disabled">
        <label class="form-check-label">
            <input class="form-check-input" type="checkbox" disabled>
            <span class="form-check-x"></span>
            <span class="form-check-sign"></span>
            Disabled Unchecked
        </label>
    </div>
    <!-- End of Checkbox -->
    <!-- Checkbox -->
    <div class="form-check disabled">
        <label class="form-check-label">
            <input class="form-check-input" type="checkbox" checked disabled>
            <span class="form-check-x"></span>
            <span class="form-check-sign"></span>
            Disabled Checked
        </label>
    </div>
    <!-- End of Checkbox -->
Radios
                                    
<!-- Radio -->
<div class="form-check form-check-radio">
    <label class="form-check-label">
        <input class="form-check-input" type="radio" name="exampleRadios"
            id="exampleRadios1" value="option1">
        <span class="form-check-sign"></span>
        Radio is off
    </label>
</div>
<!-- End of Radio -->
<!-- Radio -->
<div class="form-check form-check-radio">
    <label class="form-check-label">
        <input class="form-check-input" type="radio" name="exampleRadios"
            id="exampleRadios2" value="option2" checked>
        <span class="form-check-sign"></span>
        Radio is on
    </label>
</div>
<!-- End of Radio -->
<!-- Radio -->
<div class="form-check form-check-radio disabled">
    <label class="form-check-label">
        <input class="form-check-input" type="radio" name="exampleRadios1"
            id="exampleRadios3" value="option3" disabled>
        <span class="form-check-sign"></span>
        Disabled radio is off
    </label>
</div>
<!-- End of Radio -->
<!-- Radio -->
<div class="form-check form-check-radio disabled">
    <label class="form-check-label">
        <input class="form-check-input" type="radio" name="exampleRadios1"
            id="exampleRadios4" value="option4" disabled checked>
        <span class="form-check-sign"></span>
        Disabled radio is on
    </label>
</div>
<!-- End of Radio -->

Cards

Default Primary Card Header Title

Windows 95 sold for $89.99 as an upgrade or $179.99 for the full version.

Default Secondary Card Header Title

Windows 95 was available on either floppy disks or a CD-ROM. The floppy version shipped with 13 disks.

Default Tertiary Card Header Title

The minimum system requirements called for a 386DX processor, 4MB of RAM, and a 120MB hard drive.

Card with white background

The minimum system requirements called for a 386DX processor, 4MB of RAM, and a 120MB hard drive.

                                        
<div class="col-12 col-lg-6 mb-4 mb-lg-0">
    <div class="card">
        <div class="card-header">
            Default Primary Card Header Title
        </div>
        <div class="card-body">
            <p class="card-text">Windows 95 sold for $89.99 as an upgrade or
                $179.99 for the full
                version.</p>
            <div class="d-flex justify-content-end mt-3">
                <button class="btn btn-sm mr-2 btn-primary border-dark"
                    type="button"><span class="btn-text">OK</span></button>
                <button class="btn btn-sm btn-primary" type="button"><span
                        class="btn-text">Cancel</span></button>
            </div>
        </div>
    </div>
</div>
<div class="col-12 col-lg-6 mb-4 mb-lg-5">
    <div class="card card-secondary">
        <div class="card-header text-center">
            <span class="icon icon-xs w95-window-empty"></span>
            Default Secondary Card Header Title
        </div>
        <div class="card-body">
            <p class="card-text">Windows 95 was available on either floppy
                disks or a CD-ROM. The
                floppy version shipped with 13 disks.</p>
            <div class="d-flex mt-3">
                <button class="btn btn-sm mr-2 btn-primary border-dark"
                    type="button"><span class="btn-text">OK</span></button>
                <button class="btn btn-sm btn-primary" type="button"><span
                        class="btn-text">Cancel</span></button>
            </div>
        </div>
    </div>
</div>
<div class="col-12 col-lg-6 mb-4 mb-lg-0">
    <div class="card card-tertiary">
        <div class="card-header">
            <span class="icon icon-xs w95-folder"></span>
            <span class="ml-4">Default Tertiary Card Header Title</span>
        </div>
        <div class="card-body">
            <p class="card-text">The minimum system requirements called for
                a 386DX processor, 4MB
                of RAM, and a 120MB hard drive.</p>
            <div class="d-flex mt-3">
                <button class="btn btn-sm mr-2 btn-primary border-dark"
                    type="button"><span class="btn-text">OK</span></button>
                <button class="btn btn-sm btn-primary" type="button"><span
                        class="btn-text">Cancel</span></button>
            </div>
        </div>
    </div>
</div>
<div class="col-12 col-lg-6 mb-4 mb-lg-0">
    <div class="card card-tertiary">
        <div class="card-header">
            Card with white background
        </div>
        <div class="card-body bg-white">
            <p class="card-text">The minimum system requirements called for
                a 386DX processor, 4MB
                of RAM, and a 120MB hard drive.</p>
        </div>
        <div class="card-footer">
            <div class="d-flex">
                <button class="btn btn-sm mr-2 btn-primary border-dark"
                    type="button"><span class="btn-text">OK</span></button>
                <button class="btn btn-sm btn-primary" type="button"><span
                        class="btn-text">Cancel</span></button>
            </div>
        </div>
    </div>
</div>

Navbars

Use these navbars that look like the famous bar from Windows 95. You can change the color of the bar by adding the following modifier classes: .navbar-primary, .navbar-secondary, .navbar-tertiary.

                        
<nav
    class="navbar navbar-expand-lg navbar-dark justify-content-between mb-3">
    <ul class="navbar-nav navbar-nav-hover flex-row align-items-center">
        <li class="nav-item">
            <a href="../index.html" class="nav-link" role="button">
                <span class="nav-link-inner-text">📺 Start</span>
            </a>
        </li>
        <li class="nav-item">
            <a href="../docs/introduction.html" class="nav-link"
                role="button">
                <span
                    class="nav-link-inner-text">📕 Documentation</span>
            </a>
        </li>
    </ul>
    <div class="time text-center">
        <span class="time text-uppercase">1:47 PM</span>
    </div>
</nav>
<nav
    class="navbar navbar-expand-lg navbar-dark navbar-secondary justify-content-between mb-3">
    <ul class="navbar-nav navbar-nav-hover flex-row align-items-center">
        <li class="nav-item">
            <a href="../index.html" class="nav-link" role="button">
                <span class="nav-link-inner-text">📺 Start</span>
            </a>
        </li>
        <li class="nav-item">
            <a href="../docs/introduction.html" class="nav-link"
                role="button">
                <span
                    class="nav-link-inner-text">📕 Documentation</span>
            </a>
        </li>
    </ul>
    <div class="time text-center">
        <span class="time text-uppercase">1:47 PM</span>
    </div>
</nav>
<nav
    class="navbar navbar-expand-lg navbar-dark navbar-tertiary justify-content-between">
    <ul class="navbar-nav navbar-nav-hover flex-row align-items-center">
        <li class="nav-item">
            <a href="../index.html" class="nav-link" role="button">
                <span class="nav-link-inner-text">📺 Start</span>
            </a>
        </li>
        <li class="nav-item">
            <a href="../docs/introduction.html" class="nav-link"
                role="button">
                <span
                    class="nav-link-inner-text">📕 Documentation</span>
            </a>
        </li>
    </ul>
    <div class="time text-center">
        <span class="time text-uppercase text-white">1:47 PM</span>
    </div>
</nav>

Tabs

Windows 95 UI Kit tabs use the markup of Bootstrap 4 in a perfect order. Check out the tabs documentation from Bootstrap 4.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Soluta voluptatem nam ut temporibus corporis dolorem dolores accusamus deserunt veniam eius maiores suscipit veritatis necessitatibus voluptatum incidunt repellendus eligendi, consequatur rem?

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consequatur earum consequuntur accusamus reprehenderit quae sint, quia eligendi sed quidem neque omnis odit suscipit dolorum corrupti minima quas temporibus recusandae vel.

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ea ad tempora, quam quisquam, neque possimus ducimus eligendi cumque ipsum autem nam magnam atque, ipsam sint inventore repellat iste sunt harum!

                                
<ul class="nav nav-tabs" id="myTab" role="tablist">
    <li class="nav-item">
        <a class="nav-link active" id="home-tab" data-toggle="tab" href="../#home"
            role="tab" aria-controls="home" aria-selected="true">Programs</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" id="profile-tab" data-toggle="tab" href="../#profile"
            role="tab" aria-controls="profile" aria-selected="false">Control Panel</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" id="contact-tab" data-toggle="tab" href="../#contact"
            role="tab" aria-controls="contact" aria-selected="false">Documents</a>
    </li>
</ul>
<div class="tab-content" id="myTabContent">
    <div class="tab-pane show active" id="home" role="tabpanel"
        aria-labelledby="home-tab">
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Soluta voluptatem
            nam ut temporibus corporis dolorem dolores accusamus deserunt veniam eius
            maiores suscipit veritatis necessitatibus voluptatum incidunt repellendus
            eligendi, consequatur rem?</p>
        <button class="btn btn-sm mr-2 btn-primary border-dark" type="button">
            <span class="btn-text">Show Other Options</span>
        </button>
    </div>
    <div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab">
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consequatur earum
            consequuntur accusamus reprehenderit quae sint, quia eligendi sed quidem
            neque omnis odit suscipit dolorum corrupti minima quas temporibus recusandae
            vel.</p>
        <button class="btn btn-sm mr-2 btn-secondary border-dark" type="button">
            <span class="btn-text">Show Other Options</span>
        </button>
    </div>
    <div class="tab-pane" id="contact" role="tabpanel" aria-labelledby="contact-tab">
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ea ad tempora, quam
            quisquam, neque possimus ducimus eligendi cumque ipsum autem nam magnam
            atque, ipsam sint inventore repellat iste sunt harum!</p>
        <button class="btn btn-sm mr-2 btn-tertiary border-dark" type="button">
            <span class="btn-text">Show Other Options</span>
        </button>
    </div>
</div>

Typography

Heading 1

Windows 95 UI Kit

Heading 2

Crafted by Themesberg.com

Heading 3

For the most awesome developers

Heading 4

Use this kit to travel back in time and have fun

Heading 5
I don't know what else to write so that it looks good compared to
Heading 6
The previous header and this header has to be even longer but we did it finally :) :) :)

Paragraphs

Paragraph

I will be the leader of a company that ends up being worth billions of dollars, because I got the answers. I understand culture. I am the nucleus. I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at.

Lead

Ich werde der Anfuhrer eines Unternehmens sein, das Milliarden von Dollar wert ist, weil ich die Antworten habe. Ich verstehe Kultur. Ich bin der Kern. Ich denke das ist ein Verantwortung, die ich habe, Moglichkeiten zu schieben, Menschen zu zeigen, Dies ist das Niveau, auf dem die Dinge sein konnten.

Quote

Sere el lider de una empresa que termina valiendo miles de millones de dolares, porque obtuve las respuestas ...

Someone famous in Source Title
Muted text

Voi fi liderul unei companii care ajunge sa valoreze miliarde de dolari, pentru ca am toate raspunsurile...

Primary text

Olyan tarsasag vezetoje leszek, amely tobb milliard dollarba kerul, mert megkaptam a valaszokat ...

Info text

Je serai le chef d'une entreprise qui vaudra des milliards de dollars, car j'ai eu les reponses...

Success text

Saro il leader di un'azienda che finira per valere miliardi di dollari, perche ho avuto le risposte...

Warning text

Eu serei o lider de uma empresa que acaba valendo bilhoes de dolares, porque recebi as respostas...

Danger text

Bede liderem firmy, ktora ostatecznie jest warta miliardy dolarow, poniewaz mam odpowiedzi...

Windows 95 UI Kit

Windows 95 UI Kit was created by using our awesome Pixel PRO UI Kit. Get a free demo by clicking here.

Pixel PRO UI Kit from Themesberg.com
Live preview
Themesberg

Brought to you by Themesberg.com. Join our community for awesome products:

Github Twitter Facebook Dribbble