Grids and Tables

Bootstrap Grid System

.col-md-2
.col-md-2
.col-md-2
.col-md-2
.col-md-2
.col-md-2
.col-md-8
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-6
.col-md-6

Tables

Table 1 : Responsive

Title Credit Completed
Publication

Optimal Tilts: Combining Persistent Characteristic Portfolios

Edit | Delete
2.00 CE
1.00 SER
22 Jul 2017
Webcast/Podcast

Editor's Insights on Publishing in the CFA Institute Financial Analysts Journal

Edit | Delete
4.00 CE
2.00 SER
12 Apr 2017
Article

Global Equity Country Allocation: An Application of Factor Investing

Edit | Delete
4.00 CE 08 Mar 2017
Publication

Optimal Tilts: Combining Persistent Characteristic Portfolios

Edit | Delete
2.00 CE
1.00 SER
22 Jul 2017

Table 2: Non Responsive

Question Answer
Who is it for? Portfolio and wealth managers, investment and research analysts, professionals involved in the investment decision-making process, and finance students who want to work in the investment management profession.
How long does it take? Approximately 4 years to complete 3 exams (Level I, II, and III)

Documentation

Grid

  • Place rows within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding
  • Use rows to create horizontal groups of columns
  • Place content within columns
    • Only columns can be immediate children of rows
    • Columns create gutters (gaps between column content) via CSS padding:. That padding is offset in rows for the first and last column via a negative margin on a .row
  • Specify the number to span (of twelve available columns) in order to create grid columns. For example, for three equal columns, use three .col-xs-4
    • Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices
    • So applying any .col-md- class to an element affects the styling on medium devices, as well as on large devices if a .col-lg- class is not present
  • Create fully fluid layouts (meaning the website stretches the entire width of the viewport)
    • To do this, wrap grid content in a container element with padding: 0 15px; to offset the margin: 0 -15px; on a .row
  • Use a single set of .col-md-* grid classes to create a basic grid system that starts out stacked on mobile and tablet devices (the extra small to small range). It then becomes horizontal on desktop (medium) devices. Place grid columns in any .row.

Table

Table 1 uses class "adjust-for-mobile" and data-label attributes on td elements to convert column headers into row headers for mobile. The delete link uses a JavaScript Library called popconfirm to display a popup for confirming user action.
Table 2 will be created by content authors in the rich text editor.