How to align 3 boxes in twitter bootstrap horizontally? - css

Question

I need to insert 3 boxes next to each other in wordpress theme. I'm using wp-bootstrap theme.
What I did I create a page and I named it "offers", and I wrote the following code
<div class="col-xs-4 text-center offer-box">
<h1>Offer 1</h1>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. </p>
</div>
<div class="col-xs-4 text-center offer-box">
<h1>Offer 2</h1>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. </p>
</div>
<div class="col-xs-4 text-center offer-box">
<h1>Offer 3</h1>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. </p>
</div>
in css file, I wrote
.offer-box {
background: #f4e759;
height: 300px;
border-radius: 10px;
}
.offer-box h1 {
color: #080808;
}
.offer-box p {
color: #080808;
font-size: 1.2em;
}
It works but the boxes appear without margins. I need to make it with margins left and right for each box.
It should appear like that image exactly

Answer 1

First you should wrap your columns into a row. <div class="row"></div> You should insert another <div> in yor columns for styling purposes because
Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via negative margin on .rows.
Try this
<div class="row">
<div class="col-xs-4">
<div class="text-center offer-box">
<h1>Offer 1</h1>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum
tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas
semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien
ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi.
Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac
dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus,
tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi,
tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>
</div>
<div class="col-xs-4">
<div class="text-center offer-box">
<h1>Offer 2</h1>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum
tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas
semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien
ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi.
Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac
dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus,
tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi,
tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>
</div>
<div class="col-xs-4">
<div class="text-center offer-box">
<h1>Offer 3</h1>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum
tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas
semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien
ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi.
Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac
dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus,
tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi,
tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>
</div>
</div>
Check this link too for more examples Bootstrap grid system

Answer 2

You need to set the appropriate variables in your style.less file. I believe the ones you need to look at are
#fluidGridColumnWidth
and
#fluidGridGutterWidth

Answer 3

You didn't follow Bootstrap grid syntax. Your .col-* elements should be inside a .row, which in turn should be in a .container. Apply correct nesting and you'll be fine.

Answer 4

Please check following:
Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.
Use rows to create horizontal groups of columns.
Content should be placed within columns, and only columns may be immediate children of rows.
Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via negative margin on .rows.
read