Scrollbar in bootstrap application wizard - javascript

I have implemented the bootstrap application wizard and it works great but how can I add a scrollbar to each of the pages or cards in this case?
Here is the modal card window without the overflow included:
Here is the css file I added the code for the scrollbar:
/* WIZARD GENERAL */
.wizard {
display:none;
}
.wizard-dialog {}
.wizard-content {}
.wizard-body {
padding: 0;
height: 1500px;
margin: 0;
overflow-y: scroll;
}
/* WIZARD HEADER */
.wizard-header {
padding: 9px 15px;
border-bottom: 0;
}
.wizard-header h3 {
margin: 0;
line-height: 35px;
display: inline;
font-family: 'Segoe UI';
font-family: inherit;
font-weight: bold;
text-rendering: optimizelegibility;
color: #030845;
}
.wizard-subtitle {
font-weight:bold;
color:#AFAFAF;
padding-left:20px;
}
/* WIZARD NAVIGATION */
.wizard-steps {
width: 28%;
background-color: #f5f5f5;
border-bottom-left-radius: 6px;
position: relative;
}
.wizard-nav-container {
padding-bottom: 30px;
overflow-y: scroll;
}
.wizard-nav-list {
margin-bottom: 0;
}
.wizard-nav-link .glyphicon-chevron-right {
float:right;
margin-top:12px;
margin-right:-6px;
opacity:.25;
}
li.wizard-nav-item.active .glyphicon-chevron-right {
opacity:1;
}
li.wizard-nav-item {
line-height:40px;
}
.wizard-nav-list > li > a {
background-color:#f5f5f5;
padding:3px 15px 3px 20px;
cursor:default;
color:#B4B4B4;
}
.wizard-nav-list > li > a:hover {
background-color: transparent;
}
.wizard-nav-list > li.already-visited > a.wizard-nav-link {
color:#030845;
cursor:pointer;
}
.wizard-nav-list > li.active > a.wizard-nav-link {
color:white;
}
.wizard-nav-item .already-visited .active {
background-color:#030845;
}
.wizard-nav-list li.active > a {
background-color:#030845;
}
/* WIZARD CONTENT */
.wizard-body form {
padding: 0;
margin: 0;
height: auto;
}
/* WIZARD PROGRESS BAR */
.wizard-progress-container {
margin-top: 20px;
padding: 15px;
width: 100%;
position: absolute;
bottom: 0;
}
.wizard-card-container {
margin-left: 28%;
}
/* WIZARD CARDS */
.wizard-error,
.wizard-failure,
.wizard-success,
.wizard-loading,
.wizard-card {
border-top: 1px solid #EEE;
display:none;
padding:35px;
padding-top:10px;
overflow-y:auto;
/*
position:relative;
height:300px;
margin-right: 5px;
*/
}
.wizard-card-overlay {
overflow-y: initial;
}
.wizard-card > h3 {
margin-top:0;
margin-bottom:20px;
font-size:21px;
line-height:40px;
font-weight:normal;
}
/* WIZARD FOOTER */
.wizard-footer {
padding:0;
}
.wizard-buttons-container {
padding:20px;
}
.wizard-cancel {
margin-left: 12px;
}
/* Inner Card */
.wizard-input-section {
margin-bottom:20px;
}
.wizard-dialog .popover.error-popover {
background-color:#F2DEDE;
color:#B94A48;
border-color:#953B39;
}
.wizard-dialog .popover.error-popover .arrow::after {
border-right-color:#F2DEDE;
}
.wizard-dialog .popover.error-popover .popover-title {
display:none;
}
.wizard-dialog .popover.error-popover .arrow {
border-right-color:#953B39;
}
When I added the overflow-y this happens:
It seems to show the scrollbar the right way but it also pushes up the navigation buttons. Any ideas on how to fix this would really help.


You need to set a height and overflow on the container.
.wizard-card-container {
height: 300px;
overflow-y: scroll;
}

Related

Display buttons in one line no matter what size is the div

