Twitter Bootstrap Question posted in

Center two col-sm-6 in a row + some basic boostrap confusion-Twitter bootstrap

I’m trying to teach myself how to effectively center things using bootstrap. Centering is something I really struggle with, even after reading a ton of other SO posts asking the same question.

Why do we have to wrap the cols in a row, and then wrap that row in a container? What does this actually do?

body {
  background-color:pink;
}
    
.container {
  overflow: hidden;
  background-color: yellow;
}

.col-sm-6 {
  float: left;
  height: 100px;
  width: 100px;
  background-color: blue;
  padding: 10px;
  margin: 1%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class = "container">
  <div class = "row">
  <div class = "col-sm-6"></div>
  <div class = "col-sm-6"></div>
  </div>
</div>

JSFiddle

Tags:

4

Answers


  1. 0

    1 row have 12 cols for you’re first code :

    <div class = "container">
  <div class = "row">
  <div class = "col-sm-6"></div>
  <div class = "col-sm-push-6"></div>
  </div>
</div>

    That means you’re second div is after the first who takes 6 cols. So you push the second after the first (col-sm-push-6)

    This is for the web-responsive, when you’re website is on a computer or in a mobile phone, the screen have different size. Bootstrap adapt you’re div to the screen.
    They’re is sm : for small screen, lg : for large screen and md : for middle screen like a tab for exemple.

    Login or Signup to reply.
  2. 0

    Let me explain for you. I love to teach beginners 🙂

    • Firstly when we use column of bootstrap it adds ’15px’ padding from
      right and left. in this way our column looks like ’15px’ inside from
      wall of container.
    • Secondly we use row to overcome the first situation given upper paragraph.
    • Thirdly if you are trying to align Centre 2 columns of 6 and 6 then it is impossible to do this because 2 col-sm-6
      occupy whole container space.
    • Fourthly do r&d about bootstrap offset and push properties. also check bootstrap row and columns properties by using code inspector. thanks
    Login or Signup to reply.
  3. 0

    If you use bootstrap, there is class ready made to build your layout :

    https://getbootstrap.com/docs/4.0/utilities/flex/

    Flex

    Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities. For more complex implementations, custom CSS may be necessary.

    If you need cols of a fixed width, you might need to create your own class here .

    example:https://jsfiddle.net/cLw2ajro/7/

    body {
  background-color: pink;
}

.container {
  overflow: hidden;
  background-color: yellow;
}

.mycol {
  background-color: blue;
  height:100px;
  flex:0 0 100px
}
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row d-flex flex-nowrap justify-content-center">
    <div class="mycol m-2 p-4"></div>
    <div class="mycol m-2 p-4"></div>
  </div>
</div>
    Login or Signup to reply.
  4. 0

    Try this

    CSS:

    body {
    background-color:pink;
}

.row-centered {
    display:block;
    text-align:center;
}

.col-centered {
    display:inline-block;
    float:none;
    /* reset the text-align */
    text-align:left;
    /* inline-block space fix */
}

 .container {
    overflow: hidden;
    background-color: yellow;
}

.col-sm-6 {
    height: 100px;
    max-width:100px;
    background-color: blue;
    padding: 10px;
    margin: 1%;
}

    HTML

    <div class = "container">
    <div class = "row row-centered">
    <div class = "col-sm-6 col-centered">-</div>
    <div class = "col-sm-6 col-centered">-</div>
    </div>
</div>

    Fiddle

    Source: This question

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

Back To Top
Search