Bootstrap Profiles Section - Asteria Dashboard

Discover 2 Bootstrap Profiles Section available in Asteria Dashboard

Section Profile

Component from Asteria Dashboard Builder
<div class="row removable mt-4">
    <div class="col-12 col-xl-4 drop-zone mb-4">
        <div class="card h-100 draggable">
        <div class="card-header pb-0 p-3">
            <h6 class="mb-0">Platform Settings</h6>
        </div>
        <div class="card-body p-3">
            <h6 class="text-uppercase text-body text-xs font-weight-bolder">Account</h6>
            <ul class="list-group">
            <li class="list-group-item border-0 px-0">
                <div class="form-check form-switch ps-0">
                <input class="form-check-input ms-auto" type="checkbox" id="flexSwitchCheckDefault" checked="">
                <label class="form-check-label text-body ms-3 text-truncate w-80 mb-0" for="flexSwitchCheckDefault">Email me when someone follows me</label>
                </div>
            </li>
            <li class="list-group-item border-0 px-0">
                <div class="form-check form-switch ps-0">
                <input class="form-check-input ms-auto" type="checkbox" id="flexSwitchCheckDefault1">
                <label class="form-check-label text-body ms-3 text-truncate w-80 mb-0" for="flexSwitchCheckDefault1">Email me when someone answers on my post</label>
                </div>
            </li>
            <li class="list-group-item border-0 px-0">
                <div class="form-check form-switch ps-0">
                <input class="form-check-input ms-auto" type="checkbox" id="flexSwitchCheckDefault2" checked="">
                <label class="form-check-label text-body ms-3 text-truncate w-80 mb-0" for="flexSwitchCheckDefault2">Email me when someone mentions me</label>
                </div>
            </li>
            </ul>
            <h6 class="text-uppercase text-body text-xs font-weight-bolder mt-4">Application</h6>
            <ul class="list-group">
            <li class="list-group-item border-0 px-0">
                <div class="form-check form-switch ps-0">
                <input class="form-check-input ms-auto" type="checkbox" id="flexSwitchCheckDefault3">
                <label class="form-check-label text-body ms-3 text-truncate w-80 mb-0" for="flexSwitchCheckDefault3">New launches and projects</label>
                </div>
            </li>
            <li class="list-group-item border-0 px-0">
                <div class="form-check form-switch ps-0">
                <input class="form-check-input ms-auto" type="checkbox" id="flexSwitchCheckDefault4" checked="">
                <label class="form-check-label text-body ms-3 text-truncate w-80 mb-0" for="flexSwitchCheckDefault4">Monthly product updates</label>
                </div>
            </li>
            <li class="list-group-item border-0 px-0 pb-0">
                <div class="form-check form-switch ps-0">
                <input class="form-check-input ms-auto" type="checkbox" id="flexSwitchCheckDefault5">
                <label class="form-check-label text-body ms-3 text-truncate w-80 mb-0" for="flexSwitchCheckDefault5">Subscribe to newsletter</label>
                </div>
            </li>
            </ul>
        </div>
        </div>
    </div>
    <div class="col-12 col-xl-4 drop-zone mb-4">
        <div class="card h-100 draggable">
        <div class="card-header pb-0 p-3">
            <div class="row">
            <div class="col-md-8 d-flex align-items-center">
                <h6 class="mb-0">Profile Information</h6>
            </div>
            <div class="col-md-4 text-right">
                <a href="javascript:;">
                <i class="fas fa-user-edit text-secondary text-sm" data-bs-toggle="tooltip" data-bs-placement="top" title="" aria-hidden="true" data-bs-original-title="Edit Profile" aria-label="Edit Profile"></i><span class="sr-only">Edit Profile</span>
                </a>
            </div>
            </div>
        </div>
        <div class="card-body p-3">
            <p class="text-sm">
            Hi, I’m Alec Thompson, Decisions: If you can’t decide, the answer is no. If two equally difficult paths, choose the one more painful in the short term (pain avoidance is creating an illusion of equality).
            </p>
            <hr class="horizontal gray-light my-4">
            <ul class="list-group">
            <li class="list-group-item border-0 ps-0 pt-0 text-sm"><strong class="text-dark">Full Name:</strong> &nbsp; Alec M. Thompson</li>
            <li class="list-group-item border-0 ps-0 text-sm"><strong class="text-dark">Mobile:</strong> &nbsp; (44) 123 1234 123</li>
            <li class="list-group-item border-0 ps-0 text-sm"><strong class="text-dark">Email:</strong> &nbsp; [email protected]</li>
            <li class="list-group-item border-0 ps-0 text-sm"><strong class="text-dark">Location:</strong> &nbsp; USA</li>
            <li class="list-group-item border-0 ps-0 pb-0">
                <strong class="text-dark text-sm">Social:</strong> &nbsp;
                <a class="btn btn-facebook btn-simple mb-0 ps-1 pe-2 py-0" href="javascript:;">
                <i class="fab fa-facebook fa-lg" aria-hidden="true"></i>
                </a>
                <a class="btn btn-twitter btn-simple mb-0 ps-1 pe-2 py-0" href="javascript:;">
                <i class="fab fa-twitter fa-lg" aria-hidden="true"></i>
                </a>
                <a class="btn btn-instagram btn-simple mb-0 ps-1 pe-2 py-0" href="javascript:;">
                <i class="fab fa-instagram fa-lg" aria-hidden="true"></i>
                </a>
            </li>
            </ul>
        </div>
        </div>
    </div>
    <div class="col-12 col-xl-4 drop-zone mb-4">
        <div class="card h-100 draggable">
        <div class="card-header pb-0 p-3">
            <h6 class="mb-0">Conversations</h6>
        </div>
        <div class="card-body p-3">
            <ul class="list-group">
            <li class="list-group-item border-0 d-flex align-items-center px-0 mb-2">
                <div class="avatar rounded-circle me-3">
                <img src="https://images.unsplash.com/photo-1597223557154-721c1cecc4b0?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NHx8cG9ydHJhaXR8ZW58MHwyfDB8fA%3D%3D&auto=format&fit=crop&w=800&q=60" alt="kal" class="shadow">
                </div>
                <div class="d-flex align-items-start flex-column justify-content-center">
                <h6 class="mb-0 text-sm">Sophie B.</h6>
                <p class="mb-0 text-xs">Hi! I need more information..</p>
                </div>
                <a class="btn btn-link pe-3 ps-0 mb-0 ms-auto" href="javascript:;">Reply</a>
            </li>
            <li class="list-group-item border-0 d-flex align-items-center px-0 mb-2">
                <div class="avatar rounded-circle me-3">
                <img src="https://images.unsplash.com/photo-1485893086445-ed75865251e0?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTF8fHBvcnRyYWl0fGVufDB8MnwwfHw%3D&auto=format&fit=crop&w=800&q=60" alt="kal" class="border-radius-lg shadow">
                </div>
                <div class="d-flex align-items-start flex-column justify-content-center">
                <h6 class="mb-0 text-sm">Anne Marie</h6>
                <p class="mb-0 text-xs">Awesome work, can you..</p>
                </div>
                <a class="btn btn-link pe-3 ps-0 mb-0 ms-auto" href="javascript:;">Reply</a>
            </li>
            <li class="list-group-item border-0 d-flex align-items-center px-0 mb-2">
                <div class="avatar rounded-circle me-3">
                <img src="https://images.unsplash.com/photo-1543123820-ac4a5f77da38?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTA4fHxwb3J0cmFpdHxlbnwwfDJ8MHx8&auto=format&fit=crop&w=800&q=60" alt="kal" class="border-radius-lg shadow">
                </div>
                <div class="d-flex align-items-start flex-column justify-content-center">
                <h6 class="mb-0 text-sm">Ivanna</h6>
                <p class="mb-0 text-xs">About files I can..</p>
                </div>
                <a class="btn btn-link pe-3 ps-0 mb-0 ms-auto" href="javascript:;">Reply</a>
            </li>
            <li class="list-group-item border-0 d-flex align-items-center px-0 mb-2">
                <div class="avatar rounded-circle me-3">
                <img src="https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NXx8cG9ydHJhaXR8ZW58MHwyfDB8fA%3D%3D&auto=format&fit=crop&w=800&q=60" alt="kal" class="border-radius-lg shadow">
                </div>
                <div class="d-flex align-items-start flex-column justify-content-center">
                <h6 class="mb-0 text-sm">Peterson</h6>
                <p class="mb-0 text-xs">Have a great afternoon..</p>
                </div>
                <a class="btn btn-link pe-3 ps-0 mb-0 ms-auto" href="javascript:;">Reply</a>
            </li>
            <li class="list-group-item border-0 d-flex align-items-center px-0">
                <div class="avatar rounded-circle me-3">
                <img src="https://images.unsplash.com/photo-1517588632672-9758d6acba04?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTg1fHxwb3J0cmFpdHxlbnwwfDJ8MHx8&auto=format&fit=crop&w=800&q=60" alt="kal" class="border-radius-lg shadow">
                </div>
                <div class="d-flex align-items-start flex-column justify-content-center">
                <h6 class="mb-0 text-sm">Nick Daniel</h6>
                <p class="mb-0 text-xs">Hi! I need more information..</p>
                </div>
                <a class="btn btn-link pe-3 ps-0 mb-0 ms-auto" href="javascript:;">Reply</a>
            </li>
            </ul>
        </div>
        </div>
    </div>
</div>

Profile Section Work

Component from Asteria Dashboard Builder