Naboo's Podracing Misadventure

    bootstrap-profiles

    1.0.0 • Public • Published

    Responsive Profiles built with Bootstrap 5. Lots of templates such as card profile, user profile, profile form, with followers, avatars, comments, stats, social media and many more

    Check out Bootstrap Profiles Documentation for detailed instructions & even more examples.

    Basic example

    Bootstrap 5 Profiles

    <section class="vh-100" style="background-color: #9de2ff;">
      <div class="container py-5 h-100">
        <div class="row d-flex justify-content-center align-items-center h-100">
          <div class="col col-md-9 col-lg-7 col-xl-5">
            <div class="card" style="border-radius: 15px;">
              <div class="card-body p-4">
                <div class="d-flex text-black">
                  <div class="flex-shrink-0">
                    <img src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-profiles/avatar-1.webp" alt="Generic placeholder image" class="img-fluid" style="width: 180px; border-radius: 10px;">
                  </div>
                  <div class="flex-grow-1 ms-3">
                    <h5 class="mb-1">Danny McLoan</h5>
                    <p class="mb-2 pb-1" style="color: #2b2a2a;">Senior Journalist</p>
                    <div class="d-flex justify-content-start rounded-3 p-2 mb-2" style="background-color: #efefef;">
                      <div>
                        <p class="small text-muted mb-1">Articles</p>
                        <p class="mb-0">41</p>
                      </div>
                      <div class="px-3">
                        <p class="small text-muted mb-1">Followers</p>
                        <p class="mb-0">976</p>
                      </div>
                      <div>
                        <p class="small text-muted mb-1">Rating</p>
                        <p class="mb-0">8.5</p>
                      </div>
                    </div>
                    <div class="d-flex pt-1">
                      <button type="button" class="btn btn-outline-primary me-1 flex-grow-1">Chat</button>
                      <button type="button" class="btn btn-primary flex-grow-1">Follow</button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    How to use?

    1. Download MDB 5 - free UI KIT

    2. Choose your favourite customized component and click on the image

    3. Copy & paste the code into your MDB project

    ▶️ Subscribe to YouTube channel for web development tutorials & resources

    More examples

    Bootstrap Profiles #2: Bootstrap 5 Profiles

    Bootstrap Profiles #3: Bootstrap 5 Profiles

    Bootstrap Profiles #4: Bootstrap 5 Profiles

    Bootstrap Profiles #5: Bootstrap 5 Profiles

    Bootstrap Profiles #6: Bootstrap 5 Profiles

    Bootstrap Profiles #7: Bootstrap 5 Profiles


    More extended Bootstrap documentation

    Install

    npm i bootstrap-profiles

    DownloadsWeekly Downloads

    1

    Version

    1.0.0

    License

    ISC

    Unpacked Size

    6.08 MB

    Total Files

    359

    Last publish

    Collaborators

    • mdbootstrap