CODEWITHSUNDEEP
htmlcssreactjsbootstrap-4material-ui
Claim
Claim

Reputation: 921

How to create a custom buttons grid in Bootstrap 4?

I have a React component that I want to place at bottom of the screen. It should stay there regardless what's on top of it. If there is almost no content on top of it, it should still stay there.

I solved it by adding style={{position: 'fixed', bottom: 0}} to the main div

Now, I want to have a grid that looks kind of like this. Whatever I do, they end up on each other making no sense at all.

What I tried: bootstrap, putting them grouped in divs, flex directions etc.

Here's the code:

render() {
        return(
            <div style={{position: 'fixed', bottom: 0}}>
                {/*Fix elements as footer*/}

                <div style={{flexDirection:'row'}}>
                    <Button variant="raised" color="default" style={{fontSize:20, minHeight: 200}}> A </Button>
                </div>
                <div style={{flexDirection:'column'}}>
                    <Button variant="raised" color="default" style={{fontSize:20}}> A </Button>
                    <Button variant="raised" color="default" style={{fontSize:20}}> A </Button>
                </div>
                <div style={{flexDirection:'column'}}>
                    <Button variant="raised" color="default" style={{fontSize:20}}> A </Button>
                    <Button variant="raised" color="default" style={{fontSize:20}}> A </Button>
                    <Button variant="raised" color="default" style={{fontSize:20}}> A</Button>
                </div>
                <div style={{flexDirection:'column'}}>
                    <Button variant="raised" color="default" style={{fontSize:20}}> A </Button>
                    <Button variant="raised" color="default" style={{fontSize:20}}> A </Button>
                </div>
            </div>
        );
    }

I don't know, but I always struggled with css no matter how much I read about styling. If anyone has some tips to create custom layouts please educate me. Bootstrap is easy for creating a simple layout, but I can't wrap my mind around css and it always steals most of my time.

Upvotes: 0

Views: 3867

Answers (2)

WebDevBooster
WebDevBooster

Reputation: 14964

You need to use Bootstrap classes if you actually intend to use Bootstrap.

Here's one way to achieve the desired grid layout for those buttons: 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container-fluid fixed-bottom">
    <div class="row no-gutters">
        <div class="col-sm-4">
            <div class="row no-gutters h-100">
                <div class="col-6">
                    <button type="button" class="btn btn-sm btn-block h-100 btn-outline-primary">A</button>
                </div>
                <div class="col-6">
                    <button type="button" class="btn btn-sm btn-block h-50 btn-outline-secondary">B</button>
                    <button type="button" class="btn btn-sm btn-block h-50 mt-0 btn-outline-success">C</button>
                </div>
            </div>
        </div>
        <div class="col-sm-4">
            <button type="button" class="btn btn-sm btn-block btn-outline-danger">D</button>
            <button type="button" class="btn btn-sm btn-block mt-0 btn-outline-warning">E</button>
            <button type="button" class="btn btn-sm btn-block mt-0 btn-outline-info">F</button>
        </div>
        <div class="col-sm-4">
            <div class="row">
                <div class="col">
                    <button type="button" class="btn btn-sm btn-block btn-outline-dark">G</button>
                    <button type="button" class="btn btn-sm btn-block h-100 mt-0 btn-outline-primary">H</button>
                </div>
            </div>
        </div>
    </div>
</div>

The btn-lg or btn-sm classes can be used to make the buttons large or small. The btn-block makes it full-width of the column. The no-gutters on the row removes the column paddings/gutters and h-100 or h-50 means "height:100%" and "height:50%" respectively.

And here is how the entire row can be nested inside another Bootstrap column: 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-3">
            col-sm-3 content
        </div>
        <div class="col-sm-9 d-flex flex-column" style="min-height: 100vh">
            col-sm-9 content
            <div class="row no-gutters mt-auto">
                <div class="col-sm-4">
                    <div class="row no-gutters h-100">
                        <div class="col-6">
                            <button type="button" class="btn btn-sm btn-block h-100 btn-outline-primary">A</button>
                        </div>
                        <div class="col-6">
                            <button type="button" class="btn btn-sm btn-block h-50 btn-outline-secondary">B</button>
                            <button type="button" class="btn btn-sm btn-block h-50 mt-0 btn-outline-success">C</button>
                        </div>
                    </div>
                </div>
                <div class="col-sm-4">
                    <button type="button" class="btn btn-sm btn-block btn-outline-danger">D</button>
                    <button type="button" class="btn btn-sm btn-block mt-0 btn-outline-warning">E</button>
                    <button type="button" class="btn btn-sm btn-block mt-0 btn-outline-info">F</button>
                </div>
                <div class="col-sm-4">
                    <div class="row">
                        <div class="col">
                            <button type="button" class="btn btn-sm btn-block btn-outline-dark">G</button>
                            <button type="button" class="btn btn-sm btn-block h-100 mt-0 btn-outline-primary">H</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

The classes d-flex flex-column on the column turn it into a flex column and the mt-auto class (margin-top:auto) on the row pushes that row to the bottom of that column. And style="min-height: 100vh" makes sure that the column height is at least the same as the viewport height (so that the buttons stay at the bottom even if there's hardly any content in the parent column).

Upvotes: 2

Victor Baron
Victor Baron

Reputation: 177

If you want to understand how the CSS works, here is a code without Bootstrap: 

<div class="container row">
   <div class="column flex-1">
     <button class="flex-1"> A </button>
   </div>
   <div class="column flex-1">
      <button class="flex-1"> B </button>
      <button class="flex-1"> B </button>
   </div>
   <div class="column flex-2">
      <button class="flex-1"> C </button>
      <button class="flex-1"> C </button>
      <button class="flex-1"> C </button>
   </div>
   <div class="column flex-2">
      <button class="flex-1"> D </button>
      <button class="flex-2"> D </button>
   </div>
</div>

.container {
  position: fixed;
  bottom: 0;
  width: 100%;
}

.row {
  display: flex;
  flex-direction: row;
}

.column {
  display: flex;
  flex-direction: column;
}

.flex-1 {
  flex: 1;
}

.flex-2 {
  flex: 2;
}

And the fiddle to illustrate : https://jsfiddle.net/dnotkL5w/16/

flex: 1 means: "Take all the available space, in the direction specified by the container". So, if the container is in row, it will take all available space in width.

flex: 2 means "Take all the available space, in the direction specified by the container. If there is a flex: 1 item in the container, be twice its size".

That's a barycenter : the number given to the flex property will indicate the component size ratio compared to its siblings.

Upvotes: 2

Related Questions