I am trying to design a responsive webpage using bootstrap. I have the following HTML structure
<div class="container">
<div class="row">
<div class="col-lg-8 col-sm-8">
<div class="well"><!--Page content here--></div>
</div>
<div class="col-lg-4 col-sm-4">
<div class="well">
<form class="form-horizontal" role="form">
<!--Form elements here-->
</form>
</div>
</div>
</div>
</div>
Now, I want the div.well inside div.col-lg-4 to be fixed positioned. So when I add style="position:fixed;" to the div.well, the default responsive width which it inherits from its parent (that is 33.33%) gets reduced and the form elements gets shrunk. Any suggestions on how I can fix this?
Take a look at this Codepen.
In the CSS Box Model, fixed positioning takes an element out of the normal flow, and if there are no other sibling elements, the parent container will collapse. In this case, the form inherits it's width from the parent, but when taken out of normal flow with fixed positioning, the width value of the parent does not cascade. But when I add a sibling element to illustrate my point, in this case a Bootstrap 'jumbotron' element, you will see that the parent .col-lg-4 .col-sm-4 element is once again visible, but it settles in underneath it's fixed sibling who appears first in source order.
Hope that helps.
Related
On my webpage, I have a div element on the left with a static width of 300px. Right next to it, on the right, I want to display another element which has a dynamic, flexible width (because the browser window could be resized by the user) by using the Bootstrap grid with col-12. Imagine this:
<div class="row">
<div style="width:300px;"></div>
<div class="col-12"></div>
</div>
The div with class="col-12" should be right next to the left div, without space in between of them, and it should be growing/flexing always to the right of the window.
Unfortunately, it seems not to work, having a static px-width on the left element, and on the right an flex element with col-12. The second div is always BELOW the first div. Do you know a solution? Thanks in advance!
Try giving the second div in the row the class "col".
<div class="row">
<div style="width:300px;"></div>
<div class="col"></div>
</div>
Regards!
I have a couple of divs sat side by side that need the button to be on the bottom.
I need the button to sit on the bottom of the .col-sm-4 container, without the h3 tag pushing it further out. Does anyone have a hack or some kind of solution?
The h3 tag size needs to be responsive as its text may change. I've got it to a point where the boxes are pushed out of the container, but now I'm stuck.
____________________Better explanation_______________
My h3 tag is pushing my .col-sm-4 outside of the container. I need the button to be at the bottom of the div.
In this js.fiddle, I have provided two divs. The first one is where I want the button, but I need the h3 tag to look like div 2. I can't seem to achieve the second div without the button being pushed out of the container.
https://jsfiddle.net/19obrm0q/1/
edit - h4 -> h3.
You can't put an element with nonzero height in the same container as a full-height div and expect both to fit in 100% of the parent's height. That's what height: 100% means.
I've tried again, this time keeping the h3 outside the col-sm-12 as required. To make this work I've moved the full-height class up a level to the col-sm-4. I also had to move the center-bottom element outside the col-sm-12. This is because now that the col-sm-4 is the element with defined height, it should also be the element which defines the position context for the absolute element.
https://jsfiddle.net/19obrm0q/7/
First, your markup was a little different between the two columns: one had the h3 inside the parent div and the other had it before/outside, which was contributing to making them look different.
But my suggested solution is to pad the bottom of the parent so that there's sure to be room for the absolute positioned button.
Have a look:
https://jsfiddle.net/19obrm0q/3/
https://jsfiddle.net/19obrm0q/5/
After much fiddling about: BEFORE:
<div class="col-sm-12 bg-white pad-sm-top text-center full-height full-width">
<h3 class="clear-margin text-banner-activity fix text-center"> SOME TEXT</h3>
<p class="clear-margin">SOME TEXT</p>
<div class="center-bottom">
Learn more >
</div>
</div>
</div>
and AFTER:
<div class="col-sm-4 no-pad bg-white">
<h3 class="clear-margin text-banner-activity text-center">heading</h3>
<div class="col-sm-12 pad-sm-top pad-xlg-bot text-center">
inner
</div>
<a href="#" role="button" class="btn btn-activity-light btn-md center-bottom">
button
</a>
</div>
I moved the divs around and got rid of the div that was nesting the button, and now it works, the button sits on the bottom no matter the size of the column.
I have added content div in which having two column div as col-md-3 and as col-md-9
In <div class="col-md-3"> in between having tabular panel menu and in tabular menu have one accordion with scroll effect.
With having min-height: 329px !important
When i check on browser with 1366*768 it looks good with same height
for <div class="col-md-3"> and for 2nd div` with same height
but when i change resolution of pc it conflicts
I want same height as per 2nd div having class .col-md-9
please give me solution on that.
display:flex is the correct solution for you apply this property in parent div like this
HTML
<div class="parent">
<div class="col-md-3">
// you content here
</div>
<div class="col-md-9">
// you content here
</div>
</div>
CSS
.parent{
display:flex;
}
This will make equal height of elements in .parent.
You can add another class on the divs like this class="col-md-3 sameheight" and class="col-md-9 sameheight" and than style it giving a static height if this is what you want.
.sameheight
{
height: 300px //for example
}
For the responsivnes than you can work with media queries. But also the display: flex for the parent of 2 divs is a good solution if it is applicable to you.
i've a div block where i need to show a block always in bottom of the section no matter if above section is empty inner div should be in the bottom section div like attached
this is what i am doing
<div class="col-md-6 col-xs-6" style="position:relative; min-height:300px;">
Content for upper section
<div class="row" style="position:absolute; bottom:0 !important;">
<div class="col-xs-12">
Div in footer section of the parent div
</div>
</div>
</div>
what i expect even f there is no content in top section bottom div should be in footer of the parent div instead of starting from the top section , as in attached image but that is not the case please help me to solve it
Check your spellings, its a typo:
Change positoin to position
You must have some custom styling because i just tested your code and it works. The row-class is stuck to the bottom as it is supposed to.
By the way, all col-* classes is position relative by bootstrap default. No need to specify it in the style tag.
I'm trying to position sidebar on the right side in a site based on Bootstrap grid.
Well, this is very simplified layout that I've made - jsFiddle
I admit it's not the good use of bootstrap classes (rows etc.) but it works.
The problem is: the sidebar html code must be under the text and content (because of SEO), so it must be somehow positioned next to content (class .content).
I tried positioned it as an relative element but didn't have any luck.
The text in .text div does not have static height, it will change
The .content will have same height every time
Is this more what you were after?
<div class="container">
<div class="row">
<div class="col-xs-9 pull-right">
<div class="col-xs-12 content">Main</div>
<div class="col-xs-12 text">Lorem</div>
</div>
<div class="col-xs-3 sidebar pull-left">
<p>sidebar</p>
</div>
</div>
</div>
jsFiddle
Basically I've split your entire container 3 to 9, and then made your 'content' and 'text' blocks children of the '9' column. I then applied both the pull-left and pull-right class to the relevant containers.
I also fixed up your HTML a bit as it was missing a div tag. I also got rid of some of the text to make the code more readable to me!