I've researched and tried dozens of variations and am trying to figure out how to code it in Bootstrap 4, so that the entire image (native 1440 x 380) is visible in the jumbotron with the aspect ratio always maintained. At widths greater than 1440, the image needs to expand, i.e., 1600 x 422. Here's what I have so far, but I can't get the jumbotron to recognize the height of the image. Any suggestions?
HTML
<div class="container-fluid p-0">
<div class="jumbotron">
<div class="container">
<div class="overlay"></div>
<div class="row">
<div class="col-lg-2 col-md-3 col-sm-4">
Content
</div>
<div class="col-lg-6 col-md-6 col-sm-8">
More content
</div>
</div>
</div>
</div>
</div>
CSS
.jumbotron {
border-radius: 0;
margin-bottom: 0;
min-height: 365px;
background: url(hero_image.jpg) no-repeat;
background-size: cover;
}
Related
I'm trying to add a junction (a line) between 2 divs in the middle.
<div class="row">
<div class="col-xs-6 col-md-6">
<div style="background-color:#f39a6f;width:100%;height:100px;">
....1
</div>
</div>
<div class="col-xs-6 col-md-6">
<div style="background-color:#ffff00;width:100%;height:100px;">
....2
</div>
</div>
Thanks for help.
Hope this code will solve your problem.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="row no-gutters">
<div class="col-md-3">
<div class="card bg-success">
<div class="card-body"></div>
</div>
</div>
<div class="col-md-2">
<hr>
</div>
<div class="col-md-3">
<div class="card bg-danger">
<div class="card-body"></div>
</div>
</div>
</div>
My idea is to have the junction (a line) always be the center of a row via absolute/relative positioning, with lower z-index than what those color blocks have so that the line is hidden behind the blocks but shown between the blocks.
The tricky part is accurately calculate the position of the junction line, due to the fact that bootstrap rows have their own paddings. That's why it's better to use SCSS so that you can read bootstrap default values for row and column settings, and calculate the junction line based on those.
But for demo purpose, I will stick with CSS and "hardcode" the pre-configured values from bootstrap.
HTML Structure
<div class="row junction-row">
<div class="col-6 col-sm-3">
<div class="block bg-primary"></div>
</div>
</div class="col-6 col-sm-4 offset-sm-5">
<div class="block bg-danger"></div>
</div>
</div>
CSS
.junction-row {
height: 6rem;
position: relative;
}
.junction-row::after {
content: '';
position: absolute;
background-color: var(--danger);
height: 5%;
// Default bootstrap row's padding is 1rem.
// Width = 100% - left padding of the row - right padding of the row
width: calc(100% - 2rem);
// Top = total height 100% - the height of the line, and then divide by 2
// to have the line stay in the center of the row.
top: calc((100% - 5%) / 2);
// Left = starting after the row's left padding
left: 1rem;
// Any value here, but it needs to be lower than what .block has
z-index: 1;
}
.block {
position: relative;
height: 6rem;
z-index: 2;
}
Result
demo: https://jsfiddle.net/davidliang2008/vknor3cz/32/
I don't believe you can have this and have your column sizes at 6 each. I can think of 2 ways. Make them 5 and use this. This comes from their documentation on the grid system.
https://getbootstrap.com/docs/4.0/layout/grid/
<div class="row justify-content-between">
<div class="col-5">
One of two columns
</div>
<div class="col-5">
One of two columns
</div>
</div>
Or if you don't mind that junction being static width then you could do this. Effectively making the junction width static and each side equal in the remaining width.
<div class="row">
<div class="col">
1 of 2
</div>
<div class="col-auto" style="width:30px"></div>
<div class="col">
2 of 2
</div>
</div>
i already found some questions regarding this topic but none of them could really help me solving my problem.
I like to build a simple Bootstrap grid looking like this:
<div class="container-fluid">
<div class="row">
<div class="col-sm-8"> Some Text </div>
<div class="col-sm-4">
<img src="..." alt="Full Size Background Image" />
</div>
</div>
<div class="row">
<div class="col-sm-4">
<img src="..." alt="Full Size Background Image" />
</div>
<div class="col-sm-8"> Some Text </div>
</div>
</div>
The col-sm-4-DIVs should contain a full size background image with the same height as the text and no padding.
Here's a photo of what I mean. I want the background image to cover the red area:
See Example
Any ideas how to do that?
Thank you very much for your help!!!
First option, you can set min-width:100% in your img tag:
img {
min-width: 100%;
}
Or Second option, you can set the image as a background and set it in the div that you want:
<div class="col-sm-4 full-img">
And the css:
.full-img {
background-image: url("....");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
use css to set the background image on the column
<div class="row">
<div class="col-sm-4" style="background-image:url('.....')">
content......
</div>
I might be going about this the wrong way. I have two columns, and the right one is an image. I set a padding on .back, and I want the image I created to both
be responsive. IE, resize proportionally so that parts of it are never cut off. I believe this is achieved right now already.
use all the space given to it. I don't understand why this image's right edge ends before the right side of the page. I've set width to 100%, using container-fluid, and the columns add up to 12. Thoughts?
As a second question, i've added text-center to the div around the image so why is the image not centered when the window size is very small?
.fluid-img {
width: 100%;
height: auto;
}
.back {
padding-top: 150px;
overflow: hidden;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class = 'back'>
<div class = 'container-fluid'>
<div class='row'>
<div class="col-md-5 col-sm-12 col-xs-12">
<div class='text-center'>
<h2 class="title"> Title</h2>
</div>
</div>
<!--//col-->
<div class='col-md-7 col-sm-12 col-xs-12'>
<div class='text-center'>
<img src = "http://i.imgur.com/g4sTWMZ.png" class = 'fluid-img'>
</div>
</div>
</div>
</div>
</div>
there is nothing wrong with the code.. the image you are using has huge blank space at the right side as it's a png image you cannot see it.. download the image and crop it.. your problem is solved
To better Scale your Image you should use img-responsive calss of bootstrap.
Your image ends before the right edge because it contains transparent pixels at the right side, I cropped your image and now it looks fine.
Your image was not getting centered because of the transparent pixels at the right side.
.fluid-img {
width: 100%;
height: auto;
}
.back {
padding-top: 150px;
overflow: hidden;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class = 'back'>
<div class = 'container-fluid'>
<div class='row'>
<div class="col-md-5 col-sm-12 col-xs-12">
<div class='text-center'>
<h2 class="title"> Title</h2>
</div>
</div>
<!--//col-->
<div class='col-md-7 col-sm-12 col-xs-12'>
<div class='text-center'>
<img src = "http://i.imgur.com/FFeYNDn.png" class= 'fluid-img img img-responsive'>
</div>
</div>
</div>
</div>
</div>
I am trying to make a single page full screen layout using Bootstrap 3 where the height of the main body is responsive.
The page is going to be displayed in Kiosk mode displaying 3 panels which display different messages, but as the site is going to be displayed on multiple screens of different sizes I am wanting to get the main to be responsive in height.
https://jsfiddle.net/gokcLvtv/7/
<div class="container">
<div class="row header">
<div class="col-xs-6">
Title
</div>
<div class="col-xs-6 text-right">
LOGO
</div>
</div><!-- Header-->
<div class="row main">
<div class="col-xs-8">
<div class="well">Panel One</div>
</div>
<div class="col-xs-4">
<div class="well">Panel Two</div>
<div class="well">Panel Three</div>
</div>
</div><!--main-->
<div class="row footer">
<div class="col-xs-12">© Copyright 2016</div>
</div><!--footer-->
</div><!--container-->
As you can see I have had to specify a height of the main content to get the cols to be 100% and then the .wells inside the column. But I am wanting this to be 100%.
You can use the vw value for horizontal and vertical resizing.
For example
HTML
<div class="main">
<div class="well">
Panel one
</div>
</div>
CSS
.main {
border: 1px solid red;
height: 75vw;
}
.well {
width: 30vw;
height: 30vw;
margin: 1vw;
}
It's easy to translate from px to vw. Every 1 vw is 10 pixels.
Thanks for your help with the vw ... I have managed to achieve this using vh for the height..
I have created an example for anyone who would like to use this in the future - here
Using the same layout
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<div class="well">Header</div>
</div>
</div>
<!-- main -->
<div class="row">
<div class="col-xs-8 main">
<div class="well">
Main Panel
</div>
</div>
<div class="col-xs-4 side-bar">
<div class="well">
Side Panel One
</div>
<div class="well">
Side Panel One
</div>
</div>
</div>
<!-- Footer-->
<div class="row">
<div class="col-sm-12">
<div class="well">Hello</div>
</div>
</div>
</div>
You will just have to play around with the heights to get it to the screensize that works for you.
I'm trying to keep a main banner on my page the same height as the browser window shrinks. I would like the left / right sides to end up being cut off and the banner to always focus on the center of the image.
http://jsfiddle.net/ab4p4aaj/
<div class="container-fluid">
<div class="row no-gutter">
<div class="col-md-12" id="home">
<img src="http://www.lightswitchcreative.ca/_images/mainslide.jpg" alt="" class="img-responsive" id="mainslide" />
</div>
</div>
Replace your image by a div:
<div class="container-fluid">
<div class="row no-gutter">
<div class="col-md-12" id="home">
<div id="mainslider"></div>
</div>
</div>
</div>
And add the image as background using background-size: cover
#mainslider {
height: 200px;
width: 100%;
background: url(http://www.lightswitchcreative.ca/_images/mainslide.jpg) center no-repeat;
background-size: cover;
}
Here is a JSFIDDLE