Company name
Sign up

Pricing

Quickly build an effective pricing table for your potential customers with this Bootstrap example. It’s built with default Bootstrap components and utilities with little customization.

Free

$0 / mo

  • 10 users included
  • 2 GB of storage
  • Email support
  • Help center access

Pro

$15 / mo

  • 20 users included
  • 10 GB of storage
  • Priority email support
  • Help center access

Enterprise

$0 / mo

  • 29 users included
  • 15 GB of storage
  • Phone and email support
  • Help center access

Template-Code in blade

  @push('head')
    <style>
      html {
        font-size: 14px;
      }

      @media (min-width: 768px) {
        html {
          font-size: 16px;
        }
      }

      .container {
        max-width: 960px;
      }

      .pricing-header {
        max-width: 700px;
      }

      .card-deck .card {
        min-width: 220px;
      }
    </style>
  @endpush

  <div class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom shadow-sm">
    @headline([
      'headlineClass' => 'my-0 mr-md-auto font-weight-normal',
      'headlineTag' => 'h5',
      'title' => 'Company name',
    ])

    <nav class="my-2 my-md-0 mr-md-3">
      @php
        $example = [
          [
            'linkClass' => 'p-2 text-dark',
            'title' => 'Features',
            'url' => '#',
          ],
          [
            'linkClass' => 'p-2 text-dark',
            'title' => 'Enterprise',
            'url' => '#',
          ],
          [
            'linkClass' => 'p-2 text-dark',
            'title' => 'Support',
            'url' => '#',
          ],
          [
            'linkClass' => 'p-2 text-dark',
            'title' => 'Pricing',
            'url' => '#',
          ],
        ]
      @endphp

      @foreach($example as $item)
        @link($item)
      @endforeach
    </nav>

    @link([
      'linkClass' => 'btn btn-outline-primary',
      'title' => 'Sign up',
      'url' => '#',
    ])
  </div>

  <div class="pricing-header px-3 py-3 pt-md-5 pb-md-4 mx-auto text-center">
    @headline([
      'headlineClass' => 'display-4',
      'headlineTag' => 'h1',
      'title' => 'Pricing',
    ])
    <p class="lead">
      Quickly build an effective pricing table for your potential customers with this Bootstrap example. It’s built with default Bootstrap components and utilities with little customization.
    </p>
  </div>

  <div class="container">
    <div class="card-deck mb-3 text-center">
      @include('lbc/components/card/card', [
        'cardHeader' => [
          'headlineClass' => 'my-0 font-weight-normal',
          'title' => 'Free'
        ],
        'title' => '$0 <small class="text-muted">/ mo</small>',
        'cardClass' => 'mb-4 shadow-sm',
        'headlineClass' => 'pricing-card-title',
        'cardBodySlot' => '
          <ul class="list-unstyled mt-3 mb-4">
            <li>10 users included</li>
            <li>2 GB of storage</li>
            <li>Email support</li>
            <li>Help center access</li>
          </ul>
          <button type="button" class="btn btn-lg btn-block btn-outline-primary">Sign up for free</button>
        '
      ])

      @include('lbc/components/card/card', [
        'cardHeader' => [
          'headlineClass' => 'my-0 font-weight-normal',
          'title' => 'Pro'
        ],
        'title' => '$15 <small class="text-muted">/ mo</small>',
        'cardClass' => 'mb-4 shadow-sm',
        'headlineClass' => 'pricing-card-title',
        'cardBodySlot' => '
          <ul class="list-unstyled mt-3 mb-4">
            <li>20 users included</li>
            <li>10 GB of storage</li>
            <li>Priority email support</li>
            <li>Help center access</li>
          </ul>
          <button type="button" class="btn btn-lg btn-block btn-primary">Get started</button>
        '
      ])

      @component('lbc/components/card/card', [
        'cardHeader' => [
          'headlineClass' => 'my-0 font-weight-normal',
          'title' => 'Enterprise'
        ],
        'title' => '$0 <small class="text-muted">/ mo</small>',
        'cardClass' => 'mb-4 shadow-sm',
        'headlineClass' => 'pricing-card-title',
      ])
        @slot('cardBodySlot')
          <ul class="list-unstyled mt-3 mb-4">
            <li>29 users included</li>
            <li>15 GB of storage</li>
            <li>Phone and email support</li>
            <li>Help center access</li>
          </ul>
          <button type="button" class="btn btn-lg btn-block btn-outline-primary">Contact us</button>
        @endslot
      @endcomponent
    </div>

    <footer class="pt-4 my-md-5 pt-md-5 border-top">
      <div class="row  text-small">
        <div class="col-6 col-md">
          <h5>Features</h5>
          @php
            $example = [
              [
                'linkClass' => 'text-muted',
                'title' => 'Cool stuff',
                'url' => '#',
              ],
              [
                'linkClass' => 'text-muted',
                'title' => 'Random feature',
                'url' => '#',
              ],
              [
                'linkClass' => 'text-muted',
                'title' => 'Team feature',
                'url' => '#',
              ],
              [
                'linkClass' => 'text-muted',
                'title' => 'Stuff for developers',
                'url' => '#',
              ],
              [
                'linkClass' => 'text-muted',
                'title' => 'Another one',
                'url' => '#',
              ],
              [
                'linkClass' => 'text-muted',
                'title' => 'Last time',
                'url' => '#',
              ],
            ]
          @endphp

          <ul class="list-unstyled">
            @foreach($example as $item)
              <li>
                @link($item)
              </li>
            @endforeach
          </ul>
        </div>

        <div class="col-6 col-md">
          <h5>Resources</h5>
          @php
            $example = [
              [
                'title' => 'Resource',
                'url' => '#',
              ],
              [
                'title' => 'Resource name',
                'url' => '#',
              ],
              [
                'title' => 'Another resource',
                'url' => '#',
              ],
              [
                'title' => 'Final resource',
                'url' => '#',
              ],
            ]
          @endphp

          <ul class="list-unstyled">
            @foreach($example as $item)
              <li>
                @link($item, [
                  'linkClass' => 'text-muted'
                ])
              </li>
            @endforeach
          </ul>
        </div>

        <div class="col-6 col-md">
          <h5>About</h5>
          @php
            $example = [
              [
                'title' => 'Team',
                'url' => '#',
              ],
              [
                'title' => 'Locations',
                'url' => '#',
              ],
              [
                'title' => 'Privacy',
                'url' => '#',
              ],
              [
                'title' => 'Terms',
                'url' => '#',
              ],
            ]
          @endphp

          <ul class="list-unstyled">
            @foreach($example as $item)
              <li>
                @link($item, [
                  'linkClass' => 'text-muted'
                ])
              </li>
            @endforeach
          </ul>
        </div>
      </div>
    </footer>
  </div>