How to position div bottom of bootstrap panel
This tutorial will guide you how to position div bottom of a bootstrap panel in a bootstrap responsive template. The real challenge is position div bottom for all the resolutions, that is positioning of the div should adjust according to the panel size.
First copy the bootstrap default template and create a simple bootstrap web page template. Let us create a default bootstrap panel and add bit of content to it. Your code will look as follows;
<div class="container"> <div class="row"> <br /> <div class="col-lg-offset-3 col-lg-6"> <div class="panel panel-primary"> <div class="panel-body"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div> </div> </div> </div> </div> </div>
As you can notice I’m using a very simple bootstrap grid layout with a single column and inside the column I have placed the bootstrap panel. Above code will generate a simple bootstrap panel at the center of your page with some text content in it. Save the page and open up with a web browser. You will get the following output;
Let’s place another div on top of panel and add simple text into it. Since it is not visible enough lets add bit of background color to it. New div tag code will look as follows;
<div class="at-bottom" style="background-color:#ccc;"> I want to be at the bottom </div>
Now save the web page and refresh the browser you will notice that a new gray box on top of the panel as follows;
Position Div bottom of bootstrap panel
Now our task is to position a div at the bottom of the panel and make it responsive. Let’s look at how we can do it using CSS. If you need flexible positions for a given html tag you need to make it position absolute. So you can add the style attribute position absolute to style section. Save it and refresh the browser you will notice two things, that is the div size become shrink up to text size and it comes inside the panel as shown below;
Now we need to position the gray div at the bottom. Any absolute position html tag you can position at the bottom of its container using the css rule bottom by setting it to zero. Your div tag code will look as follows;
<div class="at-bottom" style="background-color: #ccc; position: absolute; bottom: 0;"> I want to be at the bottom </div>
Save the code and refresh the browser. Output result as follows;
Bottom position div adjustments
As you can notice div tag is positioned at the bottom but positioned outside the bootstrap panel. This happens because of the default panel padding bottom setting by bootstrap framework. Here you can think of two fixes one is to override the default panel bottom padding or add the same pixel value as the margin for bottom position div. in my case I choose to add a margin bottom to the div tag. Your bottom div code will look as follows;
<div class="at-bottom" style="background-color: #ccc; position: absolute; bottom: 0;margin-bottom:20px;"> I want to be at the bottom </div>
Save the code and refresh the browser, output will look as follows;
Checking for responsiveness of bottom position div
Now check this bootstrap template responsiveness, you can notice the div not stay at the bottom for all the resolutions, and it move up and down for different resolutions. To fix this problem you need to wrap the position bottom div tag and the panel in a relative position div tag. It will solve the position bottom for all the resolutions. Here is how you code it.
<div class="col-lg-offset-3 col-lg-6 col-md-offset-3 col-md-6 col-sm-offset-3 col-sm-6"> <div style="cursor: pointer; position: relative; float: left;"> <div class="at-bottom" style="background-color: #ccc; position: absolute; bottom: 0; margin-bottom: 20px;"> I want to be at the bottom </div> <div class="panel panel-primary"> <div class="panel-body"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div> </div> </div> </div> </div>
Save the page and refresh the browser, and check the bottom div position for each resolution. The div will position at the bottom for all the resolutions.
But at given web development requirements you need the bottom position div to use the full stretch up to panel width. In that case you need to make a small css tweak to make it full stretch for all resolutions. You need to add a percentage width and make it 100%. Save the code and refresh the browser you will get a required output a div positioned at the bottom of a bootstrap panel.
Click here for live demo
[/su_box]
Share your thoughts