Page Layout & Column Concept
The MPI Global and Chapter website templates within the Sitefinity CMS
use a coding tool kit, or
framework, called Bootstrap.
Bootstrap is one of the most popular frameworks for developing
mobile-friendly, or responsive, websites. A responsive website automatically
adjusts for different screen sizes. Bootstrap's grid
system is responsive, and the columns will re-arrange depending on the screen
size. For example, on a big screen it might look better with the content
organized in three columns, but on a small screen it would be better if the
content items were stacked on top of each other.
Bootstrap's
grid system is made up of 12 columns across the page. Columns can be grouped together
to create wider columns. Grouped columns can be used in many different
configurations, but the groups must always add up to 12.
For
example, you can have 2 groups of 3 columns each next to a group of 6 columns.
3+3 is 6, plus another 6 equals 12.
Related Articles
Creating Columns Using Grid Widgets
You will most likely need a page that has content separated into columns. You don’t have to create the column layout on the page before adding Content widgets, but it does help if you already have a design in mind. Here is an example of columns ...
Grid Widgets
If this seems a bit complicated, don’t worry, the grouping of columns is already done for you within Sitefinity using the different Grid widgets you’ll find in the Layout view of the Page editor. All you have to do is drag them onto the page – no ...
Adding Content Using Content Widgets
Content widgets are the main tools of the Sitefinity CMS. They are what control the content shown on a page. After you create a page and go into editing mode, you will be in the Content view by default. You will see a single large area to the ...
Content Widget Overview and Properties
All content and functionality of the Sitefinity CMS pages are defined through widgets. Widgets are controls which you drag and drop onto the page in content editing mode, then configure to display content. Anything you want your page to do is done ...
Creating and Building Forms
Create the Form In the Title input field, enter the name of the form. Do not change the Name used in code (for developers) Do not change anything under Advanced. “MVC only” is selected by default. This is the option that must always be selected. ...