Well, this is absolute novice question: How on earth bootstrap does not have min-height?
<div class="min-vh-100">
<div class="min-heigh-75">There is no min height</div>
<div class="min-vh-25">There is no min-vh-25 to 75</div>
</div>
Using h-75 and h-25 does not work as they translate to height:75% and not min-height:75%
Am I missing something here?
This is my first time I use Bootstrap. And the problem I am facing, the text within <main> overflows. Its height does not increase to push <footer> down and the reason is bootstrap .h-25 translates to css height:25%. And height:25% remains the same no matter how much its content overflows. It does not flex itself.
<body class="h-100"> <!-- If I use min-vh-100 then h-25 does not work -->
<header>Header here</header>
<main class="h-25">
Lorem ipsum overflows the main block once it fill 25% of the parent size.
I would like the main block to increase size once it fully filled.
</main>
<footer>Footer here</footer>
</body>
Is there any Bootstrap solution for it?
Related
I have a very wide element, #widelement inside a bootstrap row col. I would like to enclose it on a div, .mywrapper, with a horizontal scroll bar in order to keep page layout.
Someone can explain to me what style I should add to .mywrapper to avoid that #widelement overflows the bootstrap col?
In this sample, the wide element has a 5000px width, but, this is not a fixed number, can be bigger or smaller, also smaller than col size.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<div class="container">
<div class="row">
<!-- first col -->
<div class="col-4" style="background-color:yellow">
<p class="text-end">
This text is ok, should be visible by default.
</p>
</div>
<!-- second col -->
<div class="col-4">
<div class="mywrapper" style="background-color:red;">
<div id="widelement" style="width:5000px;">
<p class="text-end">
This text is inside a 5000px div.
I would like the div .mywrapper has a horizontal scrollbar.
I mean, just a scrollbar for the div, not for the whole page.
The div should be inside de col-6.
On scrolling right, this text should become visible.
</p>
</div>
</div>
</div>
<!-- third and last col -->
<div class="col-4" style="background-color:yellow">
<p class="">
My left div should have a scroll bar.
</p>
</div>
</div>
</div>
What I tried unsuccessfully:
.mywrapper {
overflow-x: scroll;
}
Testing your solution I ended up with this snippet:
.mywrapper {
overflow-x: scroll;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<div class="container">
<div class="row">
<!-- first col -->
<div class="col-4" style="background-color:yellow">
<p class="text-end">
This text is ok, should be visible by default.
</p>
</div>
<!-- second col -->
<div class="col-4">
<div class="mywrapper" style="background-color:red;">
<div id="widelement" style="width:5000px;">
<p class="text-end">
This text is inside a 5000px div.
I would like the div .mywrapper has a horizontal scrollbar.
I mean, just a scrollbar for the div, not for the whole page.
The div should be inside de col-6.
On scrolling right, this text should become visible.
</p>
</div>
</div>
</div>
<!-- third and last col -->
<div class="col-4" style="background-color:yellow">
<p class="">
My left div should have a scroll bar.
</p>
</div>
</div>
</div>
It turns out that the very code you have suggested works. So, something prevents it from working at your end, which could be one or more of the following:
client-side cache (your browser temporarily stores your css and js files in order not to have to download them each time you load a page and it's possible that when you have tested, the cached old version of your CSS was loaded by a locally cached file by your browser instead of downloading it from the server), Ctrl+F5 (or even clear browser cache or even testing in a freshly opened incognito window) sorts this out
server-side cache (CloudFlare or some other server-side software generates static files periodically and sends those out to the browser upon page load rather than generating the response upon each request), in which case, you need to clear the server-side cache while you are testing
you forgot to save the code when you have edited it
you forgot to deploy it on the server
the wrong file was edited
the right file was edited, but it was wrongly not included into the HTML
some higher prio CSS rule prevented the overflow-x rule from being applied (see https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity)
So, your idea was correct, but something prevented it from providing the benefits you have expected. The issue therefore is something technical at your project and you will need to troubleshoot the potential issues listed above. If it still does not work at your end, then you will need to edit your question with more information and let the answerer(s), including myself know about the additional information.
I'm learning Bootstrap and I want to create simple div which is centered on the page.
I really like that auto-margin of container class, but it seems to be jump-changing based on breakpoints when resizing window width.
I want to make margins getting smaller smoothly until they become 0 when window is small enough.
I have tried to explicitly set one column layout like this:
<div class="container border">
<div class="row">
<div class="col-12">
<p>container with some content</p>
</div>
</div>
</div>
but the results are just the same and breakpoints all still used.
For that you shouldn't use bootstrap containers, because they have fixed width on breakpoints. For smooth transition you should manually set width to you container in % or vw and margin in same units.
There are two types of Bootstrap 4 Container: Fixed and Fluid.
Choose from a responsive, fixed-width container (meaning its max-width changes at each breakpoint) or fluid-width (meaning it’s 100% wide all the time).
If you don't want the breakpoints, use the container-fluid class:
Use .container-fluid for a full width container, spanning the entire width of the viewport.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid border">
<div class="row">
<div class="col-12">
<p>container with some content</p>
</div>
</div>
</div>
If you must, you can manually override Bootstrap's responsive max-width settings.
.container.nobreakpoints {
max-width:100%;
width:800px; /* maximum width before margins appear */
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container border nobreakpoints">
<div class="row">
<div class="col-12">
<p>container with some content</p>
</div>
</div>
</div>
(There's a similar question here, but I am too much of a noob yet to translate this onto Bootstrap)
What I want is to have an area on the page between "header" and "footer" (let's call it "body"), which may have a
some fixed section, like BS4 "row", put on the top,
some variable content, consisting of several BS "rows", AND aligned
vertically on the middle of what is left of the body (or of the body
itself)
Can it be done in a responsive manner, and without JS (using only Bootstrap 4 CSS) ?
I've tried some stuff:
<body>
<div id="root" class="container">
<div style="height: 100%;">
<div><h1>HEADER</h1></div><hr>
<div style="min-height: 60%;">
<div class="h100">
<div>some badge</div><br>
<div>
<div class="row justify-content-between">
<div class="col-3">Item #2</div>
<div class="col-3 text-right">
<div>some stats</div>
</div>
</div>
<div class="">
<div class="row justify-content-center">
<div class="col text-center"><h3>THIS SHOULD BE IN THE MIDDLE OF A BLANK SPACE</h3></div>
</div>
<div class="row justify-content-center">
<div class="col-4 text-right"><button class="btn btn-link">it's just below and left</button></div>
<div class="col-4 text-left"><button class="btn btn-link">it's just below and right</button></div>
</div>
</div>
</div>
</div>
</div><hr>
<div class="footer">FOOTER</div>
</div>
</div>
</body>
(https://jsfiddle.net/f93mhdbr/) but as long as I add "d-flex" onto "body" div, or any of it's children, all the previous "row"/"col"-based layout turns into horrible mess ! (see https://jsfiddle.net/f93mhdbr/2/)
I suspect this is due to Bootstrap itself using Flexbox for column and rows,
but maybe any solution exists?
I will try to work on improving this question, I know it's very poor, but I right now I am too much in a despair to work it all out...
UPDATE: added links to whatever I was trying to reproduce
You need to use the flex property to achieve it. Using flex-grow here will make your variable element to grow and fill the remaining height of its container, if there is any. Then all is left to do is set align-items-center on the element to align it on the x-axis.
Here is the Fiddle
Please note I added background-colors so it's easier for you to see how much space each element uses, or use an inspector.
You can set any fixed height for the header, footer and content-top. The height of content and content-remaining will adapt responsively, because they have the property flex-grow: 1 set on them. Here's an example.
To explain further, because the container wrap has a min-height: 100-vh, the content element will grow to fill the entire viewport relative to the rest of the flexible items inside the wrap container. The same logic applies to content-remaining, the only difference is that its parent is the content element and not the wrap container.
As last, I added the IE fix for the min-height property on flex-items. It's a known bug and a quick and reliable fix is to wrap it in a separate flex container.
Hopefully this was helpful to you, if you have any questions left please comment on this answer.
I am using the isotope plugin on my site which is in local development. I'm running into a css problem which i'm hoping someone will be able to help me with. Here's the situation.
<div class="wrapper"> //* Position is relative
<div class="portfolio1"> //* Position is absolute
<div class="inner-wrapper">
<div class="portfolio-container">
<div class="portfolio-header"></div>
<div class="portfolio-content"></div>
<div class="portfolio-footer">
<div class="comments"></div>
</div>
</div>
</div>
</div>
<div class="portfolio2"> //* Position is absolute
<div class="inner-wrapper">
<div class="portfolio-container">
<div class="portfolio-header"></div>
<div class="portfolio-content"></div>
<div class="portfolio-footer">
<div class="comments"></div>
</div>
</div>
</div>
</div>
<div class="portfolio3"> //* Position is absolute
<div class="inner-wrapper">
<div class="portfolio-container">
<div class="portfolio-header"></div>
<div class="portfolio-content"></div>
<div class="portfolio-footer">
<div class="comments"></div>
</div>
</div>
</div>
</div>
<div class="portfolio4"> //* Position is absolute
<div class="inner-wrapper">
<div class="portfolio-container">
<div class="portfolio-header"></div>
<div class="portfolio-content"></div>
<div class="portfolio-footer">
<div class="comments"></div>
</div>
</div>
</div>
</div>
</div>
This pretty much lays the portfolio items out in a grid. My problem is that I have a comment system inside which adds the comments inline. When this happens the ".portfolio" class slides underneath the remaining items on the page. Is there a way either through css or jquery that can remedy this problem? I understand that you can position the elements with relative and float them to keep them from running underneath, but as soon as you do that then the isotope plugin breaks down. Here's a screen shot of the problem as well.
Screen Shot
Cheers,
Mike
I'm guessing the comments are inserted with Ajax? Maybe there's some CSS attached to them that could be overridden to position them differently and keep them within their divs.
Just as likely, though, you shouldn't use Isotope for this. If you're using isotope just to create grid there are simpler ways to do that (you might only need to use float). Isotope does some very fancy footwork, does it differently in different browsers and really likes to work on elements with a nice, specific size. If the comments are getting added with javascript, changing the divs at the same as as Isotope is trying to calculate how it's going to move things around for the layout, you're going to run into trouble.
can I use sprite image in 960 grid system? if yes then how to manage the width of a particular sprite image with the grid width. anybody can help me for the above problem?
The Process of using the 960 grid is quite easy and the markup is quite quick to learn.
try the following.
<section id="wrap" class="container_12">
<header class="grid_12">
<h1>This is your Header</h1>
</header>
<article class="grid_8">
<h2>This is a content section</h2>
</article>
<aside class="grid_4"?>
<h3> this is a sidebar </h3>
</aside>
<footer class="grid_12">
<p>this is the footer</p>
</footer>
</section> <!--end wrap container - this container allows you to use the grid classes and creates your main column -->
Check the CSS in the 960 and it will make sense, the grids are divisions of your container so grid_6 would be half the width of the container_12 etc. - grid_8 would be two thirds, aand grid_4 would be a third, obviously, grid_12 would take the full width of the container.
As for using sprites, simply look in the CSS for the width of the grid_ class that you use for the containing element, if you\'re not using one of those classes then the 960 wouldn't interfere with you using sprites at all.