I recently started learning BootStrap and delving into web development. Despite watching numerous video tutorials and reading the documentation, I am still struggling with layout issues – something isn't quite clicking for me.
My goal is to create left and right panels that will contain additional content not visible in the snippet provided. I want the yellow and green button bars to always align at the bottom of the container, regardless of the other content in the panels.
After spending several hours on this, I'm not sure if my approach to laying out the elements is incorrect or if I'm not utilizing the align-content-end class correctly.
(I'm unsure why the code below is generating an error – it appears to be functional)
Current layout:
https://i.sstatic.net/Oh7LU.png
Desired layout:
https://i.sstatic.net/Q4UgA.png
#events-tab-container {
/* background: gray; */
height: 90vh;
}
#left-panel {
background: lightcoral;
border: 1px solid gray;
border-radius: 10px;
/* margin-right: 10px; */
}
#right-panel {
background: lightskyblue;
border: 1px solid gray;
border-radius: 10px;
}
#button-bar-left {
background: yellow;
}
#button-bar-right {
background: lightgreen;
}<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="events-tab-container" class="container">
<div class="row h-100">
<div id="left-panel" class="col col-8">
left
<div id="button-bar-left" class="row d-flex justify-content-end align-content-end">
<button id="cancel-event-btn" class="btn btn-sm btn-secondary mr-2">Cancel</button>
<button id="save-event-btn" class="btn btn-sm btn-primary mr-2">Save Event</button>
</div>
</div>
<div id="right-panel" class="col col-4">
right
<div id="button-bar-right" class="row d-flex justify-content-end align-content-end">
<button id="new-event-btn" class="btn btn-sm btn-primary mr-2">New Event</button>
</div>
</div>
</div>
<!-- END EVENTS CONTAINER -->
</div>