[solved] Center btn-group, super easy solution

[solved] Center btn-group, super easy solution
0
#1

ok @nourabousoha check this out

<div class="row">
   <div class="col-md-2"></div>
  <div class="btn-group btn-group-lg col-md-8" >
   <button type="button" class="btn btn-primary">Left</button>
   <button type="button" class="btn btn-primary">Middle</button>
   <button type="button" class="btn btn-primary">Right</button>
   <button type="button" class="btn btn-primary">Right</button>
  </div>
   <div class="col-md-2"></div>
</div>

I can’t get my btn-group in the center of the page lol

[solved] Should we offset? Or should we grid?
The differences between Bootstrap3 and Bootstrap4 are Crazy
The differences between Bootstrap3 and Bootstrap4 are Crazy
The differences between Bootstrap3 and Bootstrap4 are Crazy
#2

use the offset* classes to push your btn-group in the middle

#3

offset? ok let me check that doc.
is that how I should do it in all cases with stuff like this?
I feel like griding my stuff should’ve worked…

#4

So you want the button group in the middle of the whole page or the middle of the col-md-8?

#5
#6

@nourabousoha
My buddy showed me this so I just used that. But I’m gonna check that offset stuff. I gotta learn more about flex.

#button-group {
  margin: auto;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
#7

well @BenGitter
the way I figure it if I put it in the middle 8 slots it would be in the center of the page.
But yea lol. I want it in the center of the page.

#8

yes like this <div class="col-md-2 col-md-offset-2"></div>

#9

Just use col-md-12 + text-center and then inside a div of btn-group:

<div class="row">
  <div class="col-md-12 text-center">
    <div class="btn-group btn-group-lg">
      <button type="button" class="btn btn-primary">Left</button>
      <button type="button" class="btn btn-primary">Middle</button>
      <button type="button" class="btn btn-primary">Right</button>
      <button type="button" class="btn btn-primary">Right</button>
   </div>
  </div>
</div>
#10

I don’t understand that code @nourabousoha
what’s happening there?

#11

So if I got you right @BenGitter, this would center everything in my col-md-12 box. right?

#12

Yes, all text (including buttons) is centered.

#13

HAHAHA IT WORKED!
dam i’m good :sunglasses:

#14

OMG @BenGitter I think that’s gonna solve all my grid problems from now on. I knew it had to be easy.
See the way I look at this bootstrap business is like a magazine.
Ya’ know, like you can lay everything out in grids.
And that’s how I wana code.

tx for your help too @nourabousoha

#15

it’s just an example of one of the offset classes family.
the answer to those kind of problem is to calculate how to reatch the center of your thing (page div …etc) and use
a combination of col* and col-offset* to reach it.