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:
    592
    Likes Received:
    80
    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:
    5
    Likes Received:
    6
    Location:
    Human Resources
    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:
    592
    Likes Received:
    80
    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:
    592
    Likes Received:
    80
    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:
    4
    Likes Received:
    3
    Location:
    Infrastructure Services, retired
    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?
     
    Bob Spencer and Lynne Goodwin like this.
  6. Les Walsh

    By:Les WalshJan 16, 2018
    Active Community Member
    Beta Tester

    Joined:
    Oct 25, 2017
    Messages:
    68
    Likes Received:
    20
    Location:
    Financial Planning
    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:
    592
    Likes Received:
    80
    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.
     
  8. Lynne Goodwin

    By:Lynne GoodwinFeb 26, 2018
    New Community Member

    Joined:
    Feb 26, 2018
    Messages:
    1
    Likes Received:
    1
    Location:
    Chilliwack, BC, Canada
    This is so helpful!
    Thank you!
     
    Zach likes this.
  9. Les Walsh

    By:Les WalshMar 8, 2018
    Active Community Member
    Beta Tester

    Joined:
    Oct 25, 2017
    Messages:
    68
    Likes Received:
    20
    Location:
    Financial Planning
    Using the bootstrap code works well on the website BUT the button disappears in Bulletins using the Stories or News widgets. The button is replaced by a simple link instead. The button is visible when previewing the bulletin in the Bulletin 3 editor BUT NOT in the preview prior to sending, NOR is it visible on the website version or in the emailed version (word). Interestingly, the button is visible in the New Bulletin (Beta) editor's Design tab but not in the Preview tab.

    I have created a TEST bulletin to illustrate: http://rotaryclubcaloundra.com.au/bulletin/View/e877db50-1dba-485d-86c8-7f8a62a524ea
     
  10. Zach

    By:ZachMar 8, 2018
    Moderator
    ClubRunner Team

    Joined:
    Jun 5, 2017
    Messages:
    592
    Likes Received:
    80
    Gender:
    Male
    Occupation:
    Product Specialist
    Location:
    ClubRunner
    Hello Les,

    Bulletins do not support complex html in email clients, we cannot load any javascript or any complex css libraries that would enable bootstrap to work. The class codes for the buttons in the bulletin are different than the buttons for the website.

    The button is likely visible in the preview page as we have that class available within all of the ClubRunner pages.

    I would not recommend using the bootstrap code in your Bulletins at all for a multitude of reasons.
     
  11. Les Walsh

    By:Les WalshMar 8, 2018
    Active Community Member
    Beta Tester

    Joined:
    Oct 25, 2017
    Messages:
    68
    Likes Received:
    20
    Location:
    Financial Planning
    Thanks - that makes it a bit difficult to use website stories in the bulletin.
     
  12. Zach

    By:ZachMar 23, 2018
    Moderator
    ClubRunner Team

    Joined:
    Jun 5, 2017
    Messages:
    592
    Likes Received:
    80
    Gender:
    Male
    Occupation:
    Product Specialist
    Location:
    ClubRunner
    This is true, for stories we do recommend sticking to more straight forward content, at least in the preview. If you make a point to keep the preview with less complex html, but the content section has the advanced html. You can configure it so that the Bulletin only shows the brief, which means that it should look good consistently.

    Let me know if that works out for you, or if you run into any issues.
     
  13. Les Walsh

    By:Les WalshMar 23, 2018
    Active Community Member
    Beta Tester

    Joined:
    Oct 25, 2017
    Messages:
    68
    Likes Received:
    20
    Location:
    Financial Planning
    Yes I can see that - but if you have a short 'brief' with a link to another page or external site - like this http://rotaryclubcaloundra.com.au/Stories/your-latest-news-from-australian-rotary-health-5 - its nice to have a button.
     
  14. Les Walsh

    By:Les WalshMar 26, 2018
    Active Community Member
    Beta Tester

    Joined:
    Oct 25, 2017
    Messages:
    68
    Likes Received:
    20
    Location:
    Financial Planning
    Zach, what is the best way to develop Bootstrap code for use on the website?
     
  15. Zach

    By:ZachMar 27, 2018
    Moderator
    ClubRunner Team

    Joined:
    Jun 5, 2017
    Messages:
    592
    Likes Received:
    80
    Gender:
    Male
    Occupation:
    Product Specialist
    Location:
    ClubRunner
    That is fair, I don't think we use any button classes right now, but I'll bring it up with the product team.
    I think this is reasonably hard for me to answer directly. But if you're familiar with html and you understand how the bootstrap classes work and function together you can really just start writing code. I use something light weight like visual studio code to edit and work with html and normally I also have at least one addon for VSCode called Beautify (it will take any old html and pretty it up for better understanding). From there i can write my html/css/javascript copy it to my clipboard and paste it into ClubRunner. I normally work on a custom page with a standard custom widget and work it until I am happy with it.

    The bootstrap docs are a great place to get started on bootstrap: https://bootstrapdocs.com/v3.3.6/docs/
    Sites like W3 Schools are good places to get started learning html/css: https://www.w3schools.com
     
  16. Les Walsh

    By:Les WalshMar 27, 2018
    Active Community Member
    Beta Tester

    Joined:
    Oct 25, 2017
    Messages:
    68
    Likes Received:
    20
    Location:
    Financial Planning
    Thank you Zach, that's a good reply
     
    Zach likes this.
  17. Anita Graham

    By:Anita GrahamAug 9, 2018
    Community Member

    Joined:
    Sep 6, 2017
    Messages:
    42
    Likes Received:
    12
    Location:
    Computer Networking
    Just double checking about using js in clubrunner. Good to see that it can be done. I am just trying to add a "Book Now" button from a separate events website.
    Like this
    "
    <script async defer src="https://www.trybooking.com/widget.js"></script>

    <div class="tryb-widget" data-type="landingPageEmbed" data-eid="409810"></div>
    "
    I can see potential for cross-site blocking to go on here, so perhaps I shouldn't expect it to work.

    Also, this forum might benefit from being markdown friendly.
     
    Last edited by a moderator: Aug 9, 2018
  18. Anita Graham

    By:Anita GrahamSep 6, 2018
    Community Member

    Joined:
    Sep 6, 2017
    Messages:
    42
    Likes Received:
    12
    Location:
    Computer Networking
    Worked perfectly once I got it right.
     
  19. Zach

    By:ZachSep 6, 2018
    Moderator
    ClubRunner Team

    Joined:
    Jun 5, 2017
    Messages:
    592
    Likes Received:
    80
    Gender:
    Male
    Occupation:
    Product Specialist
    Location:
    ClubRunner
    I'm glad to hear you got it working, what ended up being the issue?
     
  20. Richard Stephen

    By:Richard StephenSep 4, 2020
    Community Member

    Joined:
    Feb 25, 2019
    Messages:
    16
    Likes Received:
    6
    Gender:
    Male
    Location:
    Telecom. Engineering
    Zach,

    Another question - how do I over ride the CR default bootstrap element panel-footer top & bottom margin or padding values without using a custom css file ?

    I'm experimenting with the bootstrap panels in the widgets. I have this code which works fine

    <div class="panel-footer text-center" style="background-color:#17458F;">
    <h5 style="color:#FFFFFF; ">text block</h5>
    </div>

    The issue is with reduced text size (h5), there is a lot blank space top and bottom.
    I cannot find a way to change this. I dont want to use custom css because of issues of maintainability in the future.
     
Top