CODEWITHSUNDEEP
csstwitter-bootstrap
user12345
user12345

Reputation: 13

Multiple div in same line bootstrap

I want multiple div in same line with overflow option.

.col-xs-3 a{height:100px;background:pink;display:block;margin-top:10px;padding:10px}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="col-xs-12">
    <div class="col-xs-3"><a>content1</a></div>
    <div class="col-xs-3"><a>content2</a></div>
    <div class="col-xs-3"><a>content3</a></div>
    <div class="col-xs-3"><a>content4</a></div>
    <div class="col-xs-3"><a>content5</a></div>
    <div class="col-xs-3"><a>content6</a></div>
</div>

Upvotes: 0

Views: 19872

Answers (1)

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167162

You need to add white-space: nowrap along with making the elements to be inline. Add some width to make the overflow confined to the current element:

.col-xs-12 {
  white-space: nowrap !important;
  max-width: 100%;
  overflow: auto;
}
.col-xs-3 {
  float: none !important;
  display: inline-block !important;
}
.col-xs-3 a {
  height: 100px;
  background: pink;
  display: block;
  margin-top: 10px;
  padding: 10px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="col-xs-12">
  <div class="col-xs-3"><a>content1</a></div>
  <div class="col-xs-3"><a>content2</a></div>
  <div class="col-xs-3"><a>content3</a></div>
  <div class="col-xs-3"><a>content4</a></div>
  <div class="col-xs-3"><a>content5</a></div>
  <div class="col-xs-3"><a>content6</a></div>
</div>

Upvotes: 1

Related Questions