This is the place for questions about learning design and pedagogy; how to use different page types for different purposes.

Creating columns

SetaJackson
Topic Author
Offline
New Member

9 years 7 months ago #4159 by SetaJackson

Creating columns was created by SetaJackson

How does one go about creating columns in a text page in the bootstrap template, as illustrated at www.nottingham.ac.uk/toolkits/play_8222#page4section5 ?

Please Log in or Create an account to join the conversation.

ronm
Offline
Administrator

9 years 7 months ago #4160 by ronm

Replied by ronm on topic Creating columns

At the moment there isn't a wizard for that but you can switch to source view in a text box, add relevant Bootstrap code then click the 'show blocks' button in the toolbar so that you can edit content in the wysiwyg view but still see where the divs start and end etc.

Try copying and pasting the following in source view then follow the steps I listed above.

Code:

<div class="row-fluid">&nbsp;
  <div class="span3">
    <br />
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
  &nbsp;
  <div class="span3">
    <br />
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
  &nbsp;
  <div class="span3">
    <br />
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
</div>

Xerte developer & trainer
e-learning & m-learning consultant
mitchellmedia.co.uk | xerteacademy.com | learningapps.co.uk
Note: Support here is voluntary and meant for users to support each other.
Need direct commercial support with Xerte? mitchellmedia.co.uk/contact/

The following user(s) said Thank You: SetaJackson

Please Log in or Create an account to join the conversation.

Neil Pollock
Offline
Premium Member

9 years 7 months ago #4169 by Neil Pollock

Replied by Neil Pollock on topic Creating columns

I've used columns on this bootstrap page: xerte.cardiff.ac.uk/play_4069

I just used the <article></article> tags. You can then use the columns property to define the number and size of your columns. For example:

Code:

article {
	-webkit-columns: 3 250px;
	-moz-columns: 3 250px;
	columns: 3 250px;
}

Your HTML would then simply be:

Code:

<article>
...your text here...
</article>

The good thing about this it that it's responsive.

Here is a useful overview: css-tricks.com/guide-responsive-friendly-css-columns/

The following user(s) said Thank You: SetaJackson

Please Log in or Create an account to join the conversation.

Moderators: ingdon

Time to create page: 0.200 seconds

Creating columns

Main Pages

Quick Links

Support

External resources