content logo
Bootstrap Grids: Bootstrap Animating Lists and Hiding Column

There might be unnecessary columns which have to be hidden and appear when it is needed. So it is wise to do this job with the aid of bootstrap and create an animation. In the following example, first it shows you how the hiding column works. If you need to see the animating lists again, just click on the button.

#Bootstrap Animating Grids #Bootstrap List Animation #Bootstrap Hiding Columns
<!-- this script got from www.frontendfreecode.com -->
<header class="tg-header"> <h1 class="tg-h1">Animate bootstrap columns</h1> <h2 class="tg-h2">Wait a moment, there is a quick animation</h2> </header> <div class="main"> <div id="btn-toggle" class="btn btn-primary">Show / Hide Filters</div> <div class="row main-row"> <div class="col-4 col-menu"> <div class="menu-wrap"> <div class="menu"> <h6 class="filter-title">Filters</h6> <div class="input-group mb-3"> <div class="input-group-prepend"> <div class="input-group-text"> <input type="checkbox" aria-label="Checkbox for following text input"> </div> </div> <div class="form-control">Filter 1</div> </div> <div class="input-group mb-3"> <div class="input-group-prepend"> <div class="input-group-text"> <input type="checkbox" aria-label="Checkbox for following text input"> </div> </div> <div class="form-control">Filter 2</div> </div> <div class="input-group mb-3"> <div class="input-group-prepend"> <div class="input-group-text"> <input type="checkbox" aria-label="Checkbox for following text input"> </div> </div> <div class="form-control">Filter 3</div> </div> <div class="input-group mb-3"> <div class="input-group-prepend"> <div class="input-group-text"> <input type="checkbox" aria-label="Checkbox for following text input"> </div> </div> <div class="form-control">(Those filters don't work, it's just a pretext to have a credible interface)</div> </div> </div> </div> </div> <div class="col-8 col-cards"> <div class="row row-cards"> <div class="col-6 col-card"> <div class="col-card__content"> <div class="card"> <img class="card-img-top" src="https://placeimg.com/300/100/any" alt="Card image cap"> <div class="card-body"> <h5 class="card-title">No Jquery</h5> <p class="card-text">It's only pure Javascript.</p> </div> </div> </div> </div> <div class="col-6 col-card"> <div class="col-card__content"> <div class="card"> <img class="card-img-top" src="https://placeimg.com/300/100/tech" alt="Card image cap"> <div class="card-body"> <h5 class="card-title">CSS Animations</h5> <p class="card-text">it uses CSS animations</p> </div> </div> </div> </div> <div class="col-6 col-card"> <div class="col-card__content"> <div class="card"> <img class="card-img-top" src="https://placeimg.com/300/100/animals" alt="Card image cap"> <div class="card-body"> <h5 class="card-title">Just an idea</h5> <p class="card-text">This is an example!</p> </div> </div> </div> </div> <div class="col-6 col-card"> <div class="col-card__content"> <div class="card"> <img class="card-img-top" src="https://placeimg.com/300/100/architecture" alt="Card image cap"> <div class="card-body"> <h5 class="card-title">Some issues</h5> <p class="card-text">Scroll while moving, you'll see an issue.</p> </div> </div> </div> </div> <div class="col-6 col-card"> <div class="col-card__content"> <div class="card"> <img class="card-img-top" src="https://placeimg.com/300/100/nature" alt="Card image cap"> <div class="card-body"> <h5 class="card-title">Card title 4</h5> <p class="card-text">This is a long paragraph. Write whatever you want!</p> </div> </div> </div> </div> <div class="col-6 col-card"> <div class="col-card__content"> <div class="card"> <img class="card-img-top" src="https://placeimg.com/300/100/people" alt="Card image cap"> <div class="card-body"> <h5 class="card-title">Card title 5</h5> <p class="card-text">This is a long paragraph. Write whatever you want!</p> </div> </div> </div> </div> </div> </div> </div> </div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://www.frontendfreecode.com">Frontend Code</a>
* {
  box-sizing: border-box;
}

body {
  color: #333 !important;
  font-family: "open sans";
  padding: 20px;
}
body.no-scroll {
  overflow: hidden;
}

.main {
  padding-left: 40px;
  padding-right: 40px;
}

.col-0 {
  -webkit-box-flex: 0;
          flex: 0 0 0%;
  max-width: 0%;
}

.filter-title {
  text-transform: uppercase;
  margin-bottom: 20px;
}

.main-row.no-menu .menu {
  -webkit-transform: translate3d(-300px, 0, 0);
          transform: translate3d(-300px, 0, 0);
}

.col-menu .menu-wrap {
  position: relative;
}
.col-menu .menu {
  -webkit-transition: 1s;
  transition: 1s;
  position: absolute;
  width: 200px;
  left: 0;
  top: 0;
}

