javascript - How to increase the vertical height and add space between contents in div scroll in bootstrap -


i trying add space between each div , circle should show in full size.

html :

<body> <h1 class="page-header">horizontal scroll questions</h1> <div class="container-fluid" style="overflow-x:scroll;white-space: nowrap;overflow-y:hidden ;">      <div class="col-sm-3 c">         <h6>2</h6>      </div>     <div class="col-sm-3 c">         <h6>3</h6>      </div>     <div class="col-sm-3 c">         <h6>4</h6>      </div>     <div class="col-sm-3 c">         <h6>5</h6>      </div>       <div class="col-sm-3 c">         <h6>5</h6>      </div>       <div class="col-sm-3 c">         <h6>5</h6>      </div>       <div class="col-sm-3 c">         <h6> 5</h6>      </div> </div> <!-- jquery (necessary bootstrap's javascript plugins) --> <script src="js/jquery.js"></script> <!-- include compiled plugins (below), or include individual files needed --> <script src="js/bootstrap.min.js"></script> 

css :

.col-sm-3{display: inline-block;width:auto;}  .c {   color: #64cbcd;  font-size: 11px;  border-radius: 50%;  height: 30px;  width: 30px;  display: table-cell;  text-align: center;  vertical-align: middle;  border-color: blue;  box-shadow: 0 0 0 3px #002525; // add line , modify     color  padding-right: 5px;  padding-left: 5px; } 

here js fiddle of demo : http://jsfiddle.net/arunslb123/g87lkpxo/

what i'm trying achieve below :

output image

is there horizontal scroll plugin this?

when change display property inline-block , give margin-left gives me spaces.

http://jsfiddle.net/g87lkpxo/1/


Comments

Popular posts from this blog

php - Admin SDK -- get information about the group -

dns - How To Use Custom Nameserver On Free Cloudflare? -

Python Error - TypeError: input expected at most 1 arguments, got 3 -