CODEWITHSUNDEEP
twitter-bootstrap
kromastorm
kromastorm

Reputation: 164

aligning div columns inside bootstrap container

I am working on a web page where I have to showcase some products. I currently have 3 main products which will open up other specialized product pages. My current issue is with the div alignment. I am using bootstrap columns to create equally spaced columns. But somehow the first div is attached to left side of the content area.

Here is the main css: 

<style>
body {
    color: white;
}

.topnav>a:hover {
    background-color: black;
    color: white;
}

.content {
    height: 400px;
    overflow-y: auto;
}

div {
    padding: 10px;
}

.productbox {
    box-shadow: 0 8px 6px -6px #999; //
    border: 2px solid gray;
    background-image: url('http://placehold.it/460x250/ffffff&text=HTML5');
    height: 25vh;
    width: 20vw;
    border: 1px solid black;
    align:center;
}

.producttitle {
    font-weight: bold;
    padding: 5px;
    color: black;
    text-align: center;
}
</style>

The container html:

<div class="container">
        <div class="row">
            <div class="row-sm-12 row-md-12 row-lg-12 content"
                style="background-color: lightblue;"></div>
        </div>
    </div>

This is the page that is loaded when product tab is clicked: 

<div class="row">

    <div class="col-sm-3 col-md-3 col-lg-3 productbox"
        style="background-color: lightgray;">
        <div class="producttitle">Product 11</div>
    </div>
    <div class="col-sm-3 col-md-3 col-lg-3 productbox col-sm-offset-1 col-md-offset-1 col-lg-offset-1 "
        style="background-color: yellow;">
        <div class="producttitle">Product 21</div>
        </div>
    <div class="col-sm-3 col-md-3 col-lg-3 productbox col-sm-offset-1 col-md-offset-1 col-lg-offset-1"
        style="background-color: red;"><div class="producttitle">Product 31</div></div>
</div>

I have updated the pages to this link: http://sampledreamstore.000webhostapp.com/.

How shall I make the columns align properly while keeping the content flexible for viewing in mobile devices.

Update : Adding jsfiddle sample to recreate the alignment problem : https://jsfiddle.net/gp1uux1q/

Upvotes: 0

Views: 1012

Answers (1)

Steve K
Steve K

Reputation: 9055

If you are just trying to have equally spaced divs then you should put your product box inside of the columns. Each column will have padding so there is no need to do anything special really to the bootstrap structure. You also have quite a few bad practices going on and you can remove a lot of the markup you have to achieve this. First off row-sm-12 row-md-12 row-lg-12 is not a thing in bootstrap and I dont see any custom css for this so there is no reason to have it because it is not doing anything. If you want a blue background you just have the class content or you can add this class to the row surrounding your columns. Also it is best practice to go from large to small when stating your column classes. For example. 

<div class="col-lg-3 col-md-4 col-sm-6 col-xs-8">

Next if you are just going to have your column width be the same at all screen sizes you just need to state it once at the smallest screen size. So if you want col-lg-3 col-md-3 col-sm-3 it just needs to be stated as col-sm-3. And any size above will be taken care of.

Also if you are looking to have even columns there is no reason to use offset unless you for some reason want the extra space, which I am assuming from your question you don't.

You also have nested rows that are not necessary in your markup and that is why you are getting a horizontal scrollbar in you content area.

Next you are using col-sm-3 when if you are trying to have 3 boxes in a row you would use col-sm-4 this is the reason it seems that your box on the left is stuck to the side of the container. When in fact there is just extra space from there not being another column there to fill out the row on the right.

All that being said I think what your looking for is a markup like the following:

<div Class="container">
  <div class="row content">
    <div class="col-xs-4">
      <div class="product-box">
        A Product Here
      </div>
    </div>
    <div class="col-xs-4">
      <div class="product-box">
        A Product Here
      </div>
    </div>
    <div class="col-xs-4">
      <div class="product-box">
        A Product Here
      </div>
    </div>
  </div>
</div>

Here is a fiddle of this example Fiddle Demo

In this example I used col-xs-3 just because its easier to view in the fiddle. But you can change it to col-sm-3. Based on your question I think this is what your are looking for if I understand it correctly. If not let me know in the comments and I will adjust it accordingly.

Upvotes: 2

Related Questions