0

I would like to have five equal icons in a row, using bootstrap 3. I know that in Bootstrap 4, it is easy do it, but for now, I was wondering how this can done using bootstrap 3. Essentially, I want to have five icons in a row, and if there is more than five icons, then the 6th icon will be moved to the next line(like wrapping). Here is how it is currently set up: https://jsfiddle.net/cliffeee/bjhvpf7q/17/ .

Franz Gleichmann
  • 3,420
  • 4
  • 20
  • 30
  • Does this answer your question? [Five equal columns in twitter bootstrap](https://stackoverflow.com/questions/10387740/five-equal-columns-in-twitter-bootstrap) – Adam Strauss Dec 02 '19 at 13:11

3 Answers3

2

i am using display:flex concept. Hope it will help you.If any changes then let me know.

https://jsfiddle.net/1o6fjk08/3/

.col-xs-2 {
  background: red;
  color: #FFF;
  width:16%;
  margin-right:10px;
  margin-left:10px;
  margin-bottom:15px;
  height:100%;
}
.row{
  display: flex;
  flex-wrap: wrap;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row" style="border: 1px solid #000">
    <div class="col-xs-2 col_wrap" id="p1">Col One</div>
    <div class="col-xs-2 col_wrap" id="p2">Col Two</div>
    <div class="col-xs-2 col_wrap" id="p3">Col Three Three</div>
    <div class="col-xs-2 col_wrap" id="p4">Col Four</div>
    <div class="col-xs-2 col_wrap" id="p5">Col Five</div>
    <div class="col-xs-2 col_wrap" id="p6">Col Six</div>
    <div class="col-xs-2 col_wrap" id="p6">Col seven</div>
    <div class="col-xs-2 col_wrap" id="p6">Col Eight</div>
    <div class="col-xs-2 col_wrap" id="p6">Col Nine</div>
    <div class="col-xs-2 col_wrap" id="p6">Col Ten</div>
    <div class="col-xs-2 col_wrap" id="p6">Col Eleven</div>
    <div class="col-xs-2 col_wrap" id="p6">Col Twelve</div>
      <div class="col-xs-2 col_wrap" id="p6">Col Thirteen</div>
        <div class="col-xs-2 col_wrap" id="p6">Col Fourteen</div>
        <div class="col-xs-2 col_wrap" id="p6">Col Fifteen</div>
  </div>
</div>

or you can use display: inline-block;Here i am attaching the code. Please check it. If any changes then let me know.

https://jsfiddle.net/x65ot3wu/7/

ul {
  padding-top: 20px
}

ul li {
  list-style-type: none;
  width: 16%;
  margin: 0 5px;
  display: inline-block;
  margin-bottom:10px;
  
}

ul li i {
  font-size: 24px !important
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <ul>
    <li><i class="fa fa-address-book" aria-hidden="true"></i></li>
    <li><i class="fa fa-bandcamp" aria-hidden="true"></i></li>
    <li><i class="fa fa-envelope-open" aria-hidden="true"></i></li>
    <li><i class="fa fa-id-card" aria-hidden="true"></i></li>
    <li><i class="fa fa-telegram" aria-hidden="true"></i></li>
    <li><i class="fa fa-snowflake-o" aria-hidden="true"></i></li>
    <li><i class="fa fa-user-circle-o" aria-hidden="true"></i></li>
  </ul>

</div>
Revti Shah
  • 642
  • 1
  • 5
  • 16
  • Hi @Revti, thanks for showing various ways of approach it, it helps quite a bit. –  Dec 03 '19 at 03:26
  • hello @peter. anytime. is your whole problem solved? or do you need any help? Please let me know. – Revti Shah Dec 04 '19 at 04:54
1

Try This...

.col-xs-2{
    background:red;
    color:#FFF;
}
.col-half-offset{
    margin-left:4.166666667%
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="row" style="border: 1px solid #000">
        <div class="col-xs-2" id="p1">Col One</div>
        <div class="col-xs-2 col-half-offset" id="p2">Col Two</div>
        <div class="col-xs-2 col-half-offset" id="p3">Col Three</div>
        <div class="col-xs-2 col-half-offset" id="p4">Col Four</div>
        <div class="col-xs-2 col-half-offset" id="p5">Col Five</div>
        <div>6 lorem ipsum is simply</div>
    </div>
</div>
Sunil R.
  • 851
  • 8
  • 15
-1

Try this,

<div class="row justify-content-center">
  <div class="col-md-2">1</div>
  <div class="col-md-2">2</div>
  <div class="col-md-2">3</div>
  <div class="col-md-2">4</div>
  <div class="col-md-2">5</div>
  <div class="col-md-2">6</div>
</div>
htmldevmate
  • 58
  • 9