2 Replies - 290 Views - Last Post: 23 September 2015 - 06:47 PM

#1 kenw232  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 1
  • Joined: 22-September 15

Simply want to center some bootstrap div's

Posted 22 September 2015 - 07:14 PM

I have a simple div, with some uneven col-sm's inside it. It produces the attached image. How do simply get the 3 columns to CENTER inside the parent row? Ignore the larger red box at the bottom.

<div class="row" style="border: 1px solid green;">
<div class="col-sm-3" style="border: 1px solid red;">test</div>
<div class="col-sm-1" style="border: 1px solid red;">test</div>
<div class="col-sm-3" style="border: 1px solid red;">test</div>
</div>

Attached image(s)

  • Attached Image


Is This A Good Question/Topic? 0
  • +

Replies To: Simply want to center some bootstrap div's

#2 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3936
  • View blog
  • Posts: 11,965
  • Joined: 08-June 10

Re: Simply want to center some bootstrap div's

Posted 22 September 2015 - 11:19 PM

Quote

How do simply get the 3 columns to CENTER inside the parent row?

almost not at all. bootstrap is based off a 12 segment grid and thus does not have a odd-widthed centered column. there might be chances by nesting tables but it wouldn’t be more than an awkward hack.

for this case I’d try to use it without bootstrap’s grid.

if you’re not set on the 3-1-3 widths you could use 4-2-4 with a 1 offset.
Was This Post Helpful? 0
  • +
  • -

#3 e_i_pi  Icon User is offline

  • = -1
  • member icon

Reputation: 827
  • View blog
  • Posts: 1,779
  • Joined: 30-January 09

Re: Simply want to center some bootstrap div's

Posted 23 September 2015 - 06:47 PM

I'm not familiar with Bootstrap. Added it to my application once, saw the dogs breakfast it made by adding CSS attributes to base HTML DOM elements, and threw it in the bin.

For spacing things out evenly, there are a few ways of going about it:

Method 1 - Ugly, but sometimes useful
Create your three elements with float:left;width:xx% and then add a fourth element that has clear:both.

Method 2 - Use table display
Give the parent element display:table (or display:table-row)and the child elements display:table-cell. You may need to add a width:100% to the parent, but the children should space automatically to fit content. If you want them set width, you can use width:xx% on them and I think they abide by that.

Method 3 - Flexbox
I won't go into great detail here, but you can use the flexbox directive in CSS, a nice tutorial/cheat-sheet can be found here. Flex boxes are great, but I think earlier versions of IE have trouble with them, and Safari is a bit stupid when rendering them.

There are likely other methods. I use my own CSS framework, so I don't run into problems with things like Bootstrap, but you should be able to add your own CSS without having to ditch Bootstrap. Just try not to mix Bootstrap with custom CSS or other frameworks, and you should stay out of trouble.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1