CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Brandy
Brandy

Reputation: 554

Bootstrap padding between columns

So I'm working on a page for a friend ( http://jojorules.com/index.php/our-pillows/ ) and I have 4 rows, with 3 columns each. Each column needs to have 80px of space between eachother, HOWEVER, the first and last column of each row needs to align with the logo/navbar links (indicated by the red lines on the image at the bottom).

Where I want the 80px spacing is indicated by the blue line/text in the image at the bottom as well.

These padding will only be on desktop, which I will add later, but I've been having issues coming up with a clean way that works well, and sticks with those red line alignments.

enter image description here

Upvotes: 1

Views: 115

Answers (1)

Farzad Yousefzadeh
Farzad Yousefzadeh

Reputation: 2551

for the space between the columns remove left padding of first column and right padding of last column to align the content with navbar.

and to make the 80px work use this snippet (Assuming you are using col-md-4):

.col-md-4:first-child { padding-left: 0; padding-right: 40px; }
.col-md-4:last-child { padding-right: 0; padding-left: 40px; }
.col-md-4:nth-child(2) { padding-right: 40px; padding-left: 40px; }

Note: To make the text on right column to be exactly aligned with navbar, You must use text-align: justify in order to force the text for alignment.

Upvotes: 1

Related Questions