I am trying to display 4 pictures on a website, each one has different description below it. And there is a button at the end bottom. Since each picture has different description, it means amount of lines differs, but the size of div should be the same and button position should be in one line with all buttons of other pictures. Please see attached image to know what I mean.
I want to display the buttons in the same line with the last picture on right "Andy Clarke". So that when I resize page it won't mess them up.
Please help!
Code is:
html {
box-sizing: border-box
}
*,
*:before,
*:after {
box-sizing: inherit
}
html {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%
}
body {
margin: 0
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
display: block
}
progress {
vertical-align: baseline
}
audio:not([controls]) {
display: none;
height: 0
}
[hidden],
template {
display: none
}
a {
background-color: transparent;
-webkit-text-decoration-skip: objects;
text-decoration: none;
}
a:active,
a:hover {
outline-width: 0
}
abbr[title] {
border-bottom: none;
text-decoration: underline;
text-decoration: underline dotted
}
dfn {
font-style: italic
}
mark {
background: #ff0;
color: #000
}
small {
font-size: 80%
}
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline
}
sub {
bottom: -0.25em
}
sup {
top: -0.5em
}
figure {
margin: 1em 40px
}
img {
border-style: none
}
svg:not(:root) {
overflow: hidden
}
code,
kbd,
pre,
samp {
font-family: monospace, monospace;
font-size: 1em
}
hr {
box-sizing: content-box;
height: 0;
overflow: visible
}
button,
input,
select,
textarea {
font: inherit;
margin: 0
}
optgroup {
font-weight: bold
}
button,
input {
overflow: visible
}
button,
select {
text-transform: none
}
button,
html [type=button],
[type=reset],
[type=submit] {
-webkit-appearance: button
}
button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
border-style: none;
padding: 0
}
button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
outline: 1px dotted ButtonText
}
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: .35em .625em .75em
}
legend {
color: inherit;
display: table;
max-width: 100%;
padding: 0;
white-space: normal
}
textarea {
overflow: auto
}
.ppl-font {
font-family: 'Simonetta';
font-size: 18px;
}
[type=checkbox],
[type=radio] {
padding: 0
}
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
height: auto
}
[type=search] {
-webkit-appearance: textfield;
outline-offset: -2px
}
[type=search]::-webkit-search-cancel-button,
[type=search]::-webkit-search-decoration {
-webkit-appearance: none
}
::-webkit-input-placeholder {
color: inherit;
opacity: 0.54
}
::-webkit-file-upload-button {
-webkit-appearance: button;
font: inherit
}
/* End extract */
html,
body {
font-family: Verdana, sans-serif;
font-size: 15px;
line-height: 1.5
}
html {
overflow-x: hidden
}
h1 {
font-size: 36px
}
h2 {
font-size: 30px
}
h3 {
font-size: 24px
}
h4 {
font-size: 20px
}
h5 {
font-size: 18px
}
h6 {
font-size: 16px
}
.w3-serif {
font-family: serif
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Segoe UI", Arial, sans-serif;
font-weight: 400;
margin: 10px 0
}
.w3-wide {
letter-spacing: 4px
}
hr {
border: 0;
border-top: 1px solid #eee;
margin: 20px 0
}
.w3-image {
max-width: 100%;
height: auto
}
img {
margin-bottom: -5px
}
a {
color: inherit
}
.w3-btn,
.w3-button {
border: none;
display: inline-block;
outline: 0;
padding: 8px 16px;
vertical-align: middle;
overflow: hidden;
text-decoration: none;
color: inherit;
background-color: inherit;
text-align: center;
cursor: pointer;
white-space: nowrap;
}
.w3-btn:hover {
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)
}
.w3-btn,
.w3-button {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none
}
.w3-disabled,
.w3-btn:disabled,
.w3-button:disabled {
cursor: not-allowed;
opacity: 0.3
}
.w3-disabled *,
:disabled * {
pointer-events: none
}
.w3-btn.w3-disabled:hover,
.w3-btn:disabled:hover {
box-shadow: none
}
.w3-input {
padding: 8px;
display: block;
border: none;
border-bottom: 1px solid #ccc;
width: 100%
}
.w3-container:after,
.w3-container:before,
.w3-panel:after,
.w3-panel:before,
.w3-row:after,
.w3-row:before,
.w3-row-padding:after,
.w3-row-padding:before,
.w3-cell-row:before,
.w3-cell-row:after,
.w3-clear:after,
.w3-clear:before,
.w3-bar:before,
.w3-bar:after {
content: "";
display: table;
clear: both
}
.w3-col,
.w3-half,
.w3-third,
.w3-twothird,
.w3-threequarter,
.w3-quarter {
float: left;
width: 100%;
}
.w3-col.s1 {
width: 8.33333%
}
.w3-col.s2 {
width: 16.66666%
}
.w3-col.s3 {
width: 24.99999%
}
.w3-col.s4 {
width: 33.33333%
}
.w3-col.s5 {
width: 41.66666%
}
.w3-col.s6 {
width: 49.99999%
}
.w3-col.s7 {
width: 58.33333%
}
.w3-col.s8 {
width: 66.66666%
}
.w3-col.s9 {
width: 74.99999%
}
.w3-col.s10 {
width: 83.33333%
}
.w3-col.s11 {
width: 91.66666%
}
.w3-col.s12 {
width: 99.99999%
}
#media (min-width:601px) {
.w3-col.m1 {
width: 8.33333%
}
.w3-col.m2 {
width: 16.66666%
}
.w3-col.m3,
.w3-quarter {
width: 24.99999%
}
.w3-col.m4,
.w3-third {
width: 33.33333%
}
.w3-col.m5 {
width: 41.66666%
}
.w3-col.m6,
.w3-half {
width: 49.99999%
}
.w3-col.m7 {
width: 58.33333%
}
.w3-col.m8,
.w3-twothird {
width: 66.66666%
}
.w3-col.m9,
.w3-threequarter {
width: 74.99999%
}
.w3-col.m10 {
width: 83.33333%
}
.w3-col.m11 {
width: 91.66666%
}
.w3-col.m12 {
width: 99.99999%
}
}
#media (min-width:993px) {
.w3-col.l1 {
width: 8.33333%
}
.w3-col.l2 {
width: 16.66666%
}
.w3-col.l3 {
width: 24.99999%
}
.w3-col.l4 {
width: 33.33333%
}
.w3-col.l5 {
width: 41.66666%
}
.w3-col.l6 {
width: 49.99999%
}
.w3-col.l7 {
width: 58.33333%
}
.w3-col.l8 {
width: 66.66666%
}
.w3-col.l9 {
width: 74.99999%
}
.w3-col.l10 {
width: 83.33333%
}
.w3-col.l11 {
width: 91.66666%
}
.w3-col.l12 {
width: 99.99999%
}
}
.w3-content {
max-width: 980px;
margin: auto
}
.w3-rest {
overflow: hidden
}
#media (max-width:600px) {
.w3-modal-content {
margin: 0 10px;
width: auto!important
}
.w3-modal {
padding-top: 30px
}
.w3-dropdown-hover.w3-mobile .w3-dropdown-content,
.w3-dropdown-click.w3-mobile .w3-dropdown-content {
position: relative
}
.w3-hide-small {
display: none!important
}
.w3-mobile {
display: block;
width: 100%!important
}
.w3-bar-item.w3-mobile,
.w3-dropdown-hover.w3-mobile,
.w3-dropdown-click.w3-mobile {
text-align: center
}
.w3-dropdown-hover.w3-mobile,
.w3-dropdown-hover.w3-mobile .w3-btn,
.w3-dropdown-hover.w3-mobile .w3-button,
.w3-dropdown-click.w3-mobile,
.w3-dropdown-click.w3-mobile .w3-btn,
.w3-dropdown-click.w3-mobile .w3-button {
width: 100%
}
}
#media (max-width:768px) {
.w3-modal-content {
width: 500px
}
.w3-modal {
padding-top: 50px
}
}
#media (min-width:993px) {
.w3-modal-content {
width: 900px
}
.w3-hide-large {
display: none!important
}
.w3-sidebar.w3-collapse {
display: block!important
}
}
#media (max-width:992px) and (min-width:601px) {
.w3-hide-medium {
display: none!important
}
}
#media (max-width:992px) {
.w3-sidebar.w3-collapse {
display: none
}
.w3-main {
margin-left: 0!important;
margin-right: 0!important
}
}
.w3-top,
.w3-bottom {
position: fixed;
width: 100%;
z-index: 1
}
.w3-top {
top: 0
}
.w3-bottom {
bottom: 0
}
.w3-overlay {
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 2
}
.w3-display-topleft {
position: absolute;
left: 0;
top: 0
}
.w3-display-topright {
position: absolute;
right: 0;
top: 0
}
.w3-display-bottomleft {
position: absolute;
left: 0;
bottom: 0
}
.w3-display-bottomright {
position: absolute;
right: 0;
bottom: 0
}
.w3-display-middle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%)
}
.w3-row-padding,
.w3-row-padding>.w3-half,
.w3-row-padding>.w3-third,
.w3-row-padding>.w3-twothird,
.w3-row-padding>.w3-threequarter,
.w3-row-padding>.w3-quarter,
.w3-row-padding>.w3-col {
padding: 0 8px
}
.w3-container,
.w3-panel {
padding: 0.01em 16px
}
#keyframes w3-spin {
0% {
transform: rotate(0deg)
}
100% {
transform: rotate(359deg)
}
}
#keyframes fading {
0% {
opacity: 0
}
50% {
opacity: 1
}
100% {
opacity: 0
}
}
.w3-animate-opacity {
animation: opac 0.8s
}
.w3-animate-input {
transition: width 0.4s ease-in-out
}
.w3-animate-input:focus {
width: 100%!important
}
.w3-opacity,
.w3-hover-opacity:hover {
opacity: 0.60
}
.w3-opacity-off,
.w3-hover-opacity-off:hover {
opacity: 1
}
.w3-opacity-max {
opacity: 0.25
}
.w3-opacity-min {
opacity: 0.75
}
.w3-greyscale-max,
.w3-grayscale-max,
.w3-hover-greyscale:hover,
.w3-hover-grayscale:hover {
filter: grayscale(100%)
}
.w3-greyscale,
.w3-grayscale {
filter: grayscale(75%)
}
.w3-greyscale-min,
.w3-grayscale-min {
filter: grayscale(50%)
}
.w3-sepia {
filter: sepia(75%)
}
.w3-sepia-max,
.w3-hover-sepia:hover {
filter: sepia(100%)
}
.w3-sepia-min {
filter: sepia(50%)
}
.w3-tiny {
font-size: 10px!important
}
.w3-small {
font-size: 12px!important
}
.w3-medium {
font-size: 15px!important
}
.w3-large {
font-size: 18px!important
}
.w3-xlarge {
font-size: 24px!important
}
.w3-xxlarge {
font-size: 36px!important
}
.w3-xxxlarge {
font-size: 48px!important
}
.w3-jumbo {
font-size: 64px!important
}
.w3-left-align {
text-align: left!important
}
.w3-right-align {
text-align: right!important
}
.w3-justify {
text-align: justify!important
}
.w3-center {
text-align: center!important
}
.w3-border-0 {
border: 0!important
}
.w3-border {
border: 1px solid #ccc!important
}
.w3-border-top {
border-top: 1px solid #ccc!important
}
.w3-border-bottom {
border-bottom: 1px solid #ccc!important
}
.w3-border-left {
border-left: 1px solid #ccc!important
}
.w3-border-right {
border-right: 1px solid #ccc!important
}
.w3-topbar {
border-top: 6px solid #ccc!important
}
.w3-bottombar {
border-bottom: 6px solid #ccc!important
}
.w3-leftbar {
border-left: 6px solid #ccc!important
}
.w3-rightbar {
border-right: 6px solid #ccc!important
}
.w3-section,
.w3-code {
margin-top: 16px!important;
margin-bottom: 16px!important
}
.w3-margin {
margin: 16px!important
}
.w3-margin-top {
margin-top: 16px!important
}
.w3-margin-bottom {
margin-bottom: 16px!important
}
.w3-margin-left {
margin-left: 16px!important
}
.w3-margin-right {
margin-right: 16px!important
}
.w3-padding-small {
padding: 4px 8px!important
}
.w3-padding {
padding: 8px 16px!important
}
.w3-padding-large {
padding: 12px 24px!important
}
.w3-padding-16 {
padding-top: 16px!important;
padding-bottom: 16px!important
}
.w3-padding-24 {
padding-top: 24px!important;
padding-bottom: 24px!important
}
.w3-padding-32 {
padding-top: 32px!important;
padding-bottom: 32px!important
}
.w3-padding-48 {
padding-top: 48px!important;
padding-bottom: 48px!important
}
.w3-padding-64 {
padding-top: 64px!important;
padding-bottom: 64px!important
}
.w3-left {
float: left!important
}
.w3-right {
float: right!important
}
.w3-button:hover {
color: #000!important;
background-color: #ccc!important
}
.w3-transparent,
.w3-hover-none:hover {
background-color: transparent!important
}
.w3-hover-none:hover {
box-shadow: none!important
}
/* Colors */
.w3-amber,
.w3-hover-amber:hover {
color: #000!important;
background-color: #ffc107!important
}
.w3-aqua,
.w3-hover-aqua:hover {
color: #000!important;
background-color: #00ffff!important
}
.w3-blue,
.w3-hover-blue:hover {
color: #fff!important;
background-color: #2196F3!important
}
.w3-light-blue,
.w3-hover-light-blue:hover {
color: #000!important;
background-color: #87CEEB!important
}
.w3-brown,
.w3-hover-brown:hover {
color: #fff!important;
background-color: #795548!important
}
.w3-cyan,
.w3-hover-cyan:hover {
color: #000!important;
background-color: #00bcd4!important
}
.w3-blue-grey,
.w3-hover-blue-grey:hover,
.w3-blue-gray,
.w3-hover-blue-gray:hover {
color: #fff!important;
background-color: #607d8b!important
}
.w3-green,
.w3-hover-green:hover {
color: #fff!important;
background-color: #4CAF50!important
}
.w3-light-green,
.w3-hover-light-green:hover {
color: #000!important;
background-color: #8bc34a!important
}
.w3-indigo,
.w3-hover-indigo:hover {
color: #fff!important;
background-color: #3f51b5!important
}
.w3-khaki,
.w3-hover-khaki:hover {
color: #000!important;
background-color: #f0e68c!important
}
.w3-lime,
.w3-hover-lime:hover {
color: #000!important;
background-color: #cddc39!important
}
.w3-orange,
.w3-hover-orange:hover {
color: #000!important;
background-color: #ff9800!important
}
.w3-deep-orange,
.w3-hover-deep-orange:hover {
color: #fff!important;
background-color: #ff5722!important
}
.w3-pink,
.w3-hover-pink:hover {
color: #fff!important;
background-color: #e91e63!important
}
.w3-purple,
.w3-hover-purple:hover {
color: #fff!important;
background-color: #9c27b0!important
}
.w3-deep-purple,
.w3-hover-deep-purple:hover {
color: #fff!important;
background-color: #673ab7!important
}
.w3-red,
.w3-hover-red:hover {
color: #fff!important;
background-color: #f44336!important
}
.w3-sand,
.w3-hover-sand:hover {
color: #000!important;
background-color: #fdf5e6!important
}
.w3-teal,
.w3-hover-teal:hover {
color: #fff!important;
background-color: #009688!important
}
.w3-yellow,
.w3-hover-yellow:hover {
color: #000!important;
background-color: #ffeb3b!important
}
.w3-white,
.w3-hover-white:hover {
color: #000!important;
background-color: #fff!important
}
.w3-black,
.w3-hover-black:hover {
color: #fff!important;
background-color: #000!important
}
.w3-red,
.w3-hover-black:hover {
color: red!important;
background-color: #000!important
}
.w3-grey,
.w3-hover-grey:hover,
.w3-gray,
.w3-hover-gray:hover {
color: #000!important;
background-color: #bbb!important
}
.w3-light-grey,
.w3-hover-light-grey:hover,
.w3-light-gray,
.w3-hover-light-gray:hover {
color: #000!important;
background-color: #f1f1f1!important;
}
.w3-dark-grey,
.w3-hover-dark-grey:hover,
.w3-dark-gray,
.w3-hover-dark-gray:hover {
color: #fff!important;
background-color: #616161!important
}
.w3-pale-red,
.w3-hover-pale-red:hover {
color: #000!important;
background-color: #ffdddd!important
}
.w3-pale-green,
.w3-hover-pale-green:hover {
color: #000!important;
background-color: #ddffdd!important
}
.w3-pale-yellow,
.w3-hover-pale-yellow:hover {
color: #000!important;
background-color: #ffffcc!important
}
.w3-pale-blue,
.w3-hover-pale-blue:hover {
color: #000!important;
background-color: #ddffff!important
}
.w3-text-red,
.w3-hover-text-red:hover {
color: #f44336!important
}
.w3-text-green,
.w3-hover-text-green:hover {
color: #4CAF50!important
}
.w3-text-blue,
.w3-hover-text-blue:hover {
color: #2196F3!important
}
.w3-text-yellow,
.w3-hover-text-yellow:hover {
color: #ffeb3b!important
}
.w3-text-white,
.w3-hover-text-white:hover {
color: #fff!important
}
.w3-text-op,
.w3-hover-text-op:hover {
color: #a1a1a1!important
}
.w3-text-black,
.w3-hover-text-black:hover {
color: #000!important
}
.w3-text-grey,
.w3-hover-text-grey:hover,
.w3-text-gray,
.w3-hover-text-gray:hover {
color: #757575!important
}
.w3-text-amber {
color: #ffc107!important
}
.w3-text-aqua {
color: #00ffff!important
}
.w3-text-light-blue {
color: #87CEEB!important
}
.w3-text-brown {
color: #795548!important
}
.w3-text-cyan {
color: #00bcd4!important
}
.w3-text-blue-grey,
.w3-text-blue-gray {
color: #607d8b!important
}
.w3-text-light-green {
color: #8bc34a!important
}
.w3-text-indigo {
color: #3f51b5!important
}
.w3-text-khaki {
color: #b4aa50!important
}
.w3-text-lime {
color: #cddc39!important
}
.w3-text-orange {
color: #ff9800!important
}
.w3-text-deep-orange {
color: #ff5722!important
}
.w3-text-pink {
color: #e91e63!important
}
.w3-text-purple {
color: #9c27b0!important
}
.w3-text-deep-purple {
color: #673ab7!important
}
.w3-text-sand {
color: #fdf5e6!important
}
.w3-text-teal {
color: #009688!important
}
.w3-text-light-grey,
.w3-hover-text-light-grey:hover,
.w3-text-light-gray,
.w3-hover-text-light-gray:hover {
color: #f1f1f1!important
}
.w3-border-grey,
.w3-hover-border-grey:hover,
.w3-border-gray,
.w3-hover-border-gray:hover {
border-color: #bbb!important
}
<div class="w3-container w3-padding-32" id="People">
<h3 class="w3-border-bottom w3-border-light-grey w3-padding-16">Interesting People Every Web Designer Should Know</h3>
</div>
<div class="w3-row-padding w3-grayscale">
<div class="w3-col l3 m6 w3-margin-bottom">
<img src="ppl1.jpg" alt="Ethan" style="width:100%">
<h3>Ethan Marcotte</h3>
<p class="w3-opacity">Founder of Responsive Web Design</p>
<p class="ppl-font">
If there's one man in the web industry who probably doesn't need an introduction, it's </br>Ethan Marcotte.</br>
One of the web's best-known designers. </br>Ethan is a regular and popular speaker on the conference circuit and, in his own words, the one who "started that whole 'responsive web design' thing".
<form>
<input class="w3-button w3-light-grey w3-block" type="button" value="Click" onclick="window.open('https://ethanmarcotte.com/')" />
</form>
</p>
</div>
<div class="w3-col l3 m6 w3-margin-bottom">
<img src="ppl2.jpg" alt="Chris" style="width:100%">
<h3>Chris Coyier</h3>
<p class="w3-opacity">Founder / Writer / Designer</p>
<p class="ppl-font">A world-known CSS expert and HTML guru, Chris Coyier writes one of the most popular CSS blogs on the web, CSS-Tricks. Throughout his career, Chris has published many tutorials, websites, and scripts to help designers improve their skills. A designer
at CodePen, Chris can also be found at web design and development podcast ShopTalk.
<form>
<input class="w3-button w3-light-grey w3-block" type="button" value="Click" onclick="window.open('https://chriscoyier.net/')" />
</form>
</p>
</div>
<div class="w3-col l3 m6 w3-margin-bottom">
<img src="ppl3.jpg" alt="Karen" style="width:100%">
<h3>Karen McGrane</h3>
<p class="w3-opacity">UX and content strategy for web and mobile</p>
<p class="ppl-font">
UX expert Karen McGrane motto is simple - 'On a good day, I make the web more awesome. A content strategist and user experience designer, Karen has over 15 years experience of making big, complicated websites. Currently managing partner of Bond Art +
Science, she is also the author of Content Strategy for Mobile.
<form>
<input class="w3-button w3-light-grey w3-block" type="button" value="Click" onclick="window.open('https://karenmcgrane.com/')" />
</form>
</p>
</div>
<div class="w3-col l3 m6 w3-margin-bottom">
<img src="ppl4.jpg" alt="Andy" style="width:100%">
<h3>Andy Clarke</h3>
<p class="w3-opacity">Founder of a Welsh-based design studio</p>
<p class="ppl-font">Andy is a well-known speaker on the conference circuit, and is the founder of a Welsh-based design studio, Stuff and Nonsense, that boasts clients including the likes of The Home Office, STV and the International Organization for Standardization.
Andy is perhaps best known for his book, Hardboiled Web Design, which combined the idea of progressive enhancement with responsive web design.
<form>
<input class="w3-button w3-light-grey w3-block div-size4" type="button" value="Click" onclick="window.open('https://stuffandnonsense.co.uk/')" />
</form>
</p>
</div>
</div>

