1. Hello Guest!

    Thank you for visiting the ClubRunner Community website, you can login using your ClubRunner account information by clicking the login link on the top of every page.
    Dismiss Notice

Using Bootstrap in ClubRunner to build great websites

Discussion in 'Website Customization' started by Zach on Jul 5, 2017.

  1. Zach

    By:ZachJul 5, 2017
    Moderator
    ClubRunner Team

    Joined:
    Jun 5, 2017
    Messages:
    166
    Likes Received:
    19
    Gender:
    Male
    Occupation:
    Product Specialist
    Location:
    ClubRunner
    Using any of our Next-Gen themes, you can use bootstrap based code to enhance your ClubRunner website. In the following example you can setup a 3 column layout that will automatically collapse into a 3 stacked rows for a mobile device. This means that website will look great at any resolution.


    You can use the following code with Custom Global, or Page Specific widget.


    Once you are editing the widget, click on source button to enable the html editing mode, and paste the code as displayed below.

    HTML:
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-4 col-xs-12">
                <div>My First Column</div>
            </div>
    
            <div class="col-sm-4 col-xs-12">
                <div>My Second Column</div>
            </div>
    
            <div class="col-sm-4 col-xs-12">
                <div>My Third Column</div>
            </div>
       </div>
    </div>

    Once you hit source again, you can directly interact and modify the html content in the editor in ClubRunner.

    You can use the same code multiple time to create several rows.


    Have you been using any custom bootstrap code on your website? Let us know how it works out for you!
     
  2. Gareth Hunt

    By:Gareth HuntJul 26, 2017
    New Community Member

    Joined:
    Jul 26, 2017
    Messages:
    4
    Likes Received:
    4
    Location:
    Hope Island, QLD, Australia
    That's a great tip as I have been updating our website and having trouble with tables and how they are viewed on a mobile device. I'll check out if this will work for me !
     
  3. Zach

    By:ZachJul 26, 2017
    Moderator
    ClubRunner Team

    Joined:
    Jun 5, 2017
    Messages:
    166
    Likes Received:
    19
    Gender:
    Male
    Occupation:
    Product Specialist
    Location:
    ClubRunner
    Please do let us know how it goes. These are reasonably simple to workup, and are based on bootstrap grids. So long as you don't want to get too fancy I'm happy to help setup some basic grids/layouts :)
     
  4. Zach

    By:ZachJul 28, 2017
    Moderator
    ClubRunner Team

    Joined:
    Jun 5, 2017
    Messages:
    166
    Likes Received:
    19
    Gender:
    Male
    Occupation:
    Product Specialist
    Location:
    ClubRunner
    Just to share another example quickly, this is a bit more complex. 4 Columns, that collapse at different breakpoints:

    4 x 1 on Desktop
    2 x 2 on Larger Mobile devices / smaller desktop & laptop screens
    1 x 4 on small devices (mobile phones)

    HTML:
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-3 col-sm-6 col-xs-12">
                <div>My First Column</div>
            </div>
            <div class="col-md-3 col-sm-6 col-xs-12">
                <div>My Second Column</div>
            </div>
            <div class="col-md-3 col-sm-6 col-xs-12">
                <div>My Third Column</div>
            </div>
            <div class="col-md-3 col-sm-6 col-xs-12">
                <div>My fourth Column</div>
            </div>
       </div>
    </div>
    Just like my original post, you can repeat these blocks as often as required.

    Taken this to an example that has content in it, give this a try on your website as well:

    HTML:
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-3 col-sm-6 col-xs-12">
                <div>
                    <h2 style="text-align: center;">First Subject</h2>
                    <center> <img alt="" height="128" src="https://clubrunner.blob.core.windows.net/00000000001/Images/Info-128.png" style="border-style:solid; border-width:0px" width="128" /></center><br />
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et est augue. Nullam nec est orci. Morbi et nunc tincidunt, dignissim leo id, mattis urna. </p>
                    <center><a href="#" class="btn btn-primary">Click Me</a></center>
                </div>
            </div>
            <div class="col-md-3 col-sm-6 col-xs-12">
                <div>
                    <h2 style="text-align: center;">Second Subject</h2>
                    <center> <img alt="" height="128" src="https://clubrunner.blob.core.windows.net/00000000001/Images/Info-128.png" style="border-style:solid; border-width:0px" width="128" /></center><br />
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et est augue. Nullam nec est orci. Morbi et nunc tincidunt, dignissim leo id, mattis urna. </p>
                    <center><a href="#" class="btn btn-primary">Click Me</a></center>
                </div>
            </div>
            <div class="col-md-3 col-sm-6 col-xs-12">
                <div>
                    <h2 style="text-align: center;">Third Subject</h2>
                    <center> <img alt="" height="128" src="https://clubrunner.blob.core.windows.net/00000000001/Images/Info-128.png" style="border-style:solid; border-width:0px" width="128" /></center><br />
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et est augue. Nullam nec est orci. Morbi et nunc tincidunt, dignissim leo id, mattis urna. </p>
                    <center><a href="#" class="btn btn-primary">Click Me</a></center>
                </div>
            </div>
            <div class="col-md-3 col-sm-6 col-xs-12">
                <div>
                    <h2 style="text-align: center;">Fourth Subject</h2>
                    <center> <img alt="" height="128" src="https://clubrunner.blob.core.windows.net/00000000001/Images/Info-128.png" style="border-style:solid; border-width:0px" width="128" /></center><br />
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et est augue. Nullam nec est orci. Morbi et nunc tincidunt, dignissim leo id, mattis urna. </p>
                    <center><a href="#" class="btn btn-primary">Click Me</a></center>
                </div>
            </div>
       </div>
    </div>
    1 x 4.png 2x2.png 4x1.png
     
  5. John Walsh

    By:John WalshJan 16, 2018
    New Community Member

    Joined:
    Jan 14, 2018
    Messages:
    1
    Likes Received:
    0
    Location:
    Waltham, New Zealand
    Zach,
    The 4-column format folding to 2-column then 1-column on smaller screens works great for manually entered content. However, to avoid manual duplication, I would like to be able to drop selected Stories into the 4 columns (complete with READ MORE buttons) and have them fold as required - then a row of short teasers can be presented on wide screens, that fold down for smaller screens. Is there a way to do this without me having to re-enter each Story Brief into the Global Custom widget and link to the full story?
     
  6. Les Walsh

    By:Les WalshJan 16, 2018
    Community Member
    Beta Tester

    Joined:
    Oct 25, 2017
    Messages:
    11
    Likes Received:
    3
    Location:
    Caloundra, Qld, Australia
    Zach, this looks very similar to the inbuilt 3 column option for stories on the home page? It will be useful in other page contexts
     
  7. Zach

    By:ZachJan 17, 2018
    Moderator
    ClubRunner Team

    Joined:
    Jun 5, 2017
    Messages:
    166
    Likes Received:
    19
    Gender:
    Male
    Occupation:
    Product Specialist
    Location:
    ClubRunner
    We have a column based layout for stories in the Stories widget as seen below:
    upload_2018-1-17_9-17-57.png

    But there isn't a way to put stories into that sort of layout otherwise. We just wanted to give a few examples to get people started with bootstrap html. From time to time I see things on Club sites or have people ask while providing support, we'll share additional examples. That is why I created this topic in the first place, we had a customer asking how they could make their content look better on mobile, so I shared this example for everyone since it only takes a few min to get it setup. We may not always be able to provide a functional example, but we'll do our best to point to the docs.

    We do make use of bootstrap for our built in layouts/etc. Now that we retired our older themes, we can start to take more advantage of bootstrap features like this elsewhere in ClubRunner.
     
Top