Estoy en el desarrollo de un box en el cual muestro la información del usuario en este caso requiero agregar tres imágenes circulares paralelas para darle mas opciones al usuario.
He agregado una imagen de ejemplo al final de snippet de como quisiera que se visualizaran mis tres imágenes circulares.
A continuación he agregado un snippet de ejemplo con lo que llevo desarrollado hasta el momento.
.box.box-success {
border-top-color: #00a65a;
}
.box {
position: relative;
border-radius: 3px;
background: #ffffff;
border-top: 3px solid #d2d6de;
margin-bottom: 20px;
width: 100%;
box-shadow: 0 1px 1px rgb(0 0 0 / 10%);
}
.box-body {
border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
padding: 10px;
}
.actividades {
padding-right: 80px;
text-align: right;
font-size: 18px;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
color: #5D6168;
font-weight: bold;
}
.profile-user-img {
padding: 3px;
border: 3px solid #d2d6de;
}
.img-circle {
border-radius: 50%;
}
.carousel-inner>.item>a>img, .carousel-inner>.item>img, .img-responsive, .thumbnail a>img, .thumbnail>img {
display: block;
max-width: 100%;
height: auto;
}
img {
vertical-align: middle;
}
.datosGenerales {
font-family: 'Gill Sans', 'Gill Sans MT';
text-align: center;
color: #5D6168;
font-weight: bold;
}
h2 {
font-size: 20px;
}
.puesto {
font-size: 14px;
text-align: center;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
color: #5D6168;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="box box-success">
<div class="box-body">
<div class="actividades">Actividades</div>
<div class="box-body box-profile">
<img class="profile-user-img img-responsive img-circle" src="https://adminlte.io/themes/AdminLTE/dist/img/user2-160x160.jpg" alt="User profile picture">
<div class="col-xs-7 col-lg-7 text">
<div style="display:inline-block; text-align: left;" >
<h1><img class="profile-user-img img-circle" style="width: 60px;" src="https://adminlte.io/themes/AdminLTE/dist/img/user2-160x160.jpg" alt="User profile picture"></h1></div>
<div style="display:inline-block;font-size:18px;color: blue;"class="pb-4">Espacio</div>
<br>
<div style="display:inline-block; " >
<h1><img class="profile-user-img img-circle" style="width: 60px;" src="https://adminlte.io/themes/AdminLTE/dist/img/user2-160x160.jpg" alt="User profile picture"></h1></div>
<div style="display:inline-block;font-size:18px;color: blue;"class="pb-4"> Espacio</div>
<br>
<div style="display:inline-block; " >
<h1><img class="profile-user-img img-circle" style="width: 60px;" src="https://adminlte.io/themes/AdminLTE/dist/img/user2-160x160.jpg" alt="User profile picture"></h1></div>
<div style="display:inline-block;font-size:18px;color: blue;"class="pb-4"> Espacio</div>
</div>
</div>
<h2 class="datosGenerales">Nombre</h2>
<div class="puesto">Puesto</div>
</div>
<!-- /.box-body -->
</div>
Las imágenes que deseo agregar con los pequeños 3 circulos que se encuentran debajo del enunciado de actividades
Imagen de ejemplo:
Actualización:
En base a una de las respuesta he hecho la modificación que se me indica en ella pero esta solo me ubica las tres imágenes circulares debajo de la principal, hay manera de que queden a un lado así como la imagen de ejemplo ?