Same line elements
Setting a height to the text that is displayed below the pictures should give a good height to put a button:
Example with scroll y overflow:
* {
box-sizing: border-box;
}
.Card {
display: inline-block;
width: 200px;
height: 400px;
box-shadow: 1px 1px 2px black;
margin: 0.5em;
}
.Card img {
display: block;
margin: 0 auto;
width: 150px;
}
.Card h1 {
margin: 0;
}
/*Magic starts here*/
.Card p {
display: block;
height: 100px;
overflow-y: auto;
}
.Card button {
display: block;
height: 2em;
width: 100%;
border: none;
background-color: cornflowerblue;
box-shadow: 1px 1px 1px black;
}
<div class="Card">
<img src="http://lorempixel.com/150/150"/>
<h1>Name</h1>
<p>Text goes here, Text goes here, Text goes here, Text goes here, Text goes here, Text goes here, Text goes here, Text goes here, Text goes here, Text goes here, Text goes here, Text goes here,</p>
<button>Press me!</button>
</div>
<div class="Card">
<img src="http://lorempixel.com/150/150"/>
<h1>Nameru</h1>
<p>Text goes here</p>
<button>Press me!</button>
</div>
<div class="Card">
<img src="http://lorempixel.com/150/150"/>
<h1>Nameru</h1>
<p>Text goes here</p>
<button>Press me!</button>
</div>
<div class="Card">
<img src="http://lorempixel.com/150/150"/>
<h1>Nameru</h1>
<p>Text goes here</p>
<button>Press me!</button>
</div>

