add element on different size media using bootstrap

Hi blogger, this time i will show you about using css and bootrap responsive attibute to fix some space and make good looking view in various devices. before this, i have some "no space" problem, when my design shown in screen, everything looked good, but it was not in phone, so ... i google about it and found nice attribut css to solve it, by using "display" attribute. here the code.

/* visible div on extra small device or phone */
@media (max-width: 767px) {
/* show div */
 div.extra-div{
  padding:25px 0;
  display:block;
 }
}
@media (min-width: 768px) {
/* hidden div by "display" property will not add a space, if use "visibility" property it will add space*/
 div.extra-div{
  display:none;
 }
}

other way, we can use bootstrap responsive code, here the css code

div.extra-div{
     padding:25px 0;
}

and this is the html