You can show your images in different layout styles.
By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.
1 2 3 4 5
<img class="img-fluid rounded mb-lg" src="/portals/22/img/projects/project.jpg" alt="Project Image" /> <img class="img-fluid rounded-circle mb-lg" src="/portals/22/img/projects/project-1.jpg" alt="Project Image" /> <span class="img-thumbnail d-inline-block"> <img class="img-fluid" src="/portals/22/img/projects/project-2.jpg" alt="Project Image" /> </span>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255
<div class="row"> <div class="col-md-4"> <h5 class="text-semibold text-uppercase mt-lg">Default</h5> <a href="../../Portfolio/Single-Project"> <div class="thumb-info"> <span class="thumb-info-wrapper"> <img alt="Project-Image" src="/portals/22/img/projects/project.jpg" class="img-fluid" /> <span class="thumb-info-action-icon"> <em class="fas fa-link"></em> </span> </span> </div> <span class="btn-text-indent">Single Project</span> </a> </div> <div class="col-md-4"> <h5 class="text-semibold text-uppercase mt-lg">Default Lighten</h5> <a href="../../Portfolio/Single-Project"> <div class="thumb-info thumb-info-lighten"> <span class="thumb-info-wrapper"> <img alt="Project-Image" src="/portals/22/img/projects/project-2.jpg" class="img-fluid" /> <span class="thumb-info-action-icon"> <em class="fas fa-link"></em> </span> </span> </div> <span class="btn-text-indent">Single Project</span> </a> </div> <div class="col-md-4"> <h5 class="text-semibold text-uppercase mt-lg">No Zoom</h5> <a href="../../Portfolio/Single-Project"> <div class="thumb-info thumb-info-no-zoom"> <span class="thumb-info-wrapper"> <img alt="Project-Image" src="/portals/22/img/projects/project.jpg" class="img-fluid" /> <span class="thumb-info-action-icon"> <em class="fas fa-link"></em> </span> </span> </div> <span class="btn-text-indent">Single Project</span> </a> </div> </div> <div class="row mt-xlg"> <div class="col-md-4"> <h5 class="text-semibold text-uppercase mt-lg">With Title and Type</h5> <a href="../../Portfolio/Single-Project"> <div class="thumb-info"> <span class="thumb-info-wrapper"> <img alt="Project-Image" src="/portals/22/img/projects/project-4.jpg" class="img-fluid" /> <span class="thumb-info-title"> <span class="thumb-info-inner">Project Title</span> <span class="thumb-info-type">Project Type</span> </span> <span class="thumb-info-action-icon"> <em class="fas fa-link"></em> </span> </span> </div> <span class="btn-text-indent">Single Project</span> </a> </div> <div class="col-md-4"> <h5 class="text-semibold text-uppercase mt-lg">Centered Icons</h5> <div class="thumb-info thumb-info-centered-icons"> <span class="thumb-info-wrapper"> <img alt="Project-Image" src="/portals/22/img/projects/project-5.jpg" class="img-fluid" /> <span class="thumb-info-action"> <a href="#"> <span class="thumb-info-action-icon thumb-info-action-icon-light"> <em class="fas fa-play-circle"></em> </span> <span class="btn-text-indent">Single Project</span> </a> <a href="../../Portfolio/Single-Project"> <span class="thumb-info-action-icon thumb-info-action-icon-light"> <em class="fas fa-plus"></em> </span> <span class="btn-text-indent">Single Project</span> </a> </span> </span> </div> </div> <div class="col-md-4"> <h5 class="text-semibold text-uppercase mt-lg">Icons Colors</h5> <div class="thumb-info thumb-info-centered-icons"> <span class="thumb-info-wrapper"> <img alt="Project-Image" src="/portals/22/img/projects/project-6.jpg" class="img-fluid" /> <span class="thumb-info-action"> <a href="#"> <span class="thumb-info-action-icon thumb-info-action-icon-primary"><em class="fas fa-play-circle"></em></span> <span class="btn-text-indent">Single Project</span> </a> <a href="#"> <span class="thumb-info-action-icon thumb-info-action-icon-secondary"><em class="fas fa-plus"></em></span> <span class="btn-text-indent">Single Project</span> </a> <a href="#"> <span class="thumb-info-action-icon thumb-info-action-icon-tertiary"><em class="fas fa-link"></em></span> <span class="btn-text-indent">Single Project</span> </a> <a href="#"> <span class="thumb-info-action-icon thumb-info-action-icon-light"><em class="fas fa-ellipsis-h"></em></span> <span class="btn-text-indent">Single Project</span> </a> </span> </span> </div> </div> </div> <div class="row mt-xlg"> <div class="col-md-4"> <h5 class="text-semibold text-uppercase mt-lg">Centered Info</h5> <a href="../../Portfolio/Single-Project"> <div class="thumb-info thumb-info-centered-info"> <span class="thumb-info-wrapper"> <img alt="Project-Image" src="/portals/22/img/projects/project-7.jpg" class="img-fluid" /> <span class="thumb-info-title"> <span class="thumb-info-inner">Project Title <em>09/19/2015</em></span> <span class="thumb-info-type">Project Type</span> </span> <span class="thumb-info-action-icon"> <em class="fas fa-link"></em> </span> </span> </div> <span class="btn-text-indent">Single Project</span> </a> </div> <div class="col-md-4"> <h5 class="text-semibold text-uppercase mt-lg">Bottom Info</h5> <div class="thumb-info thumb-info-lighten thumb-info-bottom-info thumb-info-centered-icons"> <span class="thumb-info-wrapper"> <img alt="Project-Image" src="/portals/22/img/projects/project.jpg" class="img-fluid" /> <span class="thumb-info-title"> <span class="thumb-info-inner">Project Title</span> <span class="thumb-info-type">Project Type</span> </span> <span class="thumb-info-action"> <a href="#"> <span class="thumb-info-action-icon thumb-info-action-icon-light"><em class="fas fa-play-circle"></em></span> <span class="btn-text-indent">Single Project</span> </a> <a href="../../Portfolio/Single-Project"> <span class="thumb-info-action-icon thumb-info-action-icon-light"><em class="fas fa-plus"></em></span> <span class="btn-text-indent">Single Project</span> </a> </span> </span> </div> </div> <div class="col-md-4"> <h5 class="text-semibold text-uppercase mt-lg">Bottom Info Dark</h5> <div class="thumb-info thumb-info-lighten thumb-info-bottom-info thumb-info-bottom-info-dark thumb-info-centered-icons"> <span class="thumb-info-wrapper"> <img alt="Project-Image" src="/portals/22/img/projects/project-1.jpg" class="img-fluid" /> <span class="thumb-info-title"> <span class="thumb-info-inner">Project Title</span> <span class="thumb-info-type">Project Type</span> </span> <span class="thumb-info-action"> <a href="#"> <span class="thumb-info-action-icon thumb-info-action-icon-light"><em class="fas fa-play-circle"></em></span> <span class="btn-text-indent">Single Project</span> </a> <a href="../../Portfolio/Single-Project"> <span class="thumb-info-action-icon thumb-info-action-icon-light"><em class="fas fa-plus"></em></span> <span class="btn-text-indent">Single Project</span> </a> </span> </span> </div> </div> </div> <div class="row mt-xlg"> <div class="col-md-4"> <h5 class="text-semibold text-uppercase mt-lg">Push Horizontally</h5> <a href="../../Portfolio/Single-Project"> <div class="thumb-info thumb-info-lighten thumb-info-centered-info thumb-info-push-hor"> <span class="thumb-info-wrapper"> <img alt="Project-Image" src="/portals/22/img/projects/project-4.jpg" class="img-fluid" /> <span class="thumb-info-title"> <span class="thumb-info-inner">Project Title</span> <span class="thumb-info-type">Project Type</span> </span> <span class="thumb-info-action-icon"> <em class="fas fa-link"></em> </span> </span> </div> <span class="btn-text-indent">Single Project</span> </a> </div> <div class="col-md-4"> <h5 class="text-semibold text-uppercase mt-lg">With Captions</h5> <div class="thumb-info thumb-info-hide-wrapper-bg"> <span class="thumb-info-wrapper"> <img alt="Project-Image" src="/portals/22/img/projects/project-4.jpg" class="img-fluid" /> <span class="thumb-info-title"> <span class="thumb-info-inner">Project Title</span> <span class="thumb-info-type">Project Type</span> </span> </span> <span class="thumb-info-caption"> <span class="thumb-info-caption-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span> <span class="thumb-info-social-icons"> <a target="_blank" href="http://www.facebook.com"><em class="fab fa-facebook-f"></em><span>Facebook</span></a> <a href="http://www.twitter.com"><em class="fab fa-twitter"></em><span>Twitter</span></a> <a href="http://www.linkedin.com"><em class="fab fa-linkedin-in"></em><span>Linkedin</span></a> </span> </span> </div> </div> <div class="col-md-4"> <h5 class="text-semibold text-uppercase mt-lg">Hide Info Hover</h5> <a href="../../Portfolio/Single-Project"> <div class="thumb-info thumb-info-centered-info thumb-info-hide-info-hover"> <span class="thumb-info-wrapper"> <img alt="Project-Image" src="/portals/22/img/projects/project.jpg" class="img-fluid" /> <span class="thumb-info-title"> <span class="thumb-info-inner">Project Title</span> <span class="thumb-info-type">Project Type</span> </span> </span> </div> <span class="btn-text-indent">Single Project</span> </a> </div> </div> <div class="row mt-xlg"> <div class="col-md-12"> <h5 class="text-semibold text-uppercase mt-lg">No Borders</h5> </div> </div> <div class="row"> <div class="col-md-4"> <a href="../../Portfolio/Single-Project"> <div class="thumb-info thumb-info-lighten thumb-info-centered-info thumb-info-no-borders mt-lg"> <span class="thumb-info-wrapper"> <img alt="Project-Image" src="/portals/22/img/projects/project-2.jpg" class="img-fluid" /> <span class="thumb-info-title"> <span class="thumb-info-inner">Project Title</span> <span class="thumb-info-type">Project Type</span> </span> </span> </div> <span class="btn-text-indent">Single Project</span> </a> </div> <div class="col-md-4"> <a href="../../Portfolio/Single-Project"> <div class="thumb-info thumb-info-no-borders mt-lg"> <span class="thumb-info-wrapper"> <img alt="Project-Image" src="/portals/22/img/projects/project-4.jpg" class="img-fluid" /> <span class="thumb-info-title"> <span class="thumb-info-inner">Project Title</span> <span class="thumb-info-type">Project Type</span> </span> <span class="thumb-info-action-icon"> <em class="fas fa-link"></em> </span> </span> </div> <span class="btn-text-indent">Single Project</span> </a> </div> <div class="col-md-4"> <div class="thumb-info thumb-info-lighten thumb-info-bottom-info thumb-info-bottom-info-dark thumb-info-centered-icons thumb-info-no-borders mt-lg"> <span class="thumb-info-wrapper"> <img alt="Project-Image" src="/portals/22/img/projects/project-1.jpg" class="img-fluid" /> <span class="thumb-info-title"> <span class="thumb-info-inner">Project Title</span> <span class="thumb-info-type">Project Type</span> </span> <span class="thumb-info-action"> <a href="#"> <span class="thumb-info-action-icon thumb-info-action-icon-light"><em class="fas fa-play-circle"></em></span> <span class="btn-text-indent">Single Project</span> </a> <a href="../../Portfolio/Single-Project"> <span class="thumb-info-action-icon thumb-info-action-icon-light"><em class="fas fa-plus"></em></span> <span class="btn-text-indent">Single Project</span> </a> </span> </span> </div> </div> </div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu pulvinar magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit...
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47
<div class="row"> <div class="col-sm-4 pb-xlg"> <div class="appear-animation restaurant" data-appear-animation="fadeIn" data-appear-animation-delay="0"> <div class="thumb-info thumb-info-no-zoom thumb-info-custom mb-xl center"> <img src="/portals/22/Restaurant/restaurant1.jpg" class="img-fluid rounded-0" alt="restaurant" /> <img class="thumb-info-custom-icon" src="/portals/22/Restaurant/restaurant-icon-1.png" alt="restaurant" /> <div class="thumb-info-caption"> <div class="thumb-info-caption-text"> <h2 class="mb-md mt-xs">Sweets</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu pulvinar magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p> <a class="btn btn-primary mt-md" href="#">View More <em class="fas fa-long-arrow-alt-right"></em></a> </div> </div> </div> </div> </div> <div class="col-sm-4 pb-xlg"> <div class="appear-animation restaurant" data-appear-animation="fadeIn" data-appear-animation-delay="300"> <div class="thumb-info thumb-info-no-zoom thumb-info-custom mb-xl center"> <img src="/portals/22/Restaurant/restaurant2.jpg" class="img-fluid rounded-0" alt="restaurant" /> <img class="thumb-info-custom-icon" src="/portals/22/Restaurant/restaurant-icon-2.png" alt="restaurant" /> <div class="thumb-info-caption"> <div class="thumb-info-caption-text"> <h2 class="mb-md mt-xs">Coffee & Beer</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu pulvinar magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p> <a class="btn btn-primary mt-md" href="#">View More <em class="fas fa-long-arrow-alt-right"></em></a> </div> </div> </div> </div> </div> <div class="col-sm-4 pb-xlg"> <div class="appear-animation restaurant" data-appear-animation="fadeIn" data-appear-animation-delay="600"> <div class="thumb-info thumb-info-no-zoom thumb-info-custom mb-xl center"> <img src="/portals/22/Restaurant/restaurant3.jpg" class="img-fluid rounded-0" alt="restaurant" /> <img class="thumb-info-custom-icon" src="/portals/22/Restaurant/restaurant-icon-3.png" alt="restaurant" /> <div class="thumb-info-caption"> <div class="thumb-info-caption-text"> <h2 class="mb-md mt-xs">Cake & Cookies</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu pulvinar magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p> <a class="btn btn-primary mt-md" href="#">View More <em class="fas fa-long-arrow-alt-right"></em></a> </div> </div> </div> </div> </div> </div>
Twitter
Founder of Porto
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc at elementum lacus. Fusce luctus urna ac mauris consequat, ac eleifend odio imperdiet. Sed euismod tempor orci, ullamcorper accumsan justo semper eu. Donec venenatis elit et euismod iaculis. Integer vehicula imperdiet metus at convallis. Donec ullamcorper at nunc lobortis ultricies. Nam tincidunt.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In imperdiet faucibus congue. Donec at volutpat nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas risus dui.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pellentesque at purus et auctor. Donec eget risus vitae lacus aliquam porttitor. Morbi pellentesque fermentum ex, nec sagittis augue mollis sit amet. Pellentesque vitae metus porttitor ipsum finibus tincidunt. Praesent sit amet fringilla nisi, in porttitor eros.
Google
Facebook
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186
<div class="row event"> <div class="col-md-3 col-sm-4 mt-md mb-md"> <div class="custom-speaker-card m-auto"> <div class="speaker-photo"> <a href="#speaker-content-1" class="popup-with-zoom-anim"> <img alt="Speaker" src="/portals/22/event/speaker1.jpg" class="img-fluid" /> <span class="btn-text-indent">Speaker</span> </a> </div> <div class="speaker-info speaker-social-twitter p-xlg"> <a href="#" class="speaker-social center text-color-light"> <em class="fab fa-twitter" aria-hidden="true"></em> <span class="btn-text-indent">Speaker</span> </a> <h3 class="text-color-dark custom-font-size-4 mb-xs">Melinda Doe</h3> <p class="mb-none">Twitter</p> </div> </div> <div id="speaker-content-1" class="dialog dialog-lg zoom-anim-dialog event mfp-hide p-xlg"> <div class="row"> <div class="col-md-4 col-sm-4"> <img alt="Speaker" src="/portals/22/event/speaker1.jpg" class="img-fluid mb-lg" /> <ul class="social-icons center"> <li class="skype active"> <a href="http://www.skype.com" target="_blank" title="Skype"> <span class="btn-text-indent">Skype</span> </a> </li> <li class="stumbleupon active"> <a href="http://www.stumbleupon.com" target="_blank" title="Stumbleupon"> <span class="btn-text-indent">Stumbleupon</span> </a> </li> <li class="tumblr active"> <a href="http://www.tumblr.com" target="_blank" title="Tumblr"> <span class="btn-text-indent">Tumblr</span> </a> </li> <li class="twitter active"> <a href="http://www.twitter.com" target="_blank" title="Twitter"> <span class="btn-text-indent">Twitter</span> </a> </li> </ul> </div> <div class="col-md-8 col-sm-8"> <h2 class="text-color-dark mb-xs">Melinda Doe</h2> <p class="custom-font-style-1">Founder of Porto</p> <p class="font-size-sm custom-line-height-1"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc at elementum lacus. Fusce luctus urna ac mauris consequat, ac eleifend odio imperdiet. Sed euismod tempor orci, ullamcorper accumsan justo semper eu. Donec venenatis elit et euismod iaculis. Integer vehicula imperdiet metus at convallis. Donec ullamcorper at nunc lobortis ultricies. Nam tincidunt. </p> <p class="font-size-sm custom-line-height-1"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In imperdiet faucibus congue. Donec at volutpat nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas risus dui. </p> <p class="font-size-sm custom-line-height-1"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pellentesque at purus et auctor. Donec eget risus vitae lacus aliquam porttitor. Morbi pellentesque fermentum ex, nec sagittis augue mollis sit amet. Pellentesque vitae metus porttitor ipsum finibus tincidunt. Praesent sit amet fringilla nisi, in porttitor eros. </p> </div> </div> </div> </div> <div class="col-md-3 col-sm-4 mt-md mb-md"> <div class="custom-speaker-card m-auto"> <div class="speaker-photo"> <a href="#speaker-content-2" class="popup-with-zoom-anim"> <img alt="Speaker" src="/portals/22/event/speaker2.jpg" class="img-fluid" /> <span class="btn-text-indent">Speaker</span> </a> </div> <div class="speaker-info speaker-social-gplus p-xlg"> <a href="#" class="speaker-social center text-color-light"> <em class="fab fa-google-plus-g" aria-hidden="true"></em> <span class="btn-text-indent">Speaker</span> </a> <h3 class="text-color-dark custom-font-size-4 mb-xs">Richard Doe</h3> <p class="mb-none">Google</p> </div> </div> <div id="speaker-content-2" class="dialog dialog-lg zoom-anim-dialog event mfp-hide p-xlg"> <div class="row"> <div class="col-md-4 col-sm-4"> <img alt="Speaker" src="/portals/22/event/speaker2.jpg" class="img-fluid mb-lg" /> <ul class="social-icons center"> <li class="skype active"> <a href="http://www.skype.com" target="_blank" title="Skype"> <span class="btn-text-indent">Skype</span> </a> </li> <li class="stumbleupon active"> <a href="http://www.stumbleupon.com" target="_blank" title="Stumbleupon"> <span class="btn-text-indent">Stumbleupon</span> </a> </li> <li class="tumblr active"> <a href="http://www.tumblr.com" target="_blank" title="Tumblr"> <span class="btn-text-indent">Tumblr</span> </a> </li> <li class="twitter active"> <a href="http://www.twitter.com" target="_blank" title="Twitter"> <span class="btn-text-indent">Twitter</span> </a> </li> </ul> </div> <div class="col-md-8 col-sm-8"> <h2 class="text-color-dark mb-xs">Richard Doe</h2> <p class="custom-font-style-1">Founder of Porto</p> <p class="font-size-sm custom-line-height-1"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc at elementum lacus. Fusce luctus urna ac mauris consequat, ac eleifend odio imperdiet. Sed euismod tempor orci, ullamcorper accumsan justo semper eu. Donec venenatis elit et euismod iaculis. Integer vehicula imperdiet metus at convallis. Donec ullamcorper at nunc lobortis ultricies. Nam tincidunt. </p> <p class="font-size-sm custom-line-height-1"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In imperdiet faucibus congue. Donec at volutpat nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas risus dui. </p> <p class="font-size-sm custom-line-height-1"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pellentesque at purus et auctor. Donec eget risus vitae lacus aliquam porttitor. Morbi pellentesque fermentum ex, nec sagittis augue mollis sit amet. Pellentesque vitae metus porttitor ipsum finibus tincidunt. Praesent sit amet fringilla nisi, in porttitor eros. </p> </div> </div> </div> </div> <div class="col-md-3 col-sm-4 mt-md mb-md"> <div class="custom-speaker-card m-auto"> <div class="speaker-photo"> <a href="#speaker-content-3" class="popup-with-zoom-anim"> <img alt="Speaker" src="/portals/22/event/speaker3.jpg" class="img-fluid" /> <span class="btn-text-indent">Speaker</span> </a> </div> <div class="speaker-info speaker-social-facebook p-xlg"> <a href="#" class="speaker-social center text-color-light"> <em class="fab fa-facebook-f" aria-hidden="true"></em> <span class="btn-text-indent">Speaker</span> </a> <h3 class="text-color-dark custom-font-size-4 mb-xs">Jessica Doe</h3> <p class="mb-none">Facebook</p> </div> </div> <div id="speaker-content-3" class="dialog dialog-lg zoom-anim-dialog event mfp-hide p-xlg"> <div class="row"> <div class="col-md-4 col-sm-4"> <img alt="Speaker" src="/portals/22/event/speaker3.jpg" class="img-fluid mb-lg" /> <ul class="social-icons center"> <li class="skype active"> <a href="http://www.skype.com" target="_blank" title="Skype"> <span class="btn-text-indent">Skype</span> </a> </li> <li class="stumbleupon active"> <a href="http://www.stumbleupon.com" target="_blank" title="Stumbleupon"> <span class="btn-text-indent">Stumbleupon</span> </a> </li> <li class="tumblr active"> <a href="http://www.tumblr.com" target="_blank" title="Tumblr"> <span class="btn-text-indent">Tumblr</span> </a> </li> <li class="twitter active"> <a href="http://www.twitter.com" target="_blank" title="Twitter"> <span class="btn-text-indent">Twitter</span> </a> </li> </ul> </div> <div class="col-md-8 col-sm-8"> <h2 class="text-color-dark mb-xs">Jessica Doe</h2> <p class="custom-font-style-1">Founder of Porto</p> <p class="font-size-sm custom-line-height-1"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc at elementum lacus. Fusce luctus urna ac mauris consequat, ac eleifend odio imperdiet. Sed euismod tempor orci, ullamcorper accumsan justo semper eu. Donec venenatis elit et euismod iaculis. Integer vehicula imperdiet metus at convallis. Donec ullamcorper at nunc lobortis ultricies. Nam tincidunt. </p> <p class="font-size-sm custom-line-height-1"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In imperdiet faucibus congue. Donec at volutpat nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas risus dui. </p> <p class="font-size-sm custom-line-height-1"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pellentesque at purus et auctor. Donec eget risus vitae lacus aliquam porttitor. Morbi pellentesque fermentum ex, nec sagittis augue mollis sit amet. Pellentesque vitae metus porttitor ipsum finibus tincidunt. Praesent sit amet fringilla nisi, in porttitor eros. </p> </div> </div> </div> </div> <div class="col-md-3 col-sm-4 mt-md mb-md"> <div class="custom-speaker-card m-auto"> <div class="speaker-photo"> <a href="#speaker-content-4" class="popup-with-zoom-anim"> <img alt="Speaker" src="/portals/22/event/speaker4.jpg" class="img-fluid" /> <span class="btn-text-indent">Speaker</span> </a> </div> <div class="speaker-info speaker-social-twitter p-xlg"> <a href="#" class="speaker-social center text-color-light"> <em class="fab fa-twitter" aria-hidden="true"></em> <span class="btn-text-indent">Speaker</span> </a> <h3 class="text-color-dark custom-font-size-4 mb-xs">Mark Doe</h3> <p class="mb-none">Twitter</p> </div> </div> <div id="speaker-content-4" class="dialog dialog-lg zoom-anim-dialog event mfp-hide p-xlg"> <div class="row"> <div class="col-md-4 col-sm-4"> <img alt="Speaker" src="/portals/22/event/speaker4.jpg" class="img-fluid mb-lg" /> <ul class="social-icons center"> <li class="skype active"> <a href="http://www.skype.com" target="_blank" title="Skype"> <span class="btn-text-indent">Skype</span> </a> </li> <li class="stumbleupon active"> <a href="http://www.stumbleupon.com" target="_blank" title="Stumbleupon"> <span class="btn-text-indent">Stumbleupon</span> </a> </li> <li class="tumblr active"> <a href="http://www.tumblr.com" target="_blank" title="Tumblr"> <span class="btn-text-indent">Tumblr</span> </a> </li> <li class="twitter active"> <a href="http://www.twitter.com" target="_blank" title="Twitter"> <span class="btn-text-indent">Twitter</span> </a> </li> </ul> </div> <div class="col-md-8 col-sm-8"> <h2 class="text-color-dark mb-xs">Mark Doe</h2> <p class="custom-font-style-1">Founder of Porto</p> <p class="font-size-sm custom-line-height-1"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc at elementum lacus. Fusce luctus urna ac mauris consequat, ac eleifend odio imperdiet. Sed euismod tempor orci, ullamcorper accumsan justo semper eu. Donec venenatis elit et euismod iaculis. Integer vehicula imperdiet metus at convallis. Donec ullamcorper at nunc lobortis ultricies. Nam tincidunt. </p> <p class="font-size-sm custom-line-height-1"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In imperdiet faucibus congue. Donec at volutpat nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas risus dui. </p> <p class="font-size-sm custom-line-height-1"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pellentesque at purus et auctor. Donec eget risus vitae lacus aliquam porttitor. Morbi pellentesque fermentum ex, nec sagittis augue mollis sit amet. Pellentesque vitae metus porttitor ipsum finibus tincidunt. Praesent sit amet fringilla nisi, in porttitor eros. </p> </div> </div> </div> </div> </div>