mercredi 15 juin 2016

How do i create custom grid class in Bootstrap for lg as well as xs screen size?

Here's the link to the page, check the columns. I have been working on CSS for a while and have felt dire need of custom size bootstrap columns. Please consider this situation, I have a two column design for the body of my website.

<body style="background-color : grey" style="padding-right : 2% ; padding-left : 2%">
<div class="row">
<div id="col1" class="col-lg-9 style="background-color : white">
<p> Some content here</p>
</div>
<div id="col2" class="col-lg-1" style="background-color : grey"></div>
<div id="col3" class="col-lg-2" style="background-color : white">
<p>Some content here for the right column</p>
</div>
</div>
</body>

Although, I want some space between the left major column and the right major column which is done by col2, the space is too much. If i style col2 with custom width the right column shifts along breaking the standard margin from right of 2% which is clearly visible because of my footer. Therefore i need to change the widths of both col2 as well as col3.

I intend to use custom column class for lg screen size so that design stays intact on the mobile screen as well. How do i create one? A short example would be appreciated Thank you

Aucun commentaire:

Enregistrer un commentaire