We don’t just care about academics, we care about you.
Seminary shouldn’t be an ivory tower. You are better served when you’re taught by scholars with real life experience, which is why over 95% of our faculty are serving in the local church as pastors or in the field as counselors.
We don’t just care about academics, we care about you.
Seminary shouldn’t be an ivory tower. You are better served when you’re taught by scholars with real life experience, which is why over 95% of our faculty are serving in the local church as pastors or in the field as counselors.
This is a lead paragraph. Leberkas alcatra buffalo, shank tail picanha jowl corned beef boudin t-bone short ribs pig fatback short loin pork belly. Cupim burgdoggen tongue sausage.
.h1 through .h6 classes are also available, for when you want to match the font styling of a heading but cannot use the associated HTML element.
h1. Bootstrap heading class .h1
h2. Bootstrap heading class .h2
h3. Bootstrap heading class .h3
h4. Bootstrap heading class .h4
h5. Bootstrap heading class .h5
h6. Bootstrap heading class .h6
Customized Headings
h3 Heading With faded secondary text that uses text-muted
Inline Text Elements
You can use the mark tag to highlighttext.
Use the del tag to show a text as deleted.
This line of text will render as underlined. It uses the u tag.
Use the small tag for fine or small print.
Use the strong tag for bold text.
Use the em tag for italicized text.
Text alignment
This paragraph uses the text-justify class. Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi.Cras
mattis iudicium purus sit amet fermentum.
Use text-left for Left aligned text on all viewport sizes.
Use text-center for Center aligned text on all viewport sizes.
Use text-right for Right aligned text on all viewport sizes.
Use text-sm-right for right aligned text on viewports sized SM. (small) or wider.
Use text-md-right for right aligned text on viewports sized MD (medium) or wider.
Use text-lg-right for right aligned text on viewports sized LG (large) or wider.
Use text-xl-left for Left aligned text on viewports sized XL (extra-large) or wider.
Text transform
Transform text in components with text capitalization classes.
Use text-lowercase for Lowercased text.
Use text-uppercase for Uppercased text.
Use text-capitalize to capitalize the first letter in each word.
Min Width Media Queries
-xs Extra small devices (portrait phones, less than 576px) No media query since this is the default in Bootstrap
-sm Small devices (landscape phones, 576px and up) @media (min-width: 576px) { ... }
-md Medium devices (tablets, 768px and up) @media (min-width: 768px) { ... }
-lg Large devices (desktops, 992px and up) @media (min-width: 992px) { ... }
-xl Extra large devices (large desktops, 1200px and up) @media (min-width: 1200px) { ... }
Max Width Media Queries
-xs Extra small devices (portrait phones, less than 576px) @media (max-width: 575px) { ... }
-sm Small devices (landscape phones, less than 768px)
@media (max-width: 767px) { ... }
-md Medium devices (tablets, less than 992px)
@media (max-width: 991px) { ... }
-lg Large devices (desktops, less than 1200px)
@media (max-width: 1199px) { ... }
-xl Extra large devices (large desktops)
No media query since the extra-large breakpoint has no upper bound on its width
Grid System
Auto-layout columns
Column 1 of 2: The column class col applies to every device and viewport, from xs to xl and every column will be the same width.
Column 2 of 2: The column class col applies to every device and viewport, from xs to xl and every column will be the same width.
Column 1 of 3: The column class col applies to every device and viewport, from xs to xl and every column will be the same width.
Column 2 of 3: The column class col applies to every device and viewport, from xs to xl and every column will be the same width.
Column 3 of 3: The column class col applies to every device and viewport, from xs to xl and every column will be the same width.
Variable width content
Column 1 of 3: Auto-layout for flexbox grid columns also means you can set the width of one column and the others will automatically resize around it. This column class is just col.
Column 2 of 3: Auto-layout for flexbox grid columns also means you can set the width of one column and the others will automatically resize around it. You may use predefined grid classes (as shown below), grid mixins, or inline widths. Note that
the other columns will resize no matter the width of the center column. This column class is col-6
Column 3 of 3: This column class is just col. Note that the other columns will resize no matter the width of the center column.
Setting one column width
Column 1 of 3: Auto-layout for flexbox grid columns also means you can set the width of one column and the others will automatically resize around it. This column class is just col.
Column 2 of 3: Auto-layout for flexbox grid columns also means you can set the width of one column and the others will automatically resize around it. You may use predefined grid classes (as shown below), grid mixins, or inline widths. Note that
the other columns will resize no matter the width of the center column. This column class is col-6
Column 3 of 3: This column class is just col. Note that the other columns will resize no matter the width of the center column.
Variable width columns
Column 1 of 3
This column is using "col col-xl-2" Using the col-{breakpoint}-auto classes, columns can size itself based on the natural width of its content.
Column 2 of 3 is Using "col-12 col-md-auto"
Column3 of 3 is using "col col-xl-2"
This is super handy with single line content like inputs, numbers, etc. This, in conjunction with horizontal alignment classes, is very useful for centering layouts with uneven column sizes as viewport width changes.
Column 1 of 3
This column is using "col" only. Fugiat qui nostrum beatae, quod officiis animi nulla incidunt magni, delectus repellendus tempora saepe consectetur illum ullam facilis voluptates impedit quisquam nesciunt!
Column 2 of 3. This column is using "col-12 col-md-auto"
Column 3 of 3. This column is using "col col-xl-2"
Equal-width multi-row
This column uses just "col"
Create equal-width columns that span multiple rows by inserting a .w-100 where you want the columns to break to a new line. Make the breaks responsive by mixing the .w-100 with some responsive display utilities.
This column uses just "col"
Create equal-width columns that span multiple rows by inserting a .w-100 where you want the columns to break to a new line. Make the breaks responsive by mixing the .w-100 with some responsive display utilities.
This column uses "w-100"
Create equal-width columns that span multiple rows by inserting a .w-100 where you want the columns to break to a new line. Make the breaks responsive by mixing the .w-100 with some responsive display utilities.
This column uses just "col"
Create equal-width columns that span multiple rows by inserting a .w-100 where you want the columns to break to a new line. Make the breaks responsive by mixing the .w-100 with some responsive display utilities.
This column uses just "col"
Create equal-width columns that span multiple rows by inserting a .w-100 where you want the columns to break to a new line. Make the breaks responsive by mixing the .w-100 with some responsive display utilities.
All Breakpoints
Column 1 of 4. For grids that are the same from the smallest of devices to the largest, use the .col and .col-* classes.
Column 2 of 4.
Column 3 of 4
Column 4 of 4: Specify a numbered class when you need a particularly sized column; otherwise, feel free to stick to .col.
Column 1 of 2. This column uses "col-8"
Column 2 of 2. This column uses "col-4"
Stacked to horizontal
This column uses "col-md-8". Using a single set of .col-sm-* classes, you can create a basic grid system that starts out stacked on extra small devices before becoming horizontal on desktop (medium) devices.
This column uses "col-md-4". These columns will always stack when viewed on small devices.
This column uses "col-sm". These columns will always stack when viewed on small devices.
This column uses "col-sm". These columns will always stack when viewed on small devices.
This column uses "col-sm". These columns will always stack when viewed on small devices.
Mix and Match Columns
This column uses "col col-lg-8". Use a combination of different classes for each tier as needed.
This column uses "col-6 col-lg-4". Stack the columns on mobile by making one full-width and the other half-width
This column uses "col-6 col-lg-4". Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop
This column uses "col-6 col-lg-4"
This column uses "col-6 col-lg-4"
This column uses "col-6. Columns are always 50% wide, on mobile and desktop.
This column uses "col-6. Columns are always 50% wide, on mobile and desktop.
Column Alignment
Vertical alignment
One of three columns.
Two of three columns. This row uses"row align-items-start" Use flexbox alignment utilities to vertically and horizontally align columns.
Three of three columns. Notice how the text is aligned to the top of the columns.
One of three columns. This row uses "row align-items-center"
One of three columns
One of three columns. Notice how the text is aligned to the center of the columns
One of three columns. This row uses "row align-items-end"
One of three columns
One of three columns. Notice how the text is aligned to the bottom of the columns.
One of three columns
One of three columns
One of three columns
Horizontal Alignment
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
No Gutters
The gutters between columns in our predefined grid classes can be removed with .no-gutters. This removes the negative margins from .row and the horizontal padding from all immediate children columns. This column uses "col-12 col-md-6 col-lg-8".
Note you can continue to use this with all other predefined grid classes (including column widths, responsive tiers, reorders, and more.This column uses "col-6 col-lg-4"
Narrow Gutters (Custom)
The gutters between columns in our predefined grid classes can be made narrow with .row--narrow.
Note you can continue to use this with all other predefined grid classes (including column widths, responsive tiers, reorders, and more.This column uses "col-6 col-lg-4"
Normal Gutters
This is a normal column. You’re safe! We had feared the worst. When we heard about Alderaan, we were afraid that you were... We don’t have time for our sorrows, Commander. The battle station has surely tracked us here. It’s the only explanation for the ease of our escape. You must use the information in this R2 unit to plan the attack. It is our only hope. Yes. We are approaching the planet Yavin. The Rebel base is on a moon on the far side. We are preparing to orbit the planet.
Didn’t we just leave this party? What kept you? We ran into some old friends. Is the ship all right? Seems okay, if we can get to it. Just hope the old man got the tractor beam out of commission. Look! Come on, Artoo, we’re going! Now's our chance! Go! No! Come on! Come on! Luke, its too late! Blast the door! Kid!
Column Wrapping
If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line. This column uses "col-9"
Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit. This column uses "col-4"
Subsequent columns continue along the new line. This column uses "col-6"
Column Resets How to use clearfix to fix uneven columns
With the handful of grid tiers available, you're bound to run into issues where, at certain breakpoints, your columns don't clear quite right as one is taller than the other. To fix that, use a combination of a .clearfix and our responsive
utility classes. This column uses "col-6 col-md-3"
With the handful of grid tiers available, you're bound to run into issues where, at certain breakpoints, your columns don't clear quite right as one is taller than the other. To fix that, use a combination of a .clearfix and our responsive
utility classes. This column uses "col-6 col-md-3"
Added the extra clearfix for only the required viewport. To do this, we created an empty div with the class of "clearfix d-sm-none-up".
This column uses "col-6 col-md-3"
With the handful of grid tiers available, you're bound to run into issues where, at certain breakpoints, your columns don't clear quite right as one is taller than the other. To fix that, use a combination of a .clearfix and our responsive
utility classes. This column uses "col-6 col-md-3"
Column Offsets
In addition to column clearing at responsive breakpoints, you may need to reset offsets, pushes, or pulls. This column uses "col-md-5 col-lg-6"
Resize your screen to see this in action. This column uses "col-md-5 offset-sm-2 col-lg-6 offset-md-0"
This column uses "col col-md-6 col-lg-5 col-xl-6"
This column uses "col-md-6 col-lg-5 offset-md-2 col-xl-6 offset-lg-0"
This column uses "col-lg-4"
Move columns to the right using .offset-md-* classes. These classes increase the left margin of a column by * columns. For example, .offset-md-4 moves .col-lg-4 over four columns. This column uses "col-lg-4 offset-md-4"
This column uses "col-lg-3 offset-md-3"
This column uses "col-lg-3 offset-md-3" Resize your screen to see it in action.
This column uses "col-lg-6 offset-md-3"
Reordering
First, but unordered. Use flexbox utilities for controlling the visual order of your content. This column uses "col flex-unordered". The background-color is lightskyblue.
Second, but last. This column uses "col flex-last". The background-color is darkcyan.
Third, but first. This column uses "col flex-first". The background-color is lightsteelblue.
Nesting
Level 1: This column uses "col-md-9". To nest your content with the default grid, add a new .row and set of .col-sm-* columns within an existing .col-sm-* column.
Level 2: This is part of a nested row. Nested rows should include a set of columns that add up to 12 or fewer (it is not required that you use all 12 available columns) This column uses "col-8 col-md-6"
Level 2: This is also part of a nested row. It is not required that you use all 12 columns for nested items. This column uses "col-4 col-md-6"
This is part of level 1.
More Nesting
Level 1: This column uses "col-md-12". To nest your content with the default grid, add a new .row and set of .col-sm-* columns within an existing .col-sm-* column. The background color is "bg-danger"
Level 2: This is part of a nested row. Nested rows should include a set of columns that add up to 12 or fewer (it is not required that you use all 12 available columns) This column uses "col-8 col-md-3" and the background color is "bg-info"
Level 2: This is also part of a nested row. Notice that it is inheriting the background color from level 1. This is the default behavior unless you specify a background-color. This column uses "col-4 col-md-6" and the "border:thin
solid grey;" is specified as an inline style.
Level 2: This is also part of a nested row. It is not required that you use all 12 columns for nested items. This column uses "col-4 col-md-6" the background-color is using "bg-light".
This is still part of level 1.
Images
Responsive Images (img-fluid)
Responsive images in Bootstrap are made responsive with img-fluid. The attributes max-width: 100%; and height: auto; are applied to the image so that it scales with the parent element.
This 200x200px image has "img-fluid" class applied. This image will scale with the parent element, col-md-3.
This 400x300px image has "img-fluid" class applied. This image will scale with the parent element, col-md-4.
This 800x400px image has "img-fluid" class applied. This image will scale with the parent element, col-md-2.
Image Thumbnails
200x200px image has "img-fluid" class and the parent element is col-md-2.
200x200px image has "img-fluid" class and the parent element is col-md-4. In addition to the border-radius utilities, you can use img-thumbnail to give an image a rounded 1px border appearance.
This 400x400px image has "img-fluid" class and the parent element is col-md-4.
Cards
A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options. Cards replace our old panels, wells, and thumbnails from Bootstrap
3. Similar functionality to those components is available as modifier classes for cards.
Cards assume no specific width to start, so they'll be 100% wide unless otherwise stated. You can change this as needed with custom CSS, grid classes, grid Sass mixins, or utilities.
Using the grid, wrap cards in columns and rows as needed. The following cards are wrapped in rows and columns:
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
If your images get distorted, wrap your cards in grids.
Card title
This card is wrapped within a row and column. This content is a little bit longer.
This is small text-muted.
Card title
This card is wrapped within a row and column. This content is a little bit longer.
This is small text-muted.
Image Overlays
Card title
This card is styled with "card card-inverse". This card is wrapped in a column. The image is styled with card-img img-fluid.
Card title
This card is styled with "card card-inverse". This card is wrapped in a column. The image is styled with card-img img-fluid.
Card Groups
In addition to styling the content within cards, Bootstrap includes a few options for laying out series of cards. For the time being, these layout options are not yet responsive. Use card groups to render cards as a single, attached element with equal
width and height columns. Card groups use display: flex; to achieve their uniform sizing.
Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Card title
This card has supporting text below as a natural lead-in to additional content.
Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.
Card Decks
Card decks are a set of equal width and height cards that aren't attached to one another.
Card title
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
This is a footer
Card title
This card has supporting text below as a natural lead-in to additional content.
This is a footer
Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.
This is a footer
This is Slide One
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam alias porro vitae quos repudiandae repellat iure explicabo, omnis modi excepturi odio eos natus, quae quia.
This is Slide Two
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam alias porro vitae quos repudiandae repellat iure explicabo, omnis modi excepturi odio eos natus, quae quia.
This is Slide Three
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam alias porro vitae quos repudiandae repellat iure explicabo, omnis modi excepturi odio eos natus, quae quia.
