Twitter Bootstrap Question posted in

bootstrap 5 columns in one row-Twitter bootstrap

Five equal columns in twitter bootstrap

Bootstrap – 5 column layout

5 columns per row in Bootstrap-4

I have already looked at these links but still not found an issue
I have tried to get 5 columns in a row with below

css

.col-xs-offset-13{
    margin-left:4.166666667%;
}

html

<div class="col-xs-2">1</div>
<div class="col-xs-2 col-xs-offset-13">2</div>
<div class="col-xs-2 col-xs-offset-13">3</div>
<div class="col-xs-2 col-xs-offset-13">4</div>
<div class="col-xs-2 col-xs-offset-13">5</div>

but the result I get is 6 columns in a row. any ideas would be appreciated

Tags:

2

Answers


  1. 0

    you can use a col-xx class without a column size :

    div div div {
  border: solid;
  margin: 2px;/* this can be added without breaking the row */
}
div div div:before {
content:attr(class);/* show class used */
color:crimson
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<p>Class used , play snippet in full page to test behavior on resizing :</p>
<div class="container">
  <div class="row">
    <div class="col-sm"></div>
    <div class="col-sm"></div>
    <div class="col-sm"></div>
    <div class="col-sm"></div>
    <div class="col-sm"></div>
  </div>
  <div class="row">
    <div class="col-md"></div>
    <div class="col-md"></div>
    <div class="col-md"></div>
    <div class="col-md"></div>
    <div class="col-md"></div>
  </div>
  <div class="row">
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
  </div>
</div>
    Login or Signup to reply.
  2. 0

    Include in your CSS style:

    .custom-col{
    width: 20%;
    word-break:break-all;
}

    HTML:

    <div class="row">
      <div class="custom-col">CONTENT</div>
      <div class="custom-col">CONTENT</div>
      <div class="custom-col">CONTENT</div>
      <div class="custom-col">CONTENT</div>
      <div class="custom-col">CONTENT</div>
</div>

    It worked for me!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search