Collapsible Ribbon Collection
ResourceParadox
- Created
- 10 months, 26 days ago
- Creator
- ResourceParadox
- Favorites
- 375
Profile
BASED ON THIS RESOURCE: https://toyhou.se/4739396.-ribbons
May be mostly for my own convenience/preference but sharing anyway!
Code boxes automatically select-all when you click somewhere inside the text
Note: If you want more than one separate collapsing thing on the same profile you MUST rename the link reference and id from "topcollapse" to something else (and make sure they are the same within the same collapse). I usually just use "topcollapse2" and so on.
The code:
To make the button solid, just remove the "outline-" part
The code:
May be mostly for my own convenience/preference but sharing anyway!
Code boxes automatically select-all when you click somewhere inside the text
Note: If you want more than one separate collapsing thing on the same profile you MUST rename the link reference and id from "topcollapse" to something else (and make sure they are the same within the same collapse). I usually just use "topcollapse2" and so on.
Ribbon 1
Ribbon Description
Ribbon 2
Ribbon Description
Ribbon 3
Ribbon Description
Ribbon 4
Ribbon Description
The code:
<!-----------------Ribbon Collection--------------------> <!--- snippet code from https://toyhou.se/4739396.-ribbons/18420772.muse-s-code-snippets --> <div style="text-align:center"><a href="#topcollapse" data-toggle="collapse"><div class="btn btn-outline-primary"> Show Ribbon Collection </div> </a><br>May have bright colors</div> <hr class="m-1" style="border-color:faded;"> <div id="topcollapse" class="collapse"> <!------------------ THE RIBBONS -------------------> <div class="container"> <div class="row"> <!--------------- Column 1---------------> <div class="col" style="padding:10px;"> <div class="card-block rounded bg-faded text-left" style="white-space:normal;"> <div align="center"> <div class="row"><img src="https://i.imgur.com/h5voMnX.png" class="fr-fic fr-dib" width="43" height="62"></div> <p align="center" style="text-align: center;"><strong> Ribbon 1</strong> <br>Ribbon Description</p> </div> </div> </div> <!--------------- Column 2---------------> <div class="col" style="padding:10px;"> <div class="card-block rounded bg-faded text-left" style="white-space:normal;"> <div align="center"> <div class="row"><img src="https://i.imgur.com/h5voMnX.png" class="fr-fic fr-dib" width="43" height="62"></div> <p align="center" style="text-align: center;"><strong> Ribbon 2</strong> <br>Ribbon Description</p> </div> </div> </div> <!--------------- Column 3---------------> <div class="col" style="padding:10px;"> <div class="card-block rounded bg-faded text-left" style="white-space:normal;"> <div align="center"> <div class="row"><img src="https://i.imgur.com/h5voMnX.png" class="fr-fic fr-dib" width="43" height="62"></div> <p align="center" style="text-align: center;"><strong> Ribbon 3</strong> <br>Ribbon Description</p> </div> </div> </div> <!--------------- Column 4---------------> <div class="col" style="padding:10px;"> <div class="card-block rounded bg-faded text-left" style="white-space:normal;"> <div align="center"> <div class="row"><img src="https://i.imgur.com/h5voMnX.png" class="fr-fic fr-dib" width="43" height="62"></div> <p align="center" style="text-align: center;"><strong> Ribbon 4</strong> <br>Ribbon Description</p> </div> </div> </div> <!--------------- end of columns---------------> </div> </div> <hr class="m-1" style="border-color:faded;"> </div> <!-----------------End of Ribbon Collection-------------------->
To make the button solid, just remove the "outline-" part
10-Ribbon Code that line-breaks after the 5th column (only on large devices)
Ribbon 1
Ribbon Description
Ribbon 2
Ribbon Description
Ribbon 3
Ribbon Description
Ribbon 4
Ribbon Description
Ribbon 5
Ribbon Description
Ribbon 6
Ribbon Description
Ribbon 7
Ribbon Description
Ribbon 8
Ribbon Description
Ribbon 9
Ribbon Description
Ribbon 10
Ribbon Description
The code:
<!-----------------Ribbon Collection--------------------> <!--- snippet code from https://toyhou.se/4739396.-ribbons/18420772.muse-s-code-snippets --> <div style="text-align:center"><a href="#topcollapse" data-toggle="collapse"><div class="btn btn-outline-primary"> Show Ribbon Collection </div> </a><br>May have bright colors</div> <hr class="m-1" style="border-color:faded;"> <div id="topcollapse" class="collapse"> <!------------------ THE RIBBONS -------------------> <div class="container"> <div class="row"> <!--------------- Column 1---------------> <div class="col" style="padding:10px;"> <div class="card-block rounded bg-faded text-left" style="white-space:normal;"> <div align="center"> <div class="row"><img src="https://i.imgur.com/h5voMnX.png" class="fr-fic fr-dib" width="43" height="62"></div> <p align="center" style="text-align: center;"><strong> Ribbon 1</strong> <br>Ribbon Description</p> </div> </div> </div> <!--------------- Column 2---------------> <div class="col" style="padding:10px;"> <div class="card-block rounded bg-faded text-left" style="white-space:normal;"> <div align="center"> <div class="row"><img src="https://i.imgur.com/h5voMnX.png" class="fr-fic fr-dib" width="43" height="62"></div> <p align="center" style="text-align: center;"><strong> Ribbon 2</strong> <br>Ribbon Description</p> </div> </div> </div> <!--------------- Column 3---------------> <div class="col" style="padding:10px;"> <div class="card-block rounded bg-faded text-left" style="white-space:normal;"> <div align="center"> <div class="row"><img src="https://i.imgur.com/h5voMnX.png" class="fr-fic fr-dib" width="43" height="62"></div> <p align="center" style="text-align: center;"><strong> Ribbon 3</strong> <br>Ribbon Description</p> </div> </div> </div> <!--------------- Column 4---------------> <div class="col" style="padding:10px;"> <div class="card-block rounded bg-faded text-left" style="white-space:normal;"> <div align="center"> <div class="row"><img src="https://i.imgur.com/h5voMnX.png" class="fr-fic fr-dib" width="43" height="62"></div> <p align="center" style="text-align: center;"><strong> Ribbon 4</strong> <br>Ribbon Description</p> </div> </div> </div> <!--------------- Column 5---------------> <div class="col" style="padding:10px;"> <div class="card-block rounded bg-faded text-left" style="white-space:normal;"> <div align="center"> <div class="row"><img src="https://i.imgur.com/h5voMnX.png" class="fr-fic fr-dib" width="43" height="62"></div> <p align="center" style="text-align: center;"><strong> Ribbon 5</strong> <br>Ribbon Description</p> </div> </div> </div> <!-- Force next columns to break to new line at md breakpoint and up --> <div class="w-100 d-none d-md-block"></div> <!--------------- Column 6---------------> <div class="col" style="padding:10px;"> <div class="card-block rounded bg-faded text-left" style="white-space:normal;"> <div align="center"> <div class="row"><img src="https://i.imgur.com/h5voMnX.png" class="fr-fic fr-dib" width="43" height="62"></div> <p align="center" style="text-align: center;"><strong> Ribbon 6</strong> <br>Ribbon Description</p> </div> </div> </div> <!--------------- Column 7---------------> <div class="col" style="padding:10px;"> <div class="card-block rounded bg-faded text-left" style="white-space:normal;"> <div align="center"> <div class="row"><img src="https://i.imgur.com/h5voMnX.png" class="fr-fic fr-dib" width="43" height="62"></div> <p align="center" style="text-align: center;"><strong> Ribbon 7</strong> <br>Ribbon Description</p> </div> </div> </div> <!--------------- Column 8---------------> <div class="col" style="padding:10px;"> <div class="card-block rounded bg-faded text-left" style="white-space:normal;"> <div align="center"> <div class="row"><img src="https://i.imgur.com/h5voMnX.png" class="fr-fic fr-dib" width="43" height="62"></div> <p align="center" style="text-align: center;"><strong> Ribbon 8</strong> <br>Ribbon Description</p> </div> </div> </div> <!--------------- Column 9---------------> <div class="col" style="padding:10px;"> <div class="card-block rounded bg-faded text-left" style="white-space:normal;"> <div align="center"> <div class="row"><img src="https://i.imgur.com/h5voMnX.png" class="fr-fic fr-dib" width="43" height="62"></div> <p align="center" style="text-align: center;"><strong> Ribbon 9</strong> <br>Ribbon Description</p> </div> </div> </div> <!--------------- Column 10---------------> <div class="col" style="padding:10px;"> <div class="card-block rounded bg-faded text-left" style="white-space:normal;"> <div align="center"> <div class="row"><img src="https://i.imgur.com/h5voMnX.png" class="fr-fic fr-dib" width="43" height="62"></div> <p align="center" style="text-align: center;"><strong> Ribbon 10</strong> <br>Ribbon Description</p> </div> </div> </div> <!----- end of columns -----> </div> </div> <hr class="m-1" style="border-color:faded;"> </div> <!-----------------End of Ribbon Collection-------------------->
Recent Images
No images.