Fluid Bootstrap 4 Theme

Layout

Semantics

Semantic markup should be used to structure layouts. The main semantic components in Fluid are:

Left navbar - contains primary branding and navigation; represented by a <nav class="navbar"> tag
Top nav - contains secondary branding and navigation (such as breadcrumbs) and may contain other application level components (i.e. current user info, notifications, etc.); represented by a <nav class="fixed-top"> tag that is a direct child of the <body>
Main content - contains all other application content; represented by the <main> tag
- Sections - use to divide major content areas; represented by <section> tags
Main footer - may contain tertiary branding/navigation and copyright/legal information, etc.; represented by the last <footer> tag that is a direct child of the <body>

Responsiveness

FLUID is designed for large screens. Therefore, the minimum width of the entire layout is limited by setting min-width: 1024px on the <body>, below which a horizontal scrollbar will appear. The maximum width of .container-fluid has been set to 1920px, above which the container will have equal left and right margins to fill up the remaining space. Generally, you should use .container-fluid so that layouts scale fluidly between these extremes. (The default breakpoints for .container have not been changed.)

The main header .navbar is given the modifier classes .navbar-header and .fixed-top, while the main footer .navbar is given .navbar-footer. These elements should not be placed inside any container so that they can stretch to the full width of the window.

Observe the behavior of the example containers below and the header/footer on this page as you change the width of the window to understand the desired behavior.

Document Width:

.container width:

.container-fluid width:

Panels

Usage

Panels are a concept in Fluid that is implemented using Bootstrap Cards. All content should be contained in panels. You should usually not need to use .card-header and should generally use .card-title and .card-text within the .card-body to achieve the consistent layout required by Fluid. Use .card-footer to keep footer elements, including buttons and links, at the bottom of the card even if its height increases.

You are encouraged to make use of the available card layout utilities to control the placement of Panels. This will allow you to achieve horizontal and/or flowing layouts. When you just need a series of full-width panels, simply place one .card after another in your markup. You can also use an accordion to group panels.

`.card-columns` Example

This is some text within a card block.

Card title

Card with subtitle

You're going to be an interesting companion, Mr. Data. I'll alert the crew. The look in your eyes, I recognize it. You used to have it for me. The Federation's gone; the Borg is everywhere! When has justice ever been as simple as a rule book?

Card title

I'll alert the crew. You're going to be an interesting companion, Mr. Data. I've had twelve years to think about it. And if I had it to do over again, I would have grabbed the phaser and pointed it at you instead of them. For an android with no feelings, he sure managed to evoke them in others. I am your worst nightmare! A lot of things can change in twelve years, Admiral. You did exactly what you had to do. You considered all your options, you tried every alternative and then you made the hard choice. Besides, you look good in a dress. Computer, belay that order. Mr. Worf, you sound like a man who's asking his friend if he can start dating his sister.

Card title

Yes, absolutely, I do indeed concur, wholeheartedly! Mr. Worf, you sound like a man who's asking his friend if he can start dating his sister. Not if I weaken first. Ensign Babyface! A surprise party? Mr. Worf, I hate surprise parties. I would *never* do that to you. Sorry, Data. Now, how the hell do we defeat an enemy that knows us better than we know ourselves? Captain, why are we out here chasing comets? Our neural pathways have become accustomed to your sensory input patterns. The look in your eyes, I recognize it. You used to have it for me. I can't. As much as I care about you, my first duty is to the ship. Sure. You'd be surprised how far a hug goes with Geordi, or Worf. Computer, belay that order. What's a knock-out like you doing in a computer-generated gin joint like this? This should be interesting. The unexpected is our normal routine. I'd like to think that I haven't changed those things, sir. We know you're dealing in stolen ore. But I wanna talk about the assassination attempt on Lieutenant Worf. We could cause a diplomatic crisis. Take the ship into the Neutral Zone Shields up! Rrrrred alert! Flair is what marks the difference between artistry and mere competence. When has justice ever been as simple as a rule book? In all trust, there is the possibility for betrayal. For an android with no feelings, he sure managed to evoke them in others.

Card header

Card title

I recommend you don't fire until you're within 40,000 kilometers. Congratulations - you just destroyed the Enterprise. We know you're dealing in stolen ore. But I wanna talk about the assassination attempt on Lieutenant Worf. Now we know what they mean by 'advanced' tactical training. Some days you get the bear, and some days the bear gets you. Fear is the true enemy, the only enemy. I'm afraid I still don't understand, sir. Is it my imagination, or have tempers become a little frayed on the ship lately? Mr. Worf, you do remember how to fire phasers? Worf, It's better than music. It's jazz.

Card title

We know you're dealing in stolen ore. But I wanna talk about the assassination attempt on Lieutenant Worf. When has justice ever been as simple as a rule book? For an android with no feelings, he sure managed to evoke them in others. A surprise party? Mr. Worf, I hate surprise parties. I would *never* do that to you.

`.card-deck` Example

This is some text within a card block.

Card title

Card with subtitle

You enjoyed that. Fate protects fools, little children and ships named Enterprise. In all trust, there is the possibility for betrayal. Flair is what marks the difference between artistry and mere competence. I am your worst nightmare! You bet I'm agitated! I may be surrounded by insanity, but I am not insane. I will obey your orders. I will serve this ship as First Officer. And in an attack against the Enterprise, I will die with this crew. But I will not break my oath of loyalty to Starfleet.

Card link Another link

Card title

Wait a minute - you've been declared dead. You can't give orders around here. Now we know what they mean by 'advanced' tactical training. Commander William Riker of the Starship Enterprise. Your shields were failing, sir. Your head is not an artifact! A surprise party? Mr. Worf, I hate surprise parties. I would *never* do that to you. Shields up! Rrrrred alert! Congratulations - you just destroyed the Enterprise.

Primary Secondary Button

`.card-group` Example

Sunset

That sunset is perfectly lined up with that crazy-shaped tree. It's like a burning bush.

Last updated yesterday

Butterflies

Thos are some crazy mushrooms. I hope those butterflies know what they're doing.

Last updated just now

Daisy

Wow, that is some amazing background blur. Looks like the photographer read his camera's manual!

Last updated 3 minutes ago

Tracks

Where are these tracks going? Does anybody know? Does anybody care?

Last updated 1 hour ago