> For the complete documentation index, see [llms.txt](https://docs.buidlbuidl.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.buidlbuidl.com/btcpayserver/customize-design/custom-crowdfunding-css-html.md).

# Custom bootstrap theme

## HTML

```
<!DOCTYPE html>
<html class="h-100">
<head>
    <title>Test campagne</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <link href="/main/bootstrap/bootstrap.css" rel="stylesheet" />
    <link href="/main/themes/default.css" rel="stylesheet" />
        <script type="text/javascript">
            var srvModel = {"hubPath":"/apps/hub","storeId":"6qxoxSsEVYYhFZzUcmGjc2Ko9ratMJxFPKQsSCeEpLti","appId":"3hg5hpvwfsf1FdQL8dMU44xUQQZe","title":"Test campagne","description":"\u003cp\u003ex\u003c/p\u003e","mainImageUrl":null,"embeddedCSS":null,"customCSSLink":null,"startDate":null,"endDate":null,"targetCurrency":"BTC","targetAmount":1.0,"enforceTargetAmount":false,"info":{"totalContributors":0,"currentPendingAmount":0.0,"currentAmount":0.0,"progressPercentage":0.0,"pendingProgressPercentage":0.0,"lastUpdated":"2021-08-16T11:01:36.6323174+00:00","paymentStats":{},"pendingPaymentStats":{},"lastResetDate":null,"nextResetDate":null},"tagline":"Dit is een test campagne om de css te customizen","perks":[],"disqusEnabled":false,"soundsEnabled":true,"disqusShortname":null,"animationsEnabled":true,"animationColors":["#FF6138","#FFBE53","#2980B9","#282741"],"sounds":["//github.com/ClaudiuHKS/AdvancedQuakeSounds/raw/master/sound/QuakeSounds/dominating.wav","//github.com/ClaudiuHKS/AdvancedQuakeSounds/raw/master/sound/QuakeSounds/doublekill.wav","//github.com/ClaudiuHKS/AdvancedQuakeSounds/raw/master/sound/QuakeSounds/doublekill2.wav","//github.com/ClaudiuHKS/AdvancedQuakeSounds/raw/master/sound/QuakeSounds/eagleeye.wav","//github.com/ClaudiuHKS/AdvancedQuakeSounds/raw/master/sound/QuakeSounds/firstblood.wav","//github.com/ClaudiuHKS/AdvancedQuakeSounds/raw/master/sound/QuakeSounds/firstblood2.wav","//github.com/ClaudiuHKS/AdvancedQuakeSounds/raw/master/sound/QuakeSounds/firstblood3.wav","//github.com/ClaudiuHKS/AdvancedQuakeSounds/raw/master/sound/QuakeSounds/flawless.wav","//github.com/ClaudiuHKS/AdvancedQuakeSounds/raw/master/sound/QuakeSounds/godlike.wav","//github.com/ClaudiuHKS/AdvancedQuakeSounds/raw/master/sound/QuakeSounds/hattrick.wav","//github.com/ClaudiuHKS/AdvancedQuakeSounds/raw/master/sound/QuakeSounds/headhunter.wav","//github.com/ClaudiuHKS/AdvancedQuakeSounds/raw/master/sound/QuakeSounds/headshot.wav","//github.com/ClaudiuHKS/AdvancedQuakeSounds/raw/master/sound/QuakeSounds/headshot2.wav","//github.com/ClaudiuHKS/AdvancedQuakeSounds/raw/master/sound/QuakeSounds/headshot3.wav","//github.com/ClaudiuHKS/AdvancedQuakeSounds/raw/master/sound/QuakeSounds/holyshit.wav","//github.com/ClaudiuHKS/AdvancedQuakeSounds/raw/master/sound/QuakeSounds/killingspree.wav","//github.com/ClaudiuHKS/AdvancedQuakeSounds/raw/master/sound/QuakeSounds/knife.wav","//github.com/ClaudiuHKS/AdvancedQuakeSounds/raw/master/sound/QuakeSounds/knife2.wav","//github.com/ClaudiuHKS/AdvancedQuakeSounds/raw/master/sound/QuakeSounds/knife3.wav","//github.com/ClaudiuHKS/AdvancedQuakeSounds/raw/master/sound/QuakeSounds/ludicrouskill.wav","//github.com/ClaudiuHKS/AdvancedQuakeSounds/raw/master/sound/QuakeSounds/megakill.wav","//github.com/ClaudiuHKS/AdvancedQuakeSounds/raw/master/sound/QuakeSounds/monsterkill.wav","//github.com/ClaudiuHKS/AdvancedQuakeSounds/raw/master/sound/QuakeSounds/multikill.wav","//github.com/ClaudiuHKS/AdvancedQuakeSounds/raw/master/sound/QuakeSounds/nade.wav","//github.com/ClaudiuHKS/AdvancedQuakeSounds/raw/master/sound/QuakeSounds/ownage.wav","//github.com/ClaudiuHKS/AdvancedQuakeSounds/raw/master/sound/QuakeSounds/payback.wav","//github.com/ClaudiuHKS/AdvancedQuakeSounds/raw/master/sound/QuakeSounds/prepare.wav","//github.com/ClaudiuHKS/AdvancedQuakeSounds/raw/master/sound/QuakeSounds/prepare2.wav","//github.com/ClaudiuHKS/AdvancedQuakeSounds/raw/master/sound/QuakeSounds/prepare3.wav","//github.com/ClaudiuHKS/AdvancedQuakeSounds/raw/master/sound/QuakeSounds/prepare4.wav","//github.com/ClaudiuHKS/AdvancedQuakeSounds/raw/master/sound/QuakeSounds/rampage.wav","//github.com/ClaudiuHKS/AdvancedQuakeSounds/raw/master/sound/QuakeSounds/suicide.wav","//github.com/ClaudiuHKS/AdvancedQuakeSounds/raw/master/sound/QuakeSounds/suicide2.wav","//github.com/ClaudiuHKS/AdvancedQuakeSounds/raw/master/sound/QuakeSounds/suicide3.wav","//github.com/ClaudiuHKS/AdvancedQuakeSounds/raw/master/sound/QuakeSounds/suicide4.wav","//github.com/ClaudiuHKS/AdvancedQuakeSounds/raw/master/sound/QuakeSounds/teamkiller.wav","//github.com/ClaudiuHKS/AdvancedQuakeSounds/raw/master/sound/QuakeSounds/triplekill.wav","//github.com/ClaudiuHKS/AdvancedQuakeSounds/raw/master/sound/QuakeSounds/ultrakill.wav","//github.com/ClaudiuHKS/AdvancedQuakeSounds/raw/master/sound/QuakeSounds/unstoppable.wav","//github.com/ClaudiuHKS/AdvancedQuakeSounds/raw/master/sound/QuakeSounds/whickedsick.wav"],"resetEveryAmount":1,"neverReset":true,"perkCount":{},"currencyData":{"name":"Bitcoin","code":"BTC","divisibility":8,"symbol":"₿","crypto":true},"started":true,"ended":false,"displayPerksRanking":false,"enabled":false,"resetEvery":"Never","currencyDataPayments":{}};
        </script>
        <script src="/bundles/crowdfund-bundle-1.min.js?v=YGHDqgSHpQFWK-pyIy9K9vWf7GZOMVz2SoevYsF1oM8" type="text/javascript"></script>

        <script src="/bundles/crowdfund-bundle-2.min.js?v=4iQZ6BVL4qNKlQ27TExEhBN1HFPvAvAMbFavKKosSWQ" type="text/javascript"></script>

        <script src="/modal/btcpay.js?v=-jwSqeaMb-Bb9vOfh37-sXz_fwgLvuAc3IMcu0fR_rk"></script>

    <link href="/bundles/crowdfund-bundle.min.css?v=7Fo3ezTq_XJ1jiZoVlYmRhM1_nmX8W4EWYnnTuwK9Oc" rel="stylesheet" />


</head>
<body>
        <noscript>
            

<div class="container p-0">
    <div class="row h-100 w-100 py-sm-0 py-md-4 mx-0">
        <div class="card w-100 p-0 mx-0">
            <div class="d-flex justify-content-between px-2">
                <h1>
                    Test campagne
                        <span class="h6 text-muted" :title="startDate" title="No set end date">
                            Currently Active!
                        </span>

                </h1>
                    <span class="mt-3">
                        <span class="h5">1.0 BTC</span>
                            <span >Softcap Goal <span class="fa fa-question-circle" ></span> </span>
                    </span>

            </div>
            
                <div class="progress w-100 rounded-0 " >
                    <div class="progress-bar" role="progressbar"
                         style="width:0%"
                         aria-valuemax="100">
                    </div>
                    <div class="progress-bar bg-warning" role="progressbar"
                         style="width:0%"
                         aria-valuemin="0"
                         aria-valuemax="100">
                    </div>
                </div>

            <div class="card-body">


                <div class="row py-2 text-center">
                    <div class="col-sm border-right" id="raised-amount">
                        <h5>0 BTC </h5>
                        <h5 class="text-muted">Raised</h5>
                    </div>
                    <div class="col-sm  border-right">
                        <h5>0%</h5>
                        <h5 class="text-muted">Of Goal</h5>
                    </div>
                    <div class="col-sm  text-right">
                        <h5>
                            0
                        </h5>
                        <h5 class="text-muted">Contributors</h5>
                    </div>
                </div>


                <div class="card-title">

                    <div class="row">
                        <div class="col-sm-12 ">
                            <h2 class="text-muted" >Dit is een test campagne om de css te customizen</h2>
                        </div>
                    </div>
                </div>
               
                    <hr/>
                    <div class="row">
                        <div class="col-md-8 col-sm-12">
                            <div class="card-text overflow-hidden"><p>x</p></div>
                        </div>
                        <div class="col-md-4 col-sm-12">
                            
<form method="post">
    <div class="form-group">
        <label for="Email">Email</label>
        <input type="email" class="form-control" id="Email" name="Email" value="" />
        <span class="text-danger field-validation-valid" data-valmsg-for="Email" data-valmsg-replace="true"></span>
    </div>   
    <div class="form-group">
        <label for="Amount">Amount</label>
    <div class="input-group mb-3">
        <input type="number" step="any" class="form-control" data-val="true" data-val-number="The field Amount must be a number." data-val-required="The Amount field is required." id="Amount" name="Amount" value="0" />
        <div class="input-group-append">
            <span class="input-group-text">BTC</span>
        </div>
    </div>
        <span class="text-danger field-validation-valid" data-valmsg-for="Amount" data-valmsg-replace="true"></span>
    </div>   
    <input type="hidden" data-val="true" data-val-required="The RedirectToCheckout field is required." id="RedirectToCheckout" name="RedirectToCheckout" value="True" />
        <button type="submit" class="btn btn-primary" >Contribute</button>
<input name="__RequestVerificationToken" type="hidden" value="CfDJ8FVBzGaFMyhKq7rebVyNGD8SFi6X2ugdAfpBFwrt0C4YmdZJXbGo7WSh6QqKGXuHETpoegGvpRDbBH-e2p-tpT_DEEs2SkUGrAP3fS5-tvINFNqMwNZFt7K6soPIJJqcVBtpO-RPEDBoejQdiJ8GwUFTbWXIOdesSLESoDA__IJjJQMrLajanuCdLSz1ljgooA" /></form>
</partial>
                        </div>
                    </div>
            </div>
            <div class="card-footer text-muted d-flex" >

                <div class="align-self-end pr-4">Updated 08/16/2021 11:01:36</div>
            </div>
        </div>
    </div>
</div>


            <style>
                /* Hide the below canvas or else user will be staring "Loading..." text when JS is disabled */
                #fireworks,
                #app {
                    display:none;
                }
            </style>
        </noscript>
            <canvas id="fireworks"></canvas>
        <div class="container p-0" id="app" v-cloak>
    <div class="alert alert-warning" role="alert" style="text-align: center;">
        This crowdfund page is not publically viewable!
    </div>
    <div class="row h-100 w-100 py-sm-0 py-md-4 mx-0">
        <div class="card w-100 p-0 mx-0">
            <img class="card-img-top" :src="srvModel.mainImageUrl" v-if="srvModel.mainImageUrl" id="crowdfund-main-image">
            <div class="d-flex justify-content-between px-2" id="crowdfund-header-container">
                <h1>
                    {{srvModel.title}} 
                    <span class="h6 text-muted" v-if="!started && srvModel.startDate" v-b-tooltip :title="startDate" id="crowdfund-header-start-date">
                        Starts in {{startDiff}}
                    </span>
                    <span class="h6 text-muted" v-else-if="started && !ended && srvModel.endDate" v-b-tooltip :title="endDate" id="crowdfund-header-end-date">
                        Ends in {{endDiff}}
                    </span>
                    <span class="h6 text-muted" v-else-if="started && !ended && !srvModel.endDate" v-b-tooltip title="No set end date" id="crowdfund-header-active">
                        Currently Active!
                    </span>

                </h1>

                <span v-if="srvModel.targetAmount" class="mt-3" id="crowdfund-header-target">
                    <span class="h5" id="crowdfund-header-target-amount">{{srvModel.targetAmount}} {{targetCurrency}}</span>
                    <span v-if="srvModel.resetEvery !== 'Never'" 
                          id="crowdfund-header-target-dynamic"
                          v-b-tooltip 
                          :title="'Goal resets every ' + srvModel.resetEveryAmount + ' ' + srvModel.resetEvery + ((srvModel.resetEveryAmount>1)?'s': '')"  >Dynamic </span>
                    <span v-if="srvModel.enforceTargetAmount" 
                          id="crowdfund-header-target-softcap">Hardcap Goal <span class="fa fa-question-circle" v-b-tooltip title="No contributions allowed after the goal has been reached"></span></span>
                    <span v-else 
                          id="crowdfund-header-target-hardcap">Softcap Goal <span class="fa fa-question-circle" v-b-tooltip title="Contributions allowed even after goal is reached"></span> </span>
                </span>


            </div>
            <div class="progress w-100 rounded-0 " v-if="srvModel.targetAmount" 
                 id="crowdfund-progress-bar">
                <div class="progress-bar" role="progressbar"
                     :aria-valuenow="srvModel.info.progressPercentage"
                     v-bind:style="{ width: srvModel.info.progressPercentage + '%' }"
                     aria-valuemin="0"
                     id="crowdfund-progress-bar-confirmed-bar"
                     v-b-tooltip :title="parseFloat(srvModel.info.progressPercentage).toFixed(2) + '% contributions'"
                     aria-valuemax="100">
                </div>
                <div class="progress-bar bg-warning" role="progressbar"
                     id="crowdfund-progress-bar-pending-bar"
                     :aria-valuenow="srvModel.info.pendingProgressPercentage"
                     v-bind:style="{ width: srvModel.info.pendingProgressPercentage + '%' }"
                     v-b-tooltip :title="parseFloat(srvModel.info.pendingProgressPercentage).toFixed(2) + '% contributions pending confirmation'"
                     aria-valuemin="0"
                     aria-valuemax="100">
                </div>
            </div>
           
            <div class="card-body">
                <div class="row py-2 text-center crowdfund-stats">
                    <div class="col-sm border-right" id="crowdfund-body-raised-amount">
                        <h5>{{ raisedAmount }} {{targetCurrency}} </h5>
                        <h5 class="text-muted">Raised</h5>
                    </div>
                    <div  class="col-sm  border-right" id="crowdfund-body-goal-raised">
                        <h5>{{ percentageRaisedAmount }}%</h5>
                        <h5 class="text-muted">Of Goal</h5>
                    </div>
                    <div  class="col-sm  border-right" id="crowdfund-body-total-contributors">
                        <h5>
                            {{srvModel.info.totalContributors}}
                        </h5>
                        <h5 class="text-muted">Contributors</h5>
                    </div> 
                    <div  class="col-sm  border-right" v-if="startDiff" id="crowdfund-body-campaign-dates-not-started">
                        <h5>
                            {{startDiff}}
                        </h5>
                        <h5 class="text-muted">Left to start</h5>
                        
                        <b-tooltip target="crowdfund-body-campaign-dates-not-started" >
                            <ul class="p-0">
                                <li v-if="startDate" class="list-unstyled">
                                    {{started? "Started" : "Starts"}} {{startDate}}
                                </li>
                                <li v-if="endDate" class="list-unstyled">
                                    {{ended? "Ended" : "Ends"}} {{endDate}}
                                </li>
                            </ul>
                        </b-tooltip>
                    </div>
                    <div  class="col-sm  border-right" v-if="endDiff" id="crowdfund-body-campaign-dates-started">
                        <h5>
                            {{endDiff}}
                        </h5>
                        <h5 class="text-muted">Left</h5>
                        <b-tooltip target="crowdfund-body-campaign-dates-started" >
                            <ul class="p-0">
                                <li v-if="startDate" class="list-unstyled">
                                    {{started? "Started" : "Starts"}} {{startDate}}
                                </li>
                                <li v-if="endDate" class="list-unstyled">
                                    {{ended? "Ended" : "Ends"}} {{endDate}}
                                </li>
                            </ul>
                        </b-tooltip>
                    </div>
                    <div  class="col-sm border-right" v-if="ended" id="crowdfund-body-campaign-dates-not-active">
                        <h5>
                            Campaign
                        </h5>
                        <h5 >not active</h5>
                        
                        <b-tooltip target="crowdfund-body-campaign-dates-not-active" >
                            <ul class="p-0">
                                <li v-if="startDate" class="list-unstyled">
                                    {{started? "Started" : "Starts"}} {{startDate}}
                                </li>
                                <li v-if="endDate" class="list-unstyled">
                                    {{ended? "Ended" : "Ends"}} {{endDate}}
                                </li>
                            </ul>
                        </b-tooltip>
                    </div>
                </div>
                
                <b-tooltip target="crowdfund-body-raised-amount" v-if="paymentStats && paymentStats.length > 0">
                    <ul class="p-0 text-uppercase">
                        <li v-for="stat of paymentStats" class="list-unstyled">
                            {{stat.label}} <span v-if="stat.lightning" class="fa fa-bolt"></span> {{stat.value}}
                        </li>
                    </ul>
                </b-tooltip>      
                <b-tooltip target="crowdfund-body-goal-raised"  v-if="srvModel.resetEvery !== 'Never'">
                    Goal resets every {{srvModel.resetEveryAmount}} {{srvModel.resetEvery}} {{srvModel.resetEveryAmount>1?'s': ''}}
                </b-tooltip>
                
               
                <div class="card-title" id="crowdfund-body-header">

                    <div class="row">
                        <div class="col-sm-12 col-md-8 col-lg-9" id="crowdfund-body-header-tagline-container">
                            <h2 class="text-muted" v-if="srvModel.tagline" id="crowdfund-body-header-tagline">{{srvModel.tagline}}</h2>
                        </div>
                        <div class="col-sm-12 col-md-4 col-lg-3" id="crowdfund-body-header-cta-container">
                            <button v-if="active" id="crowdfund-body-header-cta" class="btn btn-lg btn-primary w-100 font-weight-bold" v-on:click="contributeModalOpen = true">Contribute</button>
                        </div>
                    </div>
                </div>
                <template v-if="srvModel.disqusEnabled">
                    <b-tabs>
                        <b-tab title="Details"active>
                            <div class="row mt-2">
                                <div class="col-md-8 col-sm-12" id="crowdfund-body-description-container">
                                    <div class="card-text overflow-hidden" v-html="srvModel.description" id="crowdfund-body-description"></div>
                                </div>
                                <div class="col-md-4 col-sm-12" id="crowdfund-body-contribution-container">
                                    <contribute :target-currency="srvModel.targetCurrency"
                                                :display-perks-ranking="srvModel.displayPerksRanking"
                                                :active="active"
                                                :loading="loading"
                                                :in-modal="false"
                                                :perks="perks">
    
                                    </contribute>
                                </div>
                            </div>
                        </b-tab>
                        <b-tab title="Discussion" >
                            <div id="disqus_thread" class=" mt-2"></div>
                        </b-tab>
                    </b-tabs>
                    
                </template>
                <template v-else>
                    <hr/>
                    <div class="row mt-2">
                        <div class="col-md-8 col-sm-12" id="crowdfund-body-description-container">
                            <div class="card-text overflow-hidden" v-html="srvModel.description" id="crowdfund-body-description"></div>
                        </div>
                        <div class="col-md-4 col-sm-12" id="crowdfund-body-contribution-container">
                            <contribute :target-currency="srvModel.targetCurrency"
                                        :loading="loading"
                                        :display-perks-ranking="srvModel.displayPerksRanking"
                                        :active="active"
                                        :in-modal="false"
                                        :perks="perks">
    
                            </contribute>
                        </div>
                    </div>
                </template>
            </div>
            <div class="card-footer text-muted d-flex" v-if="srvModel.animationsEnabled || srvModel.soundsEnabled">
              
                <div class="align-self-end pr-4">Updated {{lastUpdated}}</div>
                <div class="form-check mx-1"  v-if="srvModel.animationsEnabled || animation">
                    <input class="form-check-input" type="checkbox" id="cbAnime" v-model="animation">
                    <label class="form-check-label" for="cbAnime">
                        Animations
                    </label>
                </div>
                <div class="form-check mx-1"  v-if="srvModel.soundsEnabled|| sound">
                    <input class="form-check-input" type="checkbox"  id="cbSounds" v-model="sound">
                    <label class="form-check-label" for="cbSounds">
                        Sounds
                    </label>
                </div>
            </div>
        </div>
    </div>
    <b-modal title="Contribute" v-model="contributeModalOpen" size="lg" ok-only="true" ok-variant="secondary" ok-title="Close" ref="modalContribute">
        <contribute v-if="contributeModalOpen"
                    :target-currency="srvModel.targetCurrency"
                    :active="active"
                    :perks="srvModel.perks"
                    :loading="loading"
                    :in-modal="true">
        </contribute>
    </b-modal>

</div>

<script type="text/x-template" id="perks-template">
<div class="perks-container">
    <perk v-if="!perks || perks.length ===0" 
        :perk="{title: 'Donate Custom Amount', price: { value: null}, custom: true}" 
        :target-currency="targetCurrency" 
        :active="active" 
        :loading="loading"
        :in-modal="inModal">
    </perk>
    <perk v-for="(perk, index) in perks" :perk="perk" :key="perk.id" 
        :target-currency="targetCurrency" 
        :active="active" 
        :display-perks-ranking="displayPerksRanking" 
        :index="index"
        :loading="loading"
        :in-modal="inModal">
    </perk>
</div>
</script>

<script type="text/x-template" id="perk-template"> 
<div class="card perk"  v-bind:class="{ 'expanded': expanded, 'unexpanded': !expanded, 'mb-4':!inModal }" v-on:click="expand" :id="perk.id">
<span v-if="displayPerksRanking && perk.sold" 
    class="btn btn-sm rounded-circle px-0 perk-badge" 
    v-bind:class="{ 'btn-primary': index==0, 'btn-secondary': index!=0}">#{{index+1}}</span> 
         

    <div class="perk-zoom " v-if="canExpand">
        <div class="perk-zoom-bg bg-primary"> </div>
        <div class="perk-zoom-text w-100 text-center text-white font-weight-bold">
            Select this contribution perk
        </div>
    </div>
    <form v-on:submit='onContributeFormSubmit'>
        <input type="hidden" :value="perk.id" id="choiceKey"/> 
        <img v-if="perk.image && perk.image != 'null' "  class="card-img-top" :src="perk.image" />
        <div class="card-body">
            <div class="card-title d-flex justify-content-between" >
                <span class="h5">{{perk.title? perk.title : perk.id}} </span>
                <span class="text-muted" > 
                    <template v-if="perk.price.value">{{perk.price.value.noExponents()}} 
                        {{targetCurrency}} 
                        <template v-if="perk.custom">or more</template>
                    </template>
                    <template v-else-if="!perk.price.value && perk.custom">
                        Any amount
                    </template>
                    
                </span>
            </div>
            <p  class="card-text overflow-hidden" v-if="perk.description" v-html="perk.description"></p>
            
            <div class="input-group" style="max-width: 500px;" v-if="expanded" :id="'perk-form'+ perk.id">
                <input 
                    :disabled="!active"
                    :readonly="!perk.custom"
                    class="form-control" 
                    type="number" 
                    v-model="amount"
                    :min="perk.price.value"  
                    step="any"  
                    placeholder="Contribution Amount"
                    required >
                <div class="input-group-append">                    
                    <span class='input-group-text'>{{targetCurrency}}</span>
                    <button 
                        class="btn btn-primary" 
                        v-bind:class="{ 'btn-disabled': loading}"
                        :disabled="!active || loading" 
                        type="submit">
                         <div v-if="loading"  class="spinner-grow spinner-grow-sm" role="status">
                            <span class="sr-only">Loading...</span>
                        </div>
                        {{perk.buyButtonText || 'Continue'}}
                    </button>
                </div>
            </div>
        </div>
        <div class="card-footer d-flex justify-content-between" v-if="perk.sold || perk.inventory != null">
           
            <span v-if="perk.inventory != null && perk.inventory > 0" class="text-center text-muted">{{perk.inventory}} left</span>
            <span v-if="perk.inventory != null && perk.inventory <= 0" class="text-center text-muted">Sold out</span>
           <span v-if="perk.sold">{{perk.sold}} Contributor{{perk.sold > 1? "s": ""}}</span>
        </div>
    </form>
</div> 
</script>


<script type="text/x-template" id="contribute-template">
  <div>
    <h3 v-if="!inModal" class="mb-3">Contribute</h3>
    <perks 
        :perks="perks" 
        :loading="loading"
        :in-modal="inModal"
        :display-perks-ranking="displayPerksRanking"
        :target-currency="targetCurrency" 
        :active="active">
     </perks>
  </div>
</script>

</body>
</html>
```

## CSS

Customize the bootstrap using the following CSS editor tool:

{% embed url="<https://www.bootstrap-live-customizer.com/>" %}

## Resources

{% embed url="<https://www.smashingmagazine.com/2013/03/customizing-bootstrap/>" %}

{% embed url="<https://www.bootstrap-live-customizer.com/>" %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.buidlbuidl.com/btcpayserver/customize-design/custom-crowdfunding-css-html.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
