MemberGate supports the use of the Bootstrap framework on all pages of your site. Bootstrap is an open source framework created for responsive design using styles that everyone can share.
That is all just fancy jargon to say that helpers have created existing styles for you to use on your pages so that they are responsive and pretty.
Instead of using tables which get squished on a smaller device, Bootstrap has built in styles that allow a table type grid to wrap on smaller devices.
Bootstrap is created through CSS HTML and Javascripts and all of the appropriate libraries to make it work are already included on your pages.
The bootstrap library includes 'template' like html for you to add to your pages and then customize with your text.
More information and the html to copy and paste onto your pages can be found at the Bootstrap Getting Started Introduction Guide. Clicking on the links in the left sidebar will provide more details about individual bootstrap components.
This sounds complicated, but rest-assured even you can use some of the most basic bootstrap templates to add to your pages.
The trick in MemberGate is to click on the <> icon in the WYSIWYG editor to add the code to the page using the text editor and not the rich text editor.
We are going to try and provide some of the basic components of bootstrap for you to use on your sites. Hopefully, it will just be a matter of clicking on text and adding your own.
A Really Basic Grid Example
The Code
The below is the code that had been used for the above grid of images. To use, copy the code and paste onto your page. Upload images to placeholder 2, 3 and 4.
<div class="container-fluid"> <div class="row"> <div class="col-md">|image2|</div> <div class="col-md">|image3|</div> <div class="col-md">|image4|</div> </div> </div>