.row-cards.is-moving .card.clone {
  -webkit-transition: 1s;
  transition: 1s;
}
.row-cards.is-moving .card:nth-child(1) {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.row-cards.is-moving .card:nth-child(2) {
  opacity: 0;
}

.col-card__content {
  position: relative;
}

.card {
  padding: 0;
  border: none;
  margin-bottom: 50px;
  box-shadow: 0 2px 14px 0 rgba(47, 60, 83, 0.16);
}
.card .card-body {
  padding: 30px 20px;
}
.card .card-title {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
}
.card .card-text {
  font-size: 12px;
  line-height: 1.4;
}
.card .card-list {
  font-size: 12px;
  padding-left: 15px;
}

#btn-toggle {
  margin: 0 auto;
  margin-bottom: 20px;
  width: 200px;
  display: block;
  background: #40bff6;
  background: -webkit-gradient(linear, left top, right top, from(#40bff6), to(#6e66e0));
  background: linear-gradient(90deg, #40bff6 0%, #6e66e0 100%);
  border: none;
  font-size: 14px;
  padding: 15px;
  font-weight: 300;
  box-shadow: 0 2px 14px 0 rgba(47, 60, 83, 0.3);
}

html, body {
  padding: 0;
}

body {
  background-color: #f5f6f7;
}

header.tg-header {
  padding: 40px;
  margin-bottom: 40px;
  background: #f75964;
  background: -webkit-gradient(linear, left top, right top, from(#f75964), to(#f99468));
  background: linear-gradient(90deg, #f75964 0%, #f99468 100%);
  color: #fff;
}

h1.tg-h1 {
  text-align: center;
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  font-weight: bold;
}

h2.tg-h2 {
  text-align: center;
  font-size: 12px;
  letter-spacing: 1.2px;
  font-weight: 300;
}

hr.tg-hr {
  margin: 0 auto;
  margin-top: 30px;
  margin-bottom: 30px;
}

footer.tg-footer {
  text-align: center;
  padding-bottom: 50px;
}

.tg-link {
  display: inline-block;
  margin: 0 20px;
  text-align: center;
  color: #278fb2;
}
document.addEventListener('DOMContentLoaded', function () {
  let btnToggle = document.querySelector('#btn-toggle');
  let rowCards = document.querySelector('.row-cards');
  let mainRow = document.querySelector('.main-row');
  let colCardAll = document.querySelectorAll('.col-card');
  let cardAll = document.querySelectorAll('.card');

  btnToggle.addEventListener('click', function () {
    if (!rowCards.classList.contains('is-moving')) {
      mainRow.classList.toggle("no-menu");

      for (i = 0; i < cardAll.length; i++) {
        let clone = cardAll[i].cloneNode(true);
        clone.classList.add("clone");
        cardAll[i].parentElement.insertBefore(clone, cardAll[i]);

        let top = clone.getBoundingClientRect().top;
        let left = clone.getBoundingClientRect().left;
        let width = clone.getBoundingClientRect().width;
        let height = clone.getBoundingClientRect().height;


        clone.style.position = 'fixed';
        clone.style.top = top + 'px';
        clone.style.left = left + 'px';
        clone.style.width = width + 'px';
        clone.style.height = height + 'px';
      }

      document.querySelector('.col-menu').classList.toggle('col-0');
      document.querySelector('.col-menu').classList.toggle('col-4');
      document.querySelector('.col-cards').classList.toggle('col-8');
      document.querySelector('.col-cards').classList.toggle('col-12');
      for (i = 0; i < colCardAll.length; i++) {
        colCardAll[i].classList.toggle('col-4');
        colCardAll[i].classList.toggle('col-6');
      }
      rowCards.classList.add('is-moving');

      let cardCloneAll = document.querySelectorAll('.card.clone');
      for (i = 0; i < cardCloneAll.length; i++) {
        let top = cardAll[i].getBoundingClientRect().top;
        let left = cardAll[i].getBoundingClientRect().left;
        let width = cardAll[i].getBoundingClientRect().width;
        let height = cardAll[i].getBoundingClientRect().height;

        cardCloneAll[i].style.top = top + 'px';
        cardCloneAll[i].style.left = left + 'px';
        cardCloneAll[i].style.width = width + 'px';
        cardCloneAll[i].style.height = height + 'px';
      }

      setTimeout(function () {
        rowCards.classList.remove('is-moving');
        for (i = 0; i < cardCloneAll.length; i++) {
          cardCloneAll[i].remove();
        }
      }, 1000);

    }

  });


  //simulate click for thumbnail 
  setTimeout(function () {
    document.getElementById('btn-toggle').click();
  }, 500);
  setTimeout(function () {
    document.getElementById('btn-toggle').click();
  }, 2500);
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700'>
<link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css'>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- this script got from www.frontendfreecode.com -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700'>
<link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css'>
<style>
* {
  box-sizing: border-box;
}

body {
  color: #333 !important;
  font-family: "open sans";
  padding: 20px;
}
body.no-scroll {
  overflow: hidden;
}

.main {
  padding-left: 40px;
  padding-right: 40px;
}

.col-0 {
  -webkit-box-flex: 0;
          flex: 0 0 0%;
  max-width: 0%;
}

.filter-title {
  text-transform: uppercase;
  margin-bottom: 20px;
}

.main-row.no-menu .menu {
  -webkit-transform: translate3d(-300px, 0, 0);
          transform: translate3d(-300px, 0, 0);
}

.col-menu .menu-wrap {
  position: relative;
}
.col-menu .menu {
  -webkit-transition: 1s;
  transition: 1s;
  position: absolute;
  width: 200px;
  left: 0;
  top: 0;
}

.row-cards.is-moving .card.clone {
  -webkit-transition: 1s;
  transition: 1s;
}
.row-cards.is-moving .card:nth-child(1) {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.row-cards.is-moving .card:nth-child(2) {
  opacity: 0;
}

.col-card__content {
  position: relative;
}

.card {
  padding: 0;
  border: none;
  margin-bottom: 50px;
  box-shadow: 0 2px 14px 0 rgba(47, 60, 83, 0.16);
}
.card .card-body {
  padding: 30px 20px;
}
.card .card-title {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
}
.card .card-text {
  font-size: 12px;
  line-height: 1.4;
}
.card .card-list {
  font-size: 12px;
  padding-left: 15px;
}

#btn-toggle {
  margin: 0 auto;
  margin-bottom: 20px;
  width: 200px;
  display: block;
  background: #40bff6;
  background: -webkit-gradient(linear, left top, right top, from(#40bff6), to(#6e66e0));
  background: linear-gradient(90deg, #40bff6 0%, #6e66e0 100%);
  border: none;
  font-size: 14px;
  padding: 15px;
  font-weight: 300;
  box-shadow: 0 2px 14px 0 rgba(47, 60, 83, 0.3);
}

html, body {
  padding: 0;
}

body {
  background-color: #f5f6f7;
}

header.tg-header {
  padding: 40px;
  margin-bottom: 40px;
  background: #f75964;
  background: -webkit-gradient(linear, left top, right top, from(#f75964), to(#f99468));
  background: linear-gradient(90deg, #f75964 0%, #f99468 100%);
  color: #fff;
}

h1.tg-h1 {
  text-align: center;
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  font-weight: bold;
}

h2.tg-h2 {
  text-align: center;
  font-size: 12px;
  letter-spacing: 1.2px;
  font-weight: 300;
}

hr.tg-hr {
  margin: 0 auto;
  margin-top: 30px;
  margin-bottom: 30px;
}

footer.tg-footer {
  text-align: center;
  padding-bottom: 50px;
}

.tg-link {
  display: inline-block;
  margin: 0 20px;
  text-align: center;
  color: #278fb2;
}
</style>

</head>
<body>
  <header class="tg-header">
<h1 class="tg-h1">Animate bootstrap columns</h1>
<h2 class="tg-h2">Wait a moment, there is a quick animation</h2>
</header>

<div class="main">
		<div id="btn-toggle" class="btn btn-primary">Show / Hide Filters</div>
		<div class="row main-row">
			<div class="col-4 col-menu">
				<div class="menu-wrap">
					<div class="menu">
						<h6 class="filter-title">Filters</h6>
						<div class="input-group mb-3">
							<div class="input-group-prepend">
								<div class="input-group-text">
									<input type="checkbox" aria-label="Checkbox for following text input">
								</div>
							</div>
							<div class="form-control">Filter 1</div>
						</div>
						<div class="input-group mb-3">
							<div class="input-group-prepend">
								<div class="input-group-text">
									<input type="checkbox" aria-label="Checkbox for following text input">
								</div>
							</div>
							<div class="form-control">Filter 2</div>
						</div>
						<div class="input-group mb-3">
							<div class="input-group-prepend">
								<div class="input-group-text">
									<input type="checkbox" aria-label="Checkbox for following text input">
								</div>
							</div>
							<div class="form-control">Filter 3</div>
						</div>
						<div class="input-group mb-3">
							<div class="input-group-prepend">
								<div class="input-group-text">
									<input type="checkbox" aria-label="Checkbox for following text input">
								</div>
							</div>
							<div class="form-control">(Those filters don't work, it's just a pretext to have a credible interface)</div>
						</div>
					</div>
				</div>
			</div>
			<div class="col-8 col-cards">
				<div class="row row-cards">
					<div class="col-6 col-card">
						<div class="col-card__content">
							<div class="card">
								<img class="card-img-top" src="https://placeimg.com/300/100/any" alt="Card image cap">
								<div class="card-body">
									<h5 class="card-title">No Jquery</h5>
									<p class="card-text">It's only pure Javascript.</p>
								</div>
							</div>
						</div>
					</div>
					<div class="col-6 col-card">
						<div class="col-card__content">
							<div class="card">
								<img class="card-img-top" src="https://placeimg.com/300/100/tech" alt="Card image cap">
								<div class="card-body">
									<h5 class="card-title">CSS Animations</h5>
									<p class="card-text">it uses CSS animations</p>
								</div>
							</div>
						</div>
					</div>
					<div class="col-6 col-card">
						<div class="col-card__content">
							<div class="card">
								<img class="card-img-top" src="https://placeimg.com/300/100/animals" alt="Card image cap">
								<div class="card-body">
									<h5 class="card-title">Just an idea</h5>
									<p class="card-text">This is an example!</p>
								</div>
							</div>
						</div>
					</div>
					<div class="col-6 col-card">
						<div class="col-card__content">
							<div class="card">
								<img class="card-img-top" src="https://placeimg.com/300/100/architecture" alt="Card image cap">
								<div class="card-body">
									<h5 class="card-title">Some issues</h5>
									<p class="card-text">Scroll while moving, you'll see an issue.</p>
								</div>
							</div>
						</div>
					</div>
					<div class="col-6 col-card">
						<div class="col-card__content">
							<div class="card">
								<img class="card-img-top" src="https://placeimg.com/300/100/nature" alt="Card image cap">
								<div class="card-body">
									<h5 class="card-title">Card title 4</h5>
									<p class="card-text">This is a long paragraph. Write whatever you want!</p>
								</div>
							</div>
						</div>
					</div>
					<div class="col-6 col-card">
						<div class="col-card__content">
							<div class="card">
								<img class="card-img-top" src="https://placeimg.com/300/100/people" alt="Card image cap">
								<div class="card-body">
									<h5 class="card-title">Card title 5</h5>
									<p class="card-text">This is a long paragraph. Write whatever you want!</p>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
<div id="bcl"><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://www.frontendfreecode.com">Frontend Code</a></div>
<script>
document.addEventListener('DOMContentLoaded', function () {
  let btnToggle = document.querySelector('#btn-toggle');
  let rowCards = document.querySelector('.row-cards');
  let mainRow = document.querySelector('.main-row');
  let colCardAll = document.querySelectorAll('.col-card');
  let cardAll = document.querySelectorAll('.card');

  btnToggle.addEventListener('click', function () {
    if (!rowCards.classList.contains('is-moving')) {
      mainRow.classList.toggle("no-menu");

      for (i = 0; i < cardAll.length; i++) {
        let clone = cardAll[i].cloneNode(true);
        clone.classList.add("clone");
        cardAll[i].parentElement.insertBefore(clone, cardAll[i]);

        let top = clone.getBoundingClientRect().top;
        let left = clone.getBoundingClientRect().left;
        let width = clone.getBoundingClientRect().width;
        let height = clone.getBoundingClientRect().height;


        clone.style.position = 'fixed';
        clone.style.top = top + 'px';
        clone.style.left = left + 'px';
        clone.style.width = width + 'px';
        clone.style.height = height + 'px';
      }

      document.querySelector('.col-menu').classList.toggle('col-0');
      document.querySelector('.col-menu').classList.toggle('col-4');
      document.querySelector('.col-cards').classList.toggle('col-8');
      document.querySelector('.col-cards').classList.toggle('col-12');
      for (i = 0; i < colCardAll.length; i++) {
        colCardAll[i].classList.toggle('col-4');
        colCardAll[i].classList.toggle('col-6');
      }
      rowCards.classList.add('is-moving');

      let cardCloneAll = document.querySelectorAll('.card.clone');
      for (i = 0; i < cardCloneAll.length; i++) {
        let top = cardAll[i].getBoundingClientRect().top;
        let left = cardAll[i].getBoundingClientRect().left;
        let width = cardAll[i].getBoundingClientRect().width;
        let height = cardAll[i].getBoundingClientRect().height;

        cardCloneAll[i].style.top = top + 'px';
        cardCloneAll[i].style.left = left + 'px';
        cardCloneAll[i].style.width = width + 'px';
        cardCloneAll[i].style.height = height + 'px';
      }

      setTimeout(function () {
        rowCards.classList.remove('is-moving');
        for (i = 0; i < cardCloneAll.length; i++) {
          cardCloneAll[i].remove();
        }
      }, 1000);

    }

  });


  //simulate click for thumbnail 
  setTimeout(function () {
    document.getElementById('btn-toggle').click();
  }, 500);
  setTimeout(function () {
    document.getElementById('btn-toggle').click();
  }, 2500);
});
</script>

</body>
</html>
Preview