try to add this code into your CSS. I hope it will work.
.w3-row-padding {
display: flex;
}
form {
position: absolute;
bottom: 0;
}
.w3-row-padding >div {
position: relative;
}
.w3-row-padding >div>p {
margin-bottom: 50px;
}

I recommend reading about how to use flexbox, or alternatively potenially using tables or display:table. Each of those can force your columns to be the same height, and you can then position your buttons at the bottom of each one.
[edit]
Here's a JSFiddle that shows how you can use it to smash the button to the bottom:
https://jsfiddle.net/hsnohum5/1/

Without redoing the whole thing, I can come up with so called padding trick. The idea is to set the height of the container to 0px and make padding look as if it is the height. Set relative position for this outer container as well. Also place another container inside it and set its position to absolute and stretch it to take all the space within the outer one. In your code I added <div> right inside .w3-col and placed all the content there. I set the following additional styles:
.w3-col form {
position: absolute;
bottom: 1rem;
width: 100%;
text-align: center;
}
.w3-btn, .w3-button {
width: 90%;
}
.w3-col {
padding-bottom: 80%!important;
position: relative;
height: 0px;
}
.w3-col > div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
If your blocks are static - which seems to be the case - you just need to set padding-bottom properly for .w3-col to fit all the content. The whole thing (you may want to polish responsiveness for different viewports):
html {
box-sizing: border-box
}
*,
*:before,
*:after {
box-sizing: inherit
}
html {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%
}
body {
margin: 0
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
display: block
}
progress {
vertical-align: baseline
}
audio:not([controls]) {
display: none;
height: 0
}
[hidden],
template {
display: none
}
a {
background-color: transparent;
-webkit-text-decoration-skip: objects;
text-decoration: none;
}
a:active,
a:hover {
outline-width: 0
}
abbr[title] {
border-bottom: none;
text-decoration: underline;
text-decoration: underline dotted
}
dfn {
font-style: italic
}
mark {
background: #ff0;
color: #000
}
small {
font-size: 80%
}
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline
}
sub {
bottom: -0.25em
}
sup {
top: -0.5em
}
figure {
margin: 1em 40px
}
img {
border-style: none
}
svg:not(:root) {
overflow: hidden
}
code,
kbd,
pre,
samp {
font-family: monospace, monospace;
font-size: 1em
}
hr {
box-sizing: content-box;
height: 0;
overflow: visible
}
button,
input,
select,
textarea {
font: inherit;
margin: 0
}
optgroup {
font-weight: bold
}
button,
input {
overflow: visible
}
button,
select {
text-transform: none
}
button,
html [type=button],
[type=reset],
[type=submit] {
-webkit-appearance: button
}
button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
border-style: none;
padding: 0
}
button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
outline: 1px dotted ButtonText
}
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: .35em .625em .75em
}
legend {
color: inherit;
display: table;
max-width: 100%;
padding: 0;
white-space: normal
}
textarea {
overflow: auto
}
.ppl-font {
font-family: 'Simonetta';
font-size: 18px;
}
[type=checkbox],
[type=radio] {
padding: 0
}
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
height: auto
}
[type=search] {
-webkit-appearance: textfield;
outline-offset: -2px
}
[type=search]::-webkit-search-cancel-button,
[type=search]::-webkit-search-decoration {
-webkit-appearance: none
}
::-webkit-input-placeholder {
color: inherit;
opacity: 0.54
}
::-webkit-file-upload-button {
-webkit-appearance: button;
font: inherit
}
/* End extract */
html,
body {
font-family: Verdana, sans-serif;
font-size: 15px;
line-height: 1.5
}
html {
overflow-x: hidden
}
h1 {
font-size: 36px
}
h2 {
font-size: 30px
}
h3 {
font-size: 24px
}
h4 {
font-size: 20px
}
h5 {
font-size: 18px
}
h6 {
font-size: 16px
}
.w3-serif {
font-family: serif
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Segoe UI", Arial, sans-serif;
font-weight: 400;
margin: 10px 0
}
.w3-wide {
letter-spacing: 4px
}
hr {
border: 0;
border-top: 1px solid #eee;
margin: 20px 0
}
.w3-image {
max-width: 100%;
height: auto
}
img {
margin-bottom: -5px
}
a {
color: inherit
}
.w3-btn,
.w3-button {
border: none;
display: inline-block;
outline: 0;
padding: 8px 16px;
vertical-align: middle;
overflow: hidden;
text-decoration: none;
color: inherit;
background-color: inherit;
text-align: center;
cursor: pointer;
white-space: nowrap;
width: 90%;
}
.w3-col form {
position: absolute;
bottom: 1rem;
width: 100%;
text-align: center;
}
.w3-btn:hover {
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)
}
.w3-btn,
.w3-button {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none
}
.w3-disabled,
.w3-btn:disabled,
.w3-button:disabled {
cursor: not-allowed;
opacity: 0.3
}
.w3-disabled *,
:disabled * {
pointer-events: none
}
.w3-btn.w3-disabled:hover,
.w3-btn:disabled:hover {
box-shadow: none
}
.w3-input {
padding: 8px;
display: block;
border: none;
border-bottom: 1px solid #ccc;
width: 100%
}
.w3-container:after,
.w3-container:before,
.w3-panel:after,
.w3-panel:before,
.w3-row:after,
.w3-row:before,
.w3-row-padding:after,
.w3-row-padding:before,
.w3-cell-row:before,
.w3-cell-row:after,
.w3-clear:after,
.w3-clear:before,
.w3-bar:before,
.w3-bar:after {
content: "";
display: table;
clear: both
}
.w3-col {
padding-bottom: 80%!important;
position: relative;
height: 0px;
}
.w3-col > div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.w3-col,
.w3-half,
.w3-third,
.w3-twothird,
.w3-threequarter,
.w3-quarter {
float: left;
width: 100%;
}
.w3-col.s1 {
width: 8.33333%
}
.w3-col.s2 {
width: 16.66666%
}
.w3-col.s3 {
width: 24.99999%
}
.w3-col.s4 {
width: 33.33333%
}
.w3-col.s5 {
width: 41.66666%
}
.w3-col.s6 {
width: 49.99999%
}
.w3-col.s7 {
width: 58.33333%
}
.w3-col.s8 {
width: 66.66666%
}
.w3-col.s9 {
width: 74.99999%
}
.w3-col.s10 {
width: 83.33333%
}
.w3-col.s11 {
width: 91.66666%
}
.w3-col.s12 {
width: 99.99999%
}
#media (min-width:601px) {
.w3-col.m1 {
width: 8.33333%
}
.w3-col.m2 {
width: 16.66666%
}
.w3-col.m3,
.w3-quarter {
width: 24.99999%
}
.w3-col.m4,
.w3-third {
width: 33.33333%
}
.w3-col.m5 {
width: 41.66666%
}
.w3-col.m6,
.w3-half {
width: 49.99999%
}
.w3-col.m7 {
width: 58.33333%
}
.w3-col.m8,
.w3-twothird {
width: 66.66666%
}
.w3-col.m9,
.w3-threequarter {
width: 74.99999%
}
.w3-col.m10 {
width: 83.33333%
}
.w3-col.m11 {
width: 91.66666%
}
.w3-col.m12 {
width: 99.99999%
}
}
#media (min-width:993px) {
.w3-col.l1 {
width: 8.33333%
}
.w3-col.l2 {
width: 16.66666%
}
.w3-col.l3 {
width: 24.99999%
}
.w3-col.l4 {
width: 33.33333%
}
.w3-col.l5 {
width: 41.66666%
}
.w3-col.l6 {
width: 49.99999%
}
.w3-col.l7 {
width: 58.33333%
}
.w3-col.l8 {
width: 66.66666%
}
.w3-col.l9 {
width: 74.99999%
}
.w3-col.l10 {
width: 83.33333%
}
.w3-col.l11 {
width: 91.66666%
}
.w3-col.l12 {
width: 99.99999%
}
}
.w3-content {
max-width: 980px;
margin: auto
}
.w3-rest {
overflow: hidden
}
#media (max-width:600px) {
.w3-modal-content {
margin: 0 10px;
width: auto!important
}
.w3-modal {
padding-top: 30px
}
.w3-dropdown-hover.w3-mobile .w3-dropdown-content,
.w3-dropdown-click.w3-mobile .w3-dropdown-content {
position: relative
}
.w3-hide-small {
display: none!important
}
.w3-mobile {
display: block;
width: 100%!important
}
.w3-bar-item.w3-mobile,
.w3-dropdown-hover.w3-mobile,
.w3-dropdown-click.w3-mobile {
text-align: center
}
.w3-dropdown-hover.w3-mobile,
.w3-dropdown-hover.w3-mobile .w3-btn,
.w3-dropdown-hover.w3-mobile .w3-button,
.w3-dropdown-click.w3-mobile,
.w3-dropdown-click.w3-mobile .w3-btn,
.w3-dropdown-click.w3-mobile .w3-button {
width: 100%
}
}
#media (max-width:768px) {
.w3-modal-content {
width: 500px
}
.w3-modal {
padding-top: 50px
}
}
#media (min-width:993px) {
.w3-modal-content {
width: 900px
}
.w3-hide-large {
display: none!important
}
.w3-sidebar.w3-collapse {
display: block!important
}
}
#media (max-width:992px) and (min-width:601px) {
.w3-hide-medium {
display: none!important
}
}
#media (max-width:992px) {
.w3-sidebar.w3-collapse {
display: none
}
.w3-main {
margin-left: 0!important;
margin-right: 0!important
}
}
.w3-top,
.w3-bottom {
position: fixed;
width: 100%;
z-index: 1
}
.w3-top {
top: 0
}
.w3-bottom {
bottom: 0
}
.w3-overlay {
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 2
}
.w3-display-topleft {
position: absolute;
left: 0;
top: 0
}
.w3-display-topright {
position: absolute;
right: 0;
top: 0
}
.w3-display-bottomleft {
position: absolute;
left: 0;
bottom: 0
}
.w3-display-bottomright {
position: absolute;
right: 0;
bottom: 0
}
.w3-display-middle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%)
}
.w3-row-padding,
.w3-row-padding>.w3-half,
.w3-row-padding>.w3-third,
.w3-row-padding>.w3-twothird,
.w3-row-padding>.w3-threequarter,
.w3-row-padding>.w3-quarter,
.w3-row-padding>.w3-col {
padding: 0 8px
}
.w3-container,
.w3-panel {
padding: 0.01em 16px
}
#keyframes w3-spin {
0% {
transform: rotate(0deg)
}
100% {
transform: rotate(359deg)
}
}
#keyframes fading {
0% {
opacity: 0
}
50% {
opacity: 1
}
100% {
opacity: 0
}
}
.w3-animate-opacity {
animation: opac 0.8s
}
.w3-animate-input {
transition: width 0.4s ease-in-out
}
.w3-animate-input:focus {
width: 100%!important
}
.w3-opacity,
.w3-hover-opacity:hover {
opacity: 0.60
}
.w3-opacity-off,
.w3-hover-opacity-off:hover {
opacity: 1
}
.w3-opacity-max {
opacity: 0.25
}
.w3-opacity-min {
opacity: 0.75
}
.w3-greyscale-max,
.w3-grayscale-max,
.w3-hover-greyscale:hover,
.w3-hover-grayscale:hover {
filter: grayscale(100%)
}
.w3-greyscale,
.w3-grayscale {
filter: grayscale(75%)
}
.w3-greyscale-min,
.w3-grayscale-min {
filter: grayscale(50%)
}
.w3-sepia {
filter: sepia(75%)
}
.w3-sepia-max,
.w3-hover-sepia:hover {
filter: sepia(100%)
}
.w3-sepia-min {
filter: sepia(50%)
}
.w3-tiny {
font-size: 10px!important
}
.w3-small {
font-size: 12px!important
}
.w3-medium {
font-size: 15px!important
}
.w3-large {
font-size: 18px!important
}
.w3-xlarge {
font-size: 24px!important
}
.w3-xxlarge {
font-size: 36px!important
}
.w3-xxxlarge {
font-size: 48px!important
}
.w3-jumbo {
font-size: 64px!important
}
.w3-left-align {
text-align: left!important
}
.w3-right-align {
text-align: right!important
}
.w3-justify {
text-align: justify!important
}
.w3-center {
text-align: center!important
}
.w3-border-0 {
border: 0!important
}
.w3-border {
border: 1px solid #ccc!important
}
.w3-border-top {
border-top: 1px solid #ccc!important
}
.w3-border-bottom {
border-bottom: 1px solid #ccc!important
}
.w3-border-left {
border-left: 1px solid #ccc!important
}
.w3-border-right {
border-right: 1px solid #ccc!important
}
.w3-topbar {
border-top: 6px solid #ccc!important
}
.w3-bottombar {
border-bottom: 6px solid #ccc!important
}
.w3-leftbar {
border-left: 6px solid #ccc!important
}
.w3-rightbar {
border-right: 6px solid #ccc!important
}
.w3-section,
.w3-code {
margin-top: 16px!important;
margin-bottom: 16px!important
}
.w3-margin {
margin: 16px!important
}
.w3-margin-top {
margin-top: 16px!important
}
.w3-margin-bottom {
margin-bottom: 16px!important
}
.w3-margin-left {
margin-left: 16px!important
}
.w3-margin-right {
margin-right: 16px!important
}
.w3-padding-small {
padding: 4px 8px!important
}
.w3-padding {
padding: 8px 16px!important
}
.w3-padding-large {
padding: 12px 24px!important
}
.w3-padding-16 {
padding-top: 16px!important;
padding-bottom: 16px!important
}
.w3-padding-24 {
padding-top: 24px!important;
padding-bottom: 24px!important
}
.w3-padding-32 {
padding-top: 32px!important;
padding-bottom: 32px!important
}
.w3-padding-48 {
padding-top: 48px!important;
padding-bottom: 48px!important
}
.w3-padding-64 {
padding-top: 64px!important;
padding-bottom: 64px!important
}
.w3-left {
float: left!important
}
.w3-right {
float: right!important
}
.w3-button:hover {
color: #000!important;
background-color: #ccc!important
}
.w3-transparent,
.w3-hover-none:hover {
background-color: transparent!important
}
.w3-hover-none:hover {
box-shadow: none!important
}
/* Colors */
.w3-amber,
.w3-hover-amber:hover {
color: #000!important;
background-color: #ffc107!important
}
.w3-aqua,
.w3-hover-aqua:hover {
color: #000!important;
background-color: #00ffff!important
}
.w3-blue,
.w3-hover-blue:hover {
color: #fff!important;
background-color: #2196F3!important
}
.w3-light-blue,
.w3-hover-light-blue:hover {
color: #000!important;
background-color: #87CEEB!important
}
.w3-brown,
.w3-hover-brown:hover {
color: #fff!important;
background-color: #795548!important
}
.w3-cyan,
.w3-hover-cyan:hover {
color: #000!important;
background-color: #00bcd4!important
}
.w3-blue-grey,
.w3-hover-blue-grey:hover,
.w3-blue-gray,
.w3-hover-blue-gray:hover {
color: #fff!important;
background-color: #607d8b!important
}
.w3-green,
.w3-hover-green:hover {
color: #fff!important;
background-color: #4CAF50!important
}
.w3-light-green,
.w3-hover-light-green:hover {
color: #000!important;
background-color: #8bc34a!important
}
.w3-indigo,
.w3-hover-indigo:hover {
color: #fff!important;
background-color: #3f51b5!important
}
.w3-khaki,
.w3-hover-khaki:hover {
color: #000!important;
background-color: #f0e68c!important
}
.w3-lime,
.w3-hover-lime:hover {
color: #000!important;
background-color: #cddc39!important
}
.w3-orange,
.w3-hover-orange:hover {
color: #000!important;
background-color: #ff9800!important
}
.w3-deep-orange,
.w3-hover-deep-orange:hover {
color: #fff!important;
background-color: #ff5722!important
}
.w3-pink,
.w3-hover-pink:hover {
color: #fff!important;
background-color: #e91e63!important
}
.w3-purple,
.w3-hover-purple:hover {
color: #fff!important;
background-color: #9c27b0!important
}
.w3-deep-purple,
.w3-hover-deep-purple:hover {
color: #fff!important;
background-color: #673ab7!important
}
.w3-red,
.w3-hover-red:hover {
color: #fff!important;
background-color: #f44336!important
}
.w3-sand,
.w3-hover-sand:hover {
color: #000!important;
background-color: #fdf5e6!important
}
.w3-teal,
.w3-hover-teal:hover {
color: #fff!important;
background-color: #009688!important
}
.w3-yellow,
.w3-hover-yellow:hover {
color: #000!important;
background-color: #ffeb3b!important
}
.w3-white,
.w3-hover-white:hover {
color: #000!important;
background-color: #fff!important
}
.w3-black,
.w3-hover-black:hover {
color: #fff!important;
background-color: #000!important
}
.w3-red,
.w3-hover-black:hover {
color: red!important;
background-color: #000!important
}
.w3-grey,
.w3-hover-grey:hover,
.w3-gray,
.w3-hover-gray:hover {
color: #000!important;
background-color: #bbb!important
}
.w3-light-grey,
.w3-hover-light-grey:hover,
.w3-light-gray,
.w3-hover-light-gray:hover {
color: #000!important;
background-color: #f1f1f1!important;
}
.w3-dark-grey,
.w3-hover-dark-grey:hover,
.w3-dark-gray,
.w3-hover-dark-gray:hover {
color: #fff!important;
background-color: #616161!important
}
.w3-pale-red,
.w3-hover-pale-red:hover {
color: #000!important;
background-color: #ffdddd!important
}
.w3-pale-green,
.w3-hover-pale-green:hover {
color: #000!important;
background-color: #ddffdd!important
}
.w3-pale-yellow,
.w3-hover-pale-yellow:hover {
color: #000!important;
background-color: #ffffcc!important
}
.w3-pale-blue,
.w3-hover-pale-blue:hover {
color: #000!important;
background-color: #ddffff!important
}
.w3-text-red,
.w3-hover-text-red:hover {
color: #f44336!important
}
.w3-text-green,
.w3-hover-text-green:hover {
color: #4CAF50!important
}
.w3-text-blue,
.w3-hover-text-blue:hover {
color: #2196F3!important
}
.w3-text-yellow,
.w3-hover-text-yellow:hover {
color: #ffeb3b!important
}
.w3-text-white,
.w3-hover-text-white:hover {
color: #fff!important
}
.w3-text-op,
.w3-hover-text-op:hover {
color: #a1a1a1!important
}
.w3-text-black,
.w3-hover-text-black:hover {
color: #000!important
}
.w3-text-grey,
.w3-hover-text-grey:hover,
.w3-text-gray,
.w3-hover-text-gray:hover {
color: #757575!important
}
.w3-text-amber {
color: #ffc107!important
}
.w3-text-aqua {
color: #00ffff!important
}
.w3-text-light-blue {
color: #87CEEB!important
}
.w3-text-brown {
color: #795548!important
}
.w3-text-cyan {
color: #00bcd4!important
}
.w3-text-blue-grey,
.w3-text-blue-gray {
color: #607d8b!important
}
.w3-text-light-green {
color: #8bc34a!important
}
.w3-text-indigo {
color: #3f51b5!important
}
.w3-text-khaki {
color: #b4aa50!important
}
.w3-text-lime {
color: #cddc39!important
}
.w3-text-orange {
color: #ff9800!important
}
.w3-text-deep-orange {
color: #ff5722!important
}
.w3-text-pink {
color: #e91e63!important
}
.w3-text-purple {
color: #9c27b0!important
}
.w3-text-deep-purple {
color: #673ab7!important
}
.w3-text-sand {
color: #fdf5e6!important
}
.w3-text-teal {
color: #009688!important
}
.w3-text-light-grey,
.w3-hover-text-light-grey:hover,
.w3-text-light-gray,
.w3-hover-text-light-gray:hover {
color: #f1f1f1!important
}
.w3-border-grey,
.w3-hover-border-grey:hover,
.w3-border-gray,
.w3-hover-border-gray:hover {
border-color: #bbb!important
}
<div class="w3-container w3-padding-32" id="People">
<h3 class="w3-border-bottom w3-border-light-grey w3-padding-16">Interesting People Every Web Designer Should Know</h3>
</div>
<div class="w3-row-padding w3-grayscale">
<div class="w3-col l3 m6 w3-margin-bottom">
<div>
<img src="ppl1.jpg" alt="Ethan" style="width:100%">
<h3>Ethan Marcotte</h3>
<p class="w3-opacity">Founder of Responsive Web Design</p>
<p class="ppl-font">
If there's one man in the web industry who probably doesn't need an introduction, it's </br>Ethan Marcotte.</br>
One of the web's best-known designers. </br>Ethan is a regular and popular speaker on the conference circuit and, in his own words, the one who "started that whole 'responsive web design' thing".</p>
<form>
<input class="w3-button w3-light-grey w3-block" type="button" value="Click" onclick="window.open('https://ethanmarcotte.com/')" />
</form>
</div>
</div>
<div class="w3-col l3 m6 w3-margin-bottom"><div>
<img src="ppl2.jpg" alt="Chris" style="width:100%">
<h3>Chris Coyier</h3>
<p class="w3-opacity">Founder / Writer / Designer</p>
<p class="ppl-font">A world-known CSS expert and HTML guru, Chris Coyier writes one of the most popular CSS blogs on the web, CSS-Tricks. Throughout his career, Chris has published many tutorials, websites, and scripts to help designers improve their skills. A designer
at CodePen, Chris can also be found at web design and development podcast ShopTalk.</p>
<form>
<input class="w3-button w3-light-grey w3-block" type="button" value="Click" onclick="window.open('https://chriscoyier.net/')" />
</form>
</div>
</div>
<div class="w3-col l3 m6 w3-margin-bottom"><div>
<img src="ppl3.jpg" alt="Karen" style="width:100%">
<h3>Karen McGrane</h3>
<p class="w3-opacity">UX and content strategy for web and mobile</p>
<p class="ppl-font">
UX expert Karen McGrane motto is simple - 'On a good day, I make the web more awesome. A content strategist and user experience designer, Karen has over 15 years experience of making big, complicated websites. Currently managing partner of Bond Art +
Science, she is also the author of Content Strategy for Mobile.</p>
<form>
<input class="w3-button w3-light-grey w3-block" type="button" value="Click" onclick="window.open('https://karenmcgrane.com/')" />
</form>
</div>
</div>
<div class="w3-col l3 m6 w3-margin-bottom"><div>
<img src="ppl4.jpg" alt="Andy" style="width:100%">
<h3>Andy Clarke</h3>
<p class="w3-opacity">Founder of a Welsh-based design studio</p>
<p class="ppl-font">Andy is a well-known speaker on the conference circuit, and is the founder of a Welsh-based design studio, Stuff and Nonsense, that boasts clients including the likes of The Home Office, STV and the International Organization for Standardization.
Andy is perhaps best known for his book, Hardboiled Web Design, which combined the idea of progressive enhancement with responsive web design.</p>
<form>
<input class="w3-button w3-light-grey w3-block div-size4" type="button" value="Click" onclick="window.open('https://stuffandnonsense.co.uk/')" />
</form>
</div>
</div>
</div>

