Supporting each other

Community forums

Welcome, Guest
Username: Password: Remember me
This is the place for questions about learning design and pedagogy; how to use different page types for different purposes.
  • Page:
  • 1

TOPIC:

Creating columns 8 years 1 week ago #4159

  • SetaJackson
  • SetaJackson's Avatar Topic Author
  • Offline
  • New Member
  • New Member
  • Posts: 4
  • Thank you received: 0
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.

Creating columns 8 years 1 week ago #4160

  • ronm
  • ronm's Avatar
  • Offline
  • Administrator
  • Administrator
  • Posts: 855
  • Thank you received: 264
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.
<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.

Creating columns 8 years 2 days ago #4169

  • Neil Pollock
  • Neil Pollock's Avatar
  • Offline
  • Premium Member
  • Premium Member
  • Posts: 92
  • Thank you received: 4
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:
article {
	-webkit-columns: 3 250px;
	-moz-columns: 3 250px;
	columns: 3 250px;
}

Your HTML would then simply be:
<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.

  • Page:
  • 1
Moderators: ingdon
Time to create page: 0.046 seconds
Copyright © 2024 The Xerte Project.
Xerte logo Apereo logo OSI Logo

Search