Where To Find Me?
Lorem ipsum..
<div class="container-fluid bg-3 text-center">
<h3>Where To Find Me?</h3>
<p>Lorem ipsum..</p>
</div>
Bootstrap 3 reads:
Use .container-fluid for a full width container, spanning the entire
width of your viewport.
The other counterpart of .container-fluid is .container. Bootstrap 3 doc says:
Use .container for a responsive fixed width container.
Means .container is responsive but has intervals. Bootstrap applies fixed CSS width style for each media breakpoint (xs, sm, md, lg). .container-fluid expands to fill the available width (using % width).
So for example, say your browser window is 1000px wide. As it's greater than the min-width of 992px, your .container element will have a width of 970px. You then slowly widen your browser window. The width of your .container won't change until you get to 1200px, at which it will jump to 1170px wide and stay that way for any larger browser widths.
Your .container-fluid element, on the other hand, will constantly resize as you make even the smallest changes to your browser width.
Consult here for more details.
you can define this code under the HTML element "col-lg-3" for bg-3 bootstrap this code work also with bootstrap 4 and bootstrap3.
Related
I'm using Isotope to present a grid of images within a Bootstrap 3 framework.
I've got a sticky footer (using recommended absolute positioning with bottom set to 0).
When the browser window is reduced in height, the div containing the isotope-d images doesn't stop where the sticky footer begins - so the bottom-most 60px of the div (actual amount depends on height set for footer) is hidden by the footer OR extends below the footer. The difference is determined on whether I set a height for the container divs.
Here's the html from https://codepen.io/marklsanders/pen/KrRVaK:
the codepen contains an example
I'm guessing the problem is caused by the fact that all the images positioned by Isotope are absolutely positioned.
Any suggestions as to how to work with this correctly?
thanks
Try changing your footer from position: absolute; to position: fixed;, and add padding-bottom: 75px; to your <body>.
Bear in mind that when you position absolute or fixed, that element is removed from the regular flow of the document. When you position it, it will most likely conflict with another statically positioned element.
In this case, adding padding to the body 'simulates' in the regular document the space that is actually occupied by the footer.
Additional note: The sticky footer approach generally means you'll need to set a fixed height for your footer. I've used 75px for the padding on the body, but you can fiddle with this for best results.
I am new to BS3 and i'm trying to use a responsive image with the img-responsive class that spans the width of the container across all screen sizes and devices. What I have so far works apart from screen break points between 768px and 992px where the image doesn't retain its 100% width. I'm not quite sure where I am going wrong. plus I can not seem to remove left/right padding so it covers the complete width of the container. Ive tried using Jumbatron with no success.
I simply have an image in my outer container like so: -
<div class="container-fluid wrapper">
<img class="img-responsive" src="../images/home/hands-and-key.jpg" alt=""/>
</div>
Do I need to use rows and column classes for this?
I have a background which cycles through images, these images have no fixed sizes.
My problem is that I cannot find a simple responsive frame for re-sizing images which are dedicated background images. There are plenty of plugins for normal images on websites.
The background of my website always has to have the image displayed.
cropping is allowed, is allowed the image must re-position itself in the center of the web browser.
jQuery or #Media is allowed, I don't really mind.
My images and div look like this:
<div style="width:100%; height:100%; background:white; position:absolute; margin-left:0px; margin-top:0px;>
<img src="image1.png">
<img src="image2.png">
<img src="image3.png">
</div>
A lot of the plugins out there set width to 100% and the height to auto. This will not work as if the browser width is, let's say, 200px and browser height 800px. The image will not cover the entire screen and keep it's aspect ratio. There will be a "gap" under and above the image, so in this case, the height should be 100% and width changed to auto. And of course the other way around if the browser height is 200px and browser length is 800px;
Example of what I want: http://www.martinlogin.se/
You're asking for two different scenarios to be applied depending on screen aspect. This can be done with media queries, but you'll need to settle on some widths and heights.
Start with width-based sizing:
#backgroundDiv {width: 100%; height: auto;}
When the site is narrower than some point, switch to height-based sizing:
#backgroundDiv {width: auto; height: 100%;}
You'll need to decide where the transition takes place based on your expected audience's most likely screen size/aspect scenarios, the images you're using, etc.
To have even more flexibility, say for particular aspect ratios instead of widths, you'll need scripting.
I am using an background image which is inside a header tag. The coding looks like this:
<div id "header">
<div id "logo">
<div id "nav">
</div>
</div>
</div>
The header is inside a container element which is sized at width:75%. The logo image is 1024px wide and 75px height. I am trying to find a solution that would keep the logo image which is inside a background tag at 100% width of the container element and when re-sized it is re-sized proportionally.
The solution I have thought of is
background-size:auto;
I have chosen the 1024px as it would accommodate most screen. The min-width would be 780px and the max-width:1024px.
What is the best solution to have this background image re-size in proportion the the visitor screen and the container element which it is in.
Thanks
Try this:
background-size: 100%;
The best method I found to work was
min-width:100%;
The only way to resize background is with JavaScript.
The code using jQuery is here: https://gist.github.com/epoberezkin/5070642
So i am looking to do something like what the apple inspector tool does, but with CSS for a project i am working on.
So, the idea is on a certain page of the site, the site is shaded out (much like a lightbox or thickbox) but certain Divs, & other elements are still visible. This is similar to what Safari does when you inspect an element. It blacks out the rest of the page, apart from that element.
So, any idea?
Cheers!
J
In working with Dojo Javascript widgets, it implements modal dialogs by having one large element be hidden (display:none; background-color:#000; opacity:0.5;) most of the time, though positioned to cover the screen (position:absolute; top:0; left:0; and width and height set by Javascript to the full window size). Then it is given a z-index value and all elements that are intended to be visible are given a z-index above it. If you can relative-ly or absolute-ly position all the elements you want to highlight, this method would work for you.
With just CSS? If so, the best I could come up with is this:
<style>
a:hover *:not(#except)
{
background:green;
}
</style>
<a href="#">
Link
<p>
green
</p>
<p id="except">
black
</p>
</p>
Unfortunately the :not() selector is part of CSS3 and most browsers do not yet support it (but Safari 4 does).
That is one possibility, but not so nice.
Another option would be with Javascript. If you are only working with rectangular block elements how about getting the x and y value of the element to stay normal, then cutting out four pieces (up, down, left, right) of that element. Absolutely position some divs whose background is some semi-transparent PNG.
ie.
------------------
|lef|---up---|rig|
|t--|________|ht-|
|---| normal |---|
|---|________|---|
|---|-down---|---|
------------------