Can't get rid of white margin on div's

So, I have tried everything I can think of to get rid of the white margins around everything on my page.
I have put: margin: 0; on everything I can think of and it still does not get rid of it. Any help would be great!
I apologize for the giant wall of code.
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
/* global */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
font-family: sans-serif;
}
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
font-family: "Tahoma", sans-serif;
font-size: 16px;
color: #454545;
background-color: #fff;
}
div {
margin: 0;
}
/* end global */
/* custom */
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.footer {
padding: 5px 10px;
background-color: #428cd9;
}
/* end custom */
/* custom responsive */
.row::after {
content: "";
clear: both;
display: block;
}
[class*="col-"] {
float: left;
padding: 15px;
}
.col-1 {
width: 8.33%;
}
.col-2 {
width: 16.66%;
}
.col-3 {
width: 25%;
}
.col-4 {
width: 33.33%;
}
.col-5 {
width: 41.66%;
}
.col-6 {
width: 50%;
}
.col-7 {
width: 58.33%;
}
.col-8 {
width: 66.66%;
}
.col-9 {
width: 75%;
}
.col-10 {
width: 83.33%;
}
.col-11 {
width: 91.66%;
}
.col-12 {
width: 100%;
}
/*end custom responsive */
/* navbar */
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #428cd9;
}
ul.topnav li {
float: left;
}
ul.topnav li a {
height: 55px;
display: inline-block;
color: #454545;
padding: 0px 16px;
line-height: 3.0;
text-decoration: none;
text-align: center;
font-size: 17px;
transition: 0.3s;
}
ul.topnav li a:hover {
background-color: #2162a6;
color: #757575;
}
ul.topnav li.icon {
display: none;
}
/* end navbar */
/* responsive navbar */
#media screen and (max-width:680px) {
ul.topnav li:not(: first-child) {
display: none;
}
ul.topnav li.icon {
float: right;
display: inline-block;
}
}
#media screen and (max-width:680px) {
ul.topnav.responsive {
position: relative;
}
ul.topnav.responsive li.icon {
position: absolute;
right: 0;
top: 0;
}
ul.topnav.responsive li {
float: none;
display: inline;
}
ul.topnav.responsive li a {
display: block;
text-align: left;
}
}
/* end responsive navbar */
#media screen and (max-width:680px) {
.nomobile {
display: none;
}
.yesmobile {
width: 100%;
}
}
.header-img {
min-height: 300px;
background-image: url(http://thirdshiftdesigns.net/images/cabheader2.png);
background-repeat: no-repeat;
background-size: auto 100%;
background-position: center top;
/*padding: 40px; (If don't want to set min-height or some image content is there) */
}
.end-header {
width: 100%;
height: 15px;
background-color: #428cd9;
}
<body>
<div class="col-12">
<ul class="topnav" id="myTopnav">
<li>Logo</li>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li class="icon">
☰</li>
</ul>
<div class="row">
<div class="col-12">
<div class="header-img">
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="end-header">
</div>
</div>
</div>
</div>
<!-- end header -->
<!-- footer -->
<div class="col-12">
</div>
</body>

If you inspect the element, you can find that the unwanted space is because of the following style which applies padding to all elements with the class value containing col-.
[class*="col-"] {
float: left;
padding: 15px;
}
Override the style and you can get rid of the unwanted space. Note that this will set the padding to 0 for all the classes whose value contains col-.
[class*="col-"] {
padding: 0;
}
Or you can only override the padding of .col-12 which will apply padding of 0 to .col-12 while the other classes containing col- will still get a padding of 15px.
.col-12 {
padding: 0;
}

You're wrapping many elements in a .col-12 class. All .col- elements are set in your CSS to contain 15px of padding around the edges. Here's a screenshot from inspecting the page in Chrome Developer Tools where you can see the element highlighted:

You need to set padding to 0 on the col-12 element.
change the following in your CSS
.col-12 {
width: 100%;
}
to
.col-12 {
width: 100%;
padding: 0px;
}
fiddle example here

Closing of the Drop Down Menu out of the angle Icon

I have a code java script code used for joomla as hover drop down menu, now i would like to change the code to click but when i click on the down-angle it open the menu but when closing i have to click on the same angle otherwise it is not closing the menu, how to change the javascript code to click anywhere in the body of the website to get that closed.
<script type="text/javascript">
jQuery(document).ready(function($) {
var ua = navigator.userAgent,
_device = (ua.match(/iPad/i)||ua.match(/iPhone/i)||ua.match(/iPod/i)) ? "smartphone" : "desktop";
if(_device == "desktop") {
$(".mod-languages").bind('hover', function() {
$(this).children(".dropdown-toggle").addClass(function(){
if($(this).hasClass("open")){
$(this).removeClass("open");
return "";
}
return "open";
});
$(this).children(".dropdown-menu").slideToggle();
});
}else{
$('.mod-languages .dropdown-toggle').bind('touchstart', function(){
$('.mod-languages .dropdown-menu').toggle();
});
}
});
</script>
/* =============== LANGUAGE - DROPDOWN MENU =============== */
.mod-languages {
display: inline-block;
float: right;
font-family: Roboto;
font-size: 12px;
margin-left: 0;
margin-right: 10px;
margin-top: -5.5px;
padding: 0 14px;
position: relative;
}
.mod-languages.open {
background: #fff none repeat scroll 0 0 !important;
}
.mod-languages a.dropdown-toggle {
color: #4d4d4d;
display: block;
line-height: 46px;
}
.mod-languages a.dropdown-toggle.open {
background: #fff none repeat scroll 0 0 !important;
}
.mod-languages ul.dropdown-menu {
background: #1F4897 none repeat scroll 0 0;
border: medium none;
border-radius: 0;
box-shadow: none;
max-height: 85px;
min-width: 100%;
padding: 0 !important;
}
.mod-languages ul.dropdown-menu li {
margin: 0;
text-align: center;
}
.mod-languages ul.dropdown-menu li a {
background: #fff;
font-size: 12px;
padding: 4px 15px;
}
.mod-languages ul.dropdown-menu li a img {
float: left;
margin-right: 9px;
margin-top: 4px;
}
.mod-languages ul.dropdown-menu li a:hover {
background: rgba(81, 99, 175, 0.6) none repeat scroll 0 0;
}
.mod-languages:hover {
background-color: #fff;
}
.mod-languages:hover a.dropdown-toggle {
color: #4d4d4d;
}
.fa-lng {
transform: translate(10px, 0px) !important;
}

Try to add this, or use a different element with the dropdown-toggle. (maybe a button)
.mod-languages a.dropdown-toggle {
width: 100%;
text-align: center;
}
or
.mod-languages ul.dropdown-menu li.dropdown-toggle {
/* Enter your css here */
}

Try the below codes. I hope it works fine.
$(document).click(function(e){
if($(e.target).closest('.dropdown-toggle').length != 0)
return false;
$('.dropdown-toggle').hide();
});

Trouble with chat layout

I am trying to replicate a chat layout on a site I am working on. I was able to create the chat bubble and get the content in pretty much the right spot, I am just having trouble getting it exactly how I want. There are only a few tiny things I am having trouble with. I can't figure out how to get the triangle on the side of the bubble's border to be as thin as the rest of the bubble, as well as making it lower and smaller. I'm having trouble with positioning the sign in image a little lower like in the image of what I need it to look like. And lastly the "Sign In to Comment" needs to be a little to the left of the image. If anyone could shed any light on any of these things, it would be super appreciated!
Currently:
What I am trying to achieve:
As you can see I am very close! just a few tiny things giving me trouble.
HTML:
<div class="sign-in">
<div class="cell one">
<p class="triangle-border right blue">Join the Conversation</p>
</div>
<div class="cell two">
<img class="sign-in-img" src="<?php bloginfo('stylesheet_directory'); ?>/images/sign-in.png" />
</div>
</div>
<span class="si">Sign In to Comment</span>
CSS:
.triangle-border {
position:relative;
padding:15px;
margin:1em 0 .5em;
border:1px solid #5a8f00;
color:#333;
background:#fff;
/* css3 */
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
min-width: 90%;
max-width: 90%;
background-color: #E0F6F2;
}
.triangle-border.blue {
background-color: #CDE5F7;
border:1px solid #3A7DBA;
}
.triangle-border.right {
margin-right:30px;
}
.triangle-border:before {
content:"";
position:absolute;
bottom:-20px; /* value = - border-top-width - border-bottom-width */
left:40px; /* controls horizontal position */
border-width:20px 20px 0;
border-style:solid;
border-color:#5a8f00 transparent;
/* reduce the damage in FF3.0 */
display:block;
width:0;
}
/* creates the smaller triangle */
.triangle-border:after {
content:"";
position:absolute;
bottom:-13px; /* value = - border-top-width - border-bottom-width */
left:47px; /* value = (:before left) + (:before border-left) - (:after border-left) */
border-width:13px 13px 0;
border-style:solid;
border-color:#fff transparent;
/* reduce the damage in FF3.0 */
display:block;
width:0;
}
/* creates the larger triangle */
.triangle-border.right:before {
top:10px; /* controls vertical position */
bottom:auto;
left:auto;
right:-30px; /* value = - border-left-width - border-right-width */
border-width:15px 0 15px 30px;
border-color:transparent #3A7DBA;
}
/* creates the smaller triangle */
.triangle-border.right:after {
top:16px; /* value = (:before top) + (:before border-top) - (:after border-top) */
bottom:auto;
left:auto;
right:-21px; /* value = - border-left-width - border-right-width */
border-width:9px 0 9px 21px;
border-color:transparent #fff;
}
.pagecontent .cols .col.two .sign-in {
table-layout: fixed;
display: table;
outline: none;
}
.pagecontent .cols .col.two .sign-in .cell {
display: table-cell;
margin: 5px;
height: 100%;
}
.pagecontent .cols .col.two .sign-in .cell.one {
width: 85%;
}
.pagecontent .cols .col.two .sign-in .cell.two {
padding-left: 2%;
width: 15%;
}
.pagecontent span.si {
font-size: .8em;
color: #808C8D;
}

Here is one way to do it:
<div class="wrapper">
<p class="talk-bubble">
talk bubble talk bubble talk bubble talk bubble talk bubble talk bubble talk bubble talk bubble talk bubble talk bubble talk bubble talk bubble talk bubble talk bubble
</p>
<p class="sign-in">
Sign In to Comment
</p>
<img src="your/image.png" />
</div>
CSS:
div.wrapper {
position: relative;
padding-bottom: 0px;
background-color: #ffffff;
z-index: -2;
}
div.wrapper img {
position: absolute;
bottom: 0;
right: 0;
border: 1px solid black;
width: 40px;
height: 40px;
}
.sign-in {
text-align: right;
margin: 0;
margin-right: 50px;
padding: 0;
}
p.talk-bubble {
border: 1px solid #3A7DBA;
padding: 15px;
background-color: #CDE5F7;
position: relative;
margin-right: 60px;
}
p.talk-bubble:before,
p.talk-bubble:after {
box-sizing: border-box;
padding: 0;
content: '';
width: 20px;
height: 20px;
display: block;
position: absolute;
border: 20px solid transparent;
}
p.talk-bubble:before {
z-index: -1;
border-bottom: 20px solid #3A7DBA;
right: -12px;
bottom: -1px;
}
p.talk-bubble:after {
border-bottom: 20px solid #CDE5F7;
right: -10px;
bottom: 0px;
}
https://jsfiddle.net/mcgraphix/zLx5967t/

Check this out:
.triangle-border {
position:relative;
padding:15px;
margin:1em 0 .5em;
border:1px solid #5a8f00;
color:#333;
background:#fff;
/* css3 */
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
min-width: 90%;
max-width: 90%;
background-color: #E0F6F2;
}
.triangle-border.blue {
background-color: #CDE5F7;
border:1px solid #3A7DBA;
}
.triangle-border.right {
margin-right:30px;
}
.triangle-border:before {
content:"";
position:absolute;
bottom:-20px; /* value = - border-top-width - border-bottom-width */
left:40px; /* controls horizontal position */
border-width:20px 20px 0;
border-style:solid;
border-color:#5a8f00 transparent;
/* reduce the damage in FF3.0 */
display:block;
width:0;
}
/* creates the smaller triangle */
.triangle-border:after {
content:"";
position:absolute;
bottom:-13px; /* value = - border-top-width - border-bottom-width */
left:47px; /* value = (:before left) + (:before border-left) - (:after border-left) */
border-width:13px 13px 0;
border-style:solid;
border-color:#fff transparent;
/* reduce the damage in FF3.0 */
display:block;
width:0;
}
/* creates the larger triangle */
.triangle-border.right:before {
top:25px; /* controls vertical position */
bottom:auto;
left:auto;
right:-15px; /* value = - border-left-width - border-right-width */
border-width:5px 0 5px 15px;
border-color:transparent #3A7DBA;
}
/* creates the smaller triangle */
.triangle-border.right:after {
top: 27px;
bottom: auto;
left: auto;
right: -13px;
border-width: 3px 0 3px 13px;
border-color: transparent #ccf;
}
.pagecontent .cols .col.two .sign-in {
table-layout: fixed;
display: table;
outline: none;
}
.pagecontent .cols .col.two .sign-in .cell {
display: table-cell;
margin: 5px;
height: 100%;
}
.pagecontent .cols .col.two .sign-in .cell.one {
width: 85%;
}
.pagecontent .cols .col.two .sign-in .cell.two {
padding-left: 2%;
width: 15%;
}
.pagecontent span.si {
font-size: .8em;
color: #808C8D;
}
<div class="sign-in">
<div class="cell one">
<p class="triangle-border right blue">Join the Conversation</p>
</div>
</div>

Trying to animate an element with onClick using JavaScript [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I want this div to animate on click using JavaScript.
<div class="Designs">
<p>Designs</p>
<div class="Thumbnails" data-animation="animated pulse">
<img src="images/Halloween/bat_sm.png" width="140" height="82"/>
</div>
</div> <!-- End Designs -->
Please look at my site to see example
http://mast.salemstate.edu/itc18244/Portfolio/
$('.Thumbnails a').on('click', function(e){
var parent = $(this).parent();
var animationName = parent.data('animation') || 'animated pulse';
parent.addClass(animationName).one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
parent.removeClass(animationName);
});

Yes, document ready was missing. See the working demo below.
You could also add data-animation to your div with class .Thumbnail, so you can easily modify the animation just with your HTML markup. See different animation for "Designs".
You can find it also at jsFiddle here.
$(function () {
var animationend = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
$('.Thumbnails').on('click', function () {
var $this = $(this);
var animationName = $this.data('animation') || 'animated bounce' ;
$this.addClass(animationName).one(animationend, function () {;
$this.removeClass(animationName);
});
});
});
#charset"UTF-8";
#container {
max-width: 960px;
margin-right: auto;
margin-left: auto;
}
body {
/*background-image: url(images/bg.png);*/
background-repeat: repeat-x;
}
name, h3 {
color: black;
padding-left: 5px;
margin: 0;
}
name {
font-size: 51px;
}
h3 {
margin-bottom: 2em;
}
h2 {
margin-top: 30px;
margin-bottom: 5px;
}
p {
font-size: 16px;
margin: 0 0 0 0;
max-width: 960px;
}
#float {
float: left;
padding-left: 10px;
}
img {
min-width: 246px;
float: left;
margin-right: 2em;
margin-top: 6px;
margin-left: 1em;
}
/*-----------------------*/
/* Navigation */
.nav {
height:auto;
margin: 0 .3em 0 0;
display:inline;
display:inline-block;
}
/* specifying the nav list horizontal */
.nav li {
display: inline;
font-size:16px;
padding: 0 0 0 15.8em;
}
.nav a {
text-decoration: none;
display: inline-block;
}
/* ---------------------------- */
/* Designs_Drawings Div ------ */
#content .Designs_Drawings {
width: 680px;
height: 160px;
margin: 8em auto 3em auto;
}
#content .Designs {
background-color: #CCC;
border-style: solid;
border-width: 2px;
width: 230px;
height: 150px;
border-radius: 1em;
-ms-transform: rotate(-10deg);
/* IE 9 */
-webkit-transform: rotate(-10deg);
/* Chrome, Safari, Opera */
transform: rotate(-10deg);
float: left;
display: inline-block;
}
#content .Designs p {
text-align: right;
/* Top,Right,Down,Left */
margin: .5em 1em 0 0;
}
#content .Designs .Thumbnails {
width: 143px;
height: 95px;
background-color: blue;
/* Give thumb div Border/position */
border-style: solid;
border-width: 1px;
/*---------------------*/
/* Top,Right,Down,Left */
margin: .5em 0 0 1em;
/* Curves div Corners */
border-radius: 1em;
}
/* Drawings Div ------ */
#content .Drawings {
background-color: #CCC;
border-style: solid;
border-width: 2px;
width: 230px;
height: 150px;
border-radius: 1em;
-ms-transform: rotate(-350deg);
/* IE 9 */
-webkit-transform: rotate(-350deg);
/* Chrome, Safari, Opera */
transform: rotate(-350deg);
float: right;
display: inline-block;
}
#content .Drawings p {
text-align: right;
/* Top,Right,Down,Left */
margin: .5em 1em 0 0;
}
#content .Drawings .Thumbnails {
width: 143px;
height: 95px;
/* Give div Border */
border-style: solid;
border-width: 1px;
margin: .5em 0 0 1em;
/* Curves div Corners */
border-radius: 1em;
}
/* End Designs_Drawings Div */
/* -------------------------*/
/* Photography_WebSites Div */
#content .Photography_WebSites {
width: 680px;
height: 160px;
margin: 0 auto 4em auto;
}
/* Photography Div ----- */
#content .Photography {
background-color: #CCC;
border-style: solid;
border-width: 2px;
width: 230px;
height: 150px;
border-radius: 1em;
-ms-transform: rotate(350deg);
/* IE 9 */
-webkit-transform: rotate(350deg);
/* Chrome, Safari, Opera */
transform: rotate(350deg);
float: right;
display: inline-block;
}
#content .Photography p {
text-align: right;
/* Top,Right,Down,Left */
margin: .5em 1em 0 0;
}
#content .Photography .Thumbnails {
width: 143px;
height: 95px;
/* Give thumb div Border/position */
border-style: solid;
border-width: 1px;
/*---------------------*/
/* Top,Right,Down,Left */
margin: .5em 0 0 1em;
/* Curves div Corners */
border-radius: 1em;
}
/* Web Sites Div ------ */
#content .WebSites {
background-color: #CCC;
border-style: solid;
border-width: 2px;
width: 230px;
height: 150px;
border-radius: 1em;
-ms-transform: rotate(10deg);
/* IE 9 */
-webkit-transform: rotate(10deg);
/* Chrome, Safari, Opera */
transform: rotate(10deg);
float: left;
display: inline-block;
}
#content .WebSites p {
text-align: right;
/* Top,Right,Down,Left */
margin: .5em 1em 0 0;
}
#content .WebSites .Thumbnails {
width: 143px;
height: 95px;
/* Give div Border */
border-style: solid;
border-width: 1px;
margin: .5em 0 0 1em;
/* Curves div Corners */
border-radius: 1em;
}
/* --------------------*/
/* Big Box Div --------*/
#content .big_box {
background-color: #CCC;
margin: 1em auto 4em auto;
width: 690px;
height: 483px;
position:relative;
/* Curves div Corners */
border-radius: 1em;
/* Give div Border */
border-style: solid;
border-width: 1px;
}
#content .big_box img {
position:absolute;
top:0;
left:0;
width:100%;
height:auto;
}
/* ------ */
/* Footer */
.footer {
height: auto;
margin: 0;
display:inline;
display:inline-block;
width: 100%;
}
.footer .info {
margin: 0;
text-align: center;
}
.footer .info li + li::before {
content:" | ";
display: inline-block;
margin-left: .5em;
margin-right: .5em;
}
/* specifying the nav list horizontal */
.footer li {
display: inline;
font-size:12px;
text-align: center;
}
.footer a {
text-decoration: none;
display: inline-block;
}
.footer .info img {
width: 8px;
height: 8px;
}
<link href="http://cdn.jsdelivr.net/animatecss/3.2.0/animate.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div id="content">
<div class="Designs_Drawings">
<div class="Designs">
<p>Designs</p>
<div class="Thumbnails" data-animation="animated pulse">
<!-- <img src="images/Halloween/bat_sm.png" />
<img src="images/Halloween/frankenstein_sm.png" /> -->
</div>
</div>
<!-- End Designs -->
<div class="Drawings">
<p>Drawings</p>
<div class="Thumbnails" data-animation="animated bounce"></div>
</div>
<!-- End Drawings -->
</div>
<!-- End Designs_Drawings -->
<div class="Photography_WebSites">
<div class="Photography">
<p>Photography</p>
<div class="Thumbnails" data-animation="animated bounce"></div>
</div>
<!-- End Photography -->
<div class="WebSites">
<p>Web Sites</p>
<div class="Thumbnails" data-animation="animated bounce"></div>
</div>
<!-- End WebSites -->
</div>
<!-- End Photography_WebSites -->
</div>
</div>

You'll need to wait until the document is ready. Wrap your code up like so:
<script>
$(function(){
var animationName = 'animated bounce';
var animationend = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
$('.Thumbnails').on('click', function() {
$('.Thumbnails').addClass(animationName).one(animationend, function () {;
$(this).removeClass(animationName);
});
});
});
</script>
You also had a JavaScript error because you were missing a }); to close the callback.

Categories