I need it to be responsive.. I've tried setting larger image as a div background but it's not responsive.. I end up with the two right images large than the large image... I'm not sure what to do.. I'm using bootstrap, please see my code and any advice would be appreciated.
Also, the two images on the right will display:none on mobile.. so it's not mobile I'm worried about, its from ipad and up that I need it to be responsive and all stay aligned
.large-image {
div {
position: relative;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
width: 100%;
}
}
.large-image-two {
div {
height: 50vw;
#include breakpoint(up, xl) {
height: 43vw;
}
}
#include breakpoint(up, xl) {
max-height: 1100px;
}
}
.tile {
display: none;
#include breakpoint(up, lg) {
display: block;
}
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<section class="image-tile">
<div class="container-fluid padding-sides padding-large pt-0">
<div class="row">
<div class="col-xxl-10 col-lg-9 col-12 large-image large-image-two">
<div class="full-height" style="background-image: url(https://i.picsum.photos/id/847/1370/700.jpg?hmac=kz_PXEVjCOQtig90AKAetNcWNNoJdWMjRMYhOLc6r7w)"></div>
</div>
<div class="col-xxl-2 col-lg-3 col-12 tile">
<div class="row d-flex flex-column full-height">
<div class="top-image col-8">
<img class="full-width" src="https://i.picsum.photos/id/682/250/400.jpg?hmac=ub0-x7bHa0z6PHozDd9A5baHp22hyWuq0NZuhHYmmBE">
</div>
<div class="col-4">
<img class="full-width" src="https://i.picsum.photos/id/545/250/270.jpg?hmac=lfBUvuMl6_uUp1lJI6e4A7KBiB4vzkocSlai_L0fUyE">
</div>
</div>
</div>
</div>
</div>
</section>
Related
I am working with Bootstrap 4 and am trying to have a grid of 4 images, 2 on top and 2 on bottom. I am using the img-fluid class but the image resizes based on the width only making the image height too large and it is getting cut off. I tried setting max-height: 100% but that didn't work.
What's going wrong?
.images-container {
height: 95vh;
}
.nav-button {
width: 100%;
height: 50%;
margin: auto;
font-size: 5em;
color: black;
}
.footer-container {
text-align: center;
}
.bottom-nav-box {
font-size: 1.5em;
margin: 0;
}
.sim-image {
max-height: 100%;
}
i {
margin: auto;
}
body {
height: 100%;
}
html {
height: 100%;
}
footer {
height: 5vh;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-sm-10 h-100 center-container">
<div class="row images-container">
<div class="row top-images-row h-50">
<div class="w-50 d-inline-block image-div">
<img src="https://lorempixel.com/875/656/" class="sim-image" id="simulatorImageTopLeft">
</div>
<div class="w-50 d-inline-block image-div" id="simulatorImageTopRight">
<img src="https://lorempixel.com/875/656/" class="img-fluid sim-image" id="simulatorImageTopRight">
</div>
</div>
<div class="row bottom-images-row h-50">
<div class="col image-div center-block text-center">
<img src="https://lorempixel.com/875/656/" class="img-fluid sim-image" id="simulatorImageBottomLeft">
</div>
<div class="col image-div center-block text-center">
<div class="row">
<div class="col center-block text-center">
<img src="https://lorempixel.com/875/656/" class="img-fluid sim-image" id="simulatorImageBottomRight">
</div>
<div class="col center-block text-center">
<img src="https://lorempixel.com/875/656/" class="img-fluid sim-image" id="simulatorImageBottomRight">
</div>
</div>
</div>
</div>
</div>
</div>
Not 100% sure I'm interpreting the question correctly, but if you want a 2×2 grid of images then you should just be able to do it relatively quick like this;
html:
<div class="panel">
<img src="blah" />
<img src="blah" />
<img src="blah" />
<img src="blah" />
</div>
css:
.panel {
width = whateversizeyouwant;
height = whateversizeyouwant;
display: flex;
flex-wrap: wrap; //the flex stuff should make it display 2×2
}
.panel > img {
width: 50%;
height: 50%;
}
That should work for any set of 4 images.
If you want them to stay the same aspect ratios then under .panel > img set height: auto. Keep in mind this won't give you a perfect square, and the size of the panel div will impact how the images can be sized.
I am very new to responsive website design (well front end development in general) and I am trying to create a basic little angular chat application, using bootstrap, designing with responsiveness in mind the whole way. I am however running into a lot of issues when I start nesting flex boxes, and I think I just don't fully understand it. Ideally these are my views when on a larger device and smaller.
Large:
Small device (note I have not done anything to make the settings change to a button):
And here is the reality that I get when using h-100 (I don't see any built in responsive classes for height, but I could be totally wrong):
I think I understand the issue, I am using h-100 with col-12 and so the left side takes up all the room, and the right side is shunted off the page. I have tried getting this same look with flex-fill and flex-grow-1, but they seem to do nothing to the actual document. Here is my code:
<app-header></app-header>
<div class="container-fluid" id="mainContent">
<div class="row h-100 flex-column-reverse flex-md-row">
<div class="col-md-3 col-12 flex-fill">
<div class="d-flex flex-column h-100 justify-content-between">
<div>
<app-channels></app-channels>
</div>
<div>
<app-settings></app-settings>
</div>
</div>
</div>
<div class="col-md-9 col-12">
<app-messages></app-messages>
</div>
</div>
</div>
(app-messages also uses h-100 to fill the screen)
custom scss:
#import "../node_modules/bootstrap/scss/bootstrap";
html, body {
height: 100% !important;
width: 100% !important;
}
Is there a way I can get this content to switch between the views that I have posted above with purely flexbox instead of using h-100? Or are there responsive classes like, for example, h-sm-100 so that it only uses 100% height on small and above?
Thanks for your time.
for height, you may have to take matter in your own hands... which is not that complex as you can see in this Angular demo
This following code helps produce what you require..
CSS part:
.outsideDiv{ overflow-y:hidden;}
.app-header { height:10vh; background:#000; color:#fff;}
.myHeight{ background: lightgray; }
.mySection{padding:0; }
.app-messages { background: #c7b6c7;}
.createMessage{background: lightyellow; margin: 1%; position: absolute; bottom: 0px; width: 98%; }
.app-settings { background:blue; }
.app-channels { background:#b3fbfb;}
#media SCREEN AND (min-width: 768px){
.myHeight{ height:90vh; }
.app-channels { height: 80%; }
.app-messages { height: 100%; }
.app-settings { height: 20%; }
}
#media SCREEN AND (max-width: 767px){
.myHeight{ height:auto; }
.myHeightSection1 { height:20vh;}
.myHeightSection2 { height:70vh;}
.app-channels { height: 100% }
.app-messages { height: 100%; }
.app-settings { height: 5%; width:20%; position:fixed; right:0; bottom:0; }
}
HTML part:
<div class='outsideDiv'>
<div class="app-header">
<app-header>
</app-header>
</div>
<div class="container-fluid" id="mainContent">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-12 col-12 d-flex flex-column mySection">
<div class="d-flex flex-column h-100 justify-content-between order-last">
<div class='myHeight myHeightSection1'>
<div class="app-channels">
<app-channels></app-channels>
</div>
<div class="app-settings">
<app-settings></app-settings>
</div>
</div>
</div>
</div>
<div class="col-lg-9 col-md-9 col-sm-12 col-12 order-first order-lg-2 order-md-2 mySection">
<div class='myHeight myHeightSection2'>
<div class="app-messages">
<app-messages></app-messages>
<div class='createMessage'>Create Message</div>
</div>
</div>
</div>
</div>
</div>
</div>
I'm trying to get image fit with bootstrap column in a row proportionally within specified height 300px, i have tried so many ways but unfortunately its not fit with column width (my 1st image dimension is 262*380 and 2nd image dimension 546*380 and im using img-responsive class)
I need my image should be like this Expected
but im getting like this Actual
My HTML
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="grid">
<img src="https://static5.thumbtackstatic.com/_assets/images/release/pages/jobs/submodules/gallery/images/lunch-5502ae26.jpg" class="img-responsive" alt="">
</div>
</div>
<div class="col-md-8">
<div class="grid">
<img src="https://static7.thumbtackstatic.com/_assets/images/release/pages/jobs/submodules/gallery/images/lounge-0cd3d802.jpg" class="img-responsive" alt="">
</div>
</div>
</div>
My CSS
.grid {
height: 300px;
border-right: 4px;
}
.grid img {
height: 100%;
}
Try this HTML:
<div class="container">
<div class="row">
<div class="col-md-4 bg-cover grid" style="background-image: url(https://static5.thumbtackstatic.com/_assets/images/release/pages/jobs/submodules/gallery/images/lunch-5502ae26.jpg)">
</div>
<div class="col-md-8 bg-cover grid" style="background-image: url(https://static7.thumbtackstatic.com/_assets/images/release/pages/jobs/submodules/gallery/images/lounge-0cd3d802.jpg)">
</div>
</div>
</div>
with this CSS:
.grid {
height: 300px;
}
.grid img {
height: 100%;
}
.bg-cover {
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
height: 300px
}
I am trying to implement a design from my graphic designer, which whilst looks cool is giving me some headaches as i don't know how to implement in bootstrap.
We have a call to action section, which aligns with the 12 column grid system on its left and right extremes.
It also stretches to the view-port edges:
On the left we have red background stretching all the way to the view-port edge.
On the right we have a grey background image stretching all the way to the view-port edge.
I haven't been able to find a search term for what I am looking to achieve let alone where to start (other than have the cta use the background for the entire width, then overlay a left element over the top).
Any idea on how to code the below graphical layout in bootstrap please?
<section class="cta" style="background: grey; position: relative">
<div class="red" style="position: absolute; left: 0; width: 10%; background: red"></div>
<div class="text-outer">
<div class="container">
<div class="row">
<div class="col-xs-6">left</div>
<div class="col-xs-6">right</div>
</div>
</div>
</div>
</section>
Using <div class="container-fluid"> as a starting point; I am guessing at your page's layout. Let's try this:
See below:
.cntn {
border: 1px red solid; /* you can remove this (not needed) */
}
.red {
background-color: red;
text-align: right;
margin: 0; /* optional */
width: 100px; /* adjust to suit your needs */
float: left;
}
.cta {
margin: 0; /* optional */
float: right;
border: 1px solid green; /* you can remove this (not needed) */
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- make container fluid -->
<div class="container-fluid">
<div class="row">
<!-- heading area: hexagon -->
<div class="red">
<img src="http://placehold.it/100/100" />
</div>
<!-- heading area: call-to-action -->
<section class="cta">
Action
</section>
</div>
<div class="row cntn">
<div class="col-xs-6">left</div>
<div class="col-xs-6">right</div>
</div>
</div>
Simply change 'div class="container"' to 'div class="container-fluid"'
Something like this? Where black should be the grey gradient and max-width:400px could be anything.
.cta {
overflow-x: hidden;
position: relative
}
.text-outer .container {
width: 100%;
max-width: 400px;
background: grey;
z-index: 2;
position: relative;
}
.text-outer:before,
.text-outer:after {
content: "";
position: absolute;
width: 50%;
height: 100%;
top: 0;
}
.text-outer:before {
background-color: red;
left: 0;
}
.text-outer:after {
background-color: black;
right: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<section class="cta">
<div class="text-outer">
<div class="container">
<div class="row">
<div class="col-xs-6">left</div>
<div class="col-xs-6">right</div>
</div>
</div>
</div>
</section>
jsFiddleLink
I created with 3 divs as Left Center and Right but if you want to use Left and center then create your own class. Probably following will work
.custom {
width:calc(100% - (50% - 768px/2));
}
.custom {
width:calc(100% - leftCellWidth);
}
You can set height of left as per height of hex image.
Use jumbotron class outside the class container for full-width, as explained here.
HTML:
<div class="jumbotron">
<div class="container">
<div class="row">
<div class="red col-xs-4">
</div>
<div class="grey col-xs-8">
</div>
</div
</div>
</div>
CSS:
.red {
background: url('awesomeredimage.png');
background-size: cover;
}
.grey {
background: url('awesomegreyimage.png');
background-size: cover;
}
All your divs should be wrapped in the container div. And as some others have also suggested: container-fluid helps.
Within container fluid you can add a regular container for the rest of your content. My code below explains this.
You could take the easy route and just use the entire cta image you've posted as a clickable image with .img-responsive in a col-xs-12. In that case my fix takes you about 2 minutes:
<section style="background: grey; position: relative">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<img src="/img/cta.jpg" class="img-responsive">
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="container">
<!-- All you other content here-->
</div>
</div>
</div>
</div>
</section>
But you could also hack the design into cols, as I try to show in the code snippet below. Of course you need to tweak and decide on the exact sizes yourself.
<section style="background: grey; position: relative">
<div class="container-fluid">
<div class="row">
<div class="col-xs-3 red">
<img src="/img/hexagon.png" class="img-responsive pull-right">
<!--and give this img a negative margin to flow over to the grey area-->
</div>
<div class="col-xs-1 grey-image"></div>
<div class="col-xs-3 grey-image">
<h3 class="text-center">Call to action</h3>
<p class="text-center">Discount etcetera</p>
</div>
<div class="col-xs-5 grey-image">
<button class="btn center-block">Request quote</button>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="container">
<!-- All you other content here-->
</div>
</div>
</div>
</div>
</section>
Use class="container-fluid" instead of class="container" and than do this style:
.container-fluid {
margin-right: auto;
margin-left: auto;
padding-left: 0px;
padding-right: 0px;
}
I'm struggling on how I will code to create a two vertical images and is it possible to lessen the height of the larger image without lessen the width? because I need to fit it on col-md-8 any thoughts about this?
this is the image I need to make.
Click here
HTML and CSS code:
.img-big{ height: 100%;width: 100%; }
<div class="row col-md-8">
<img class="row img-big img-responsive" src="/assets/icons/people-crowd-child-kid-large.jpg"></div>
</div
the above code is what I've used to make the bigger image beside image 2 and 3. the dimension of the large image is 900x767
You can use the flexbox property to achieve what you want and set the image as background.
body, html {
margin: 0;
padding: 0;
color: white;
}
.container {
height: 767px;
display: flex;
}
.left {
background-image: url('http://i.imgur.com/AzeiaRY.jpg');
background-size: cover;
flex: 1;
}
.right {
display: flex;
flex-direction: column;
flex: 0 0 50%;
}
.one {
background-image: url('http://i.imgur.com/AzeiaRY.jpg');
background-size: cover;
flex: 50%;
}
.two {
background-image: url('http://i.imgur.com/AzeiaRY.jpg');
background-size: cover;
flex: 50%;
}
<div class="container">
<div class="left">Left image</div>
<div class="right">
<div class="one">First image</div>
<div class="two">Second image</div>
</div>
</div>
In Bootstrap 5, you can use d-grid gap-x. For example:
HTML
.content {
background-color: transparent;}
.content .left, .content .right {
float: left;}
.full-width-band-hd {
margin-top: -35px;}
.txt-yellow {
color: var(--bs-yellow);}
<section class="container-lg">
<div class="content row">
<h2 class="txt-yellow full-width-band-hd">Head</h2>
<!-- Left Side -->
<h6 class="text-yellow">H6 head</h6>
<h3 class="text-yellow">H3 head</h3>
</div>
<!-- style in content row will become a class later-->
<div class="content row" style="height: 642px;">
<div class="col-md-4 left d-grid gap-3">
<div class="">
<img src="image1" width="100%" height="auto" alt="fp1">
</div>
<div class="">
<img src="image2" width="100%" height="auto" alt="fp2">
</div>
</div>
<!-- End of Left Side -->
<div class="col-md-8 left">
<div class="">
<img src="image3" width="100%" height="auto" alt="fp3">
</div>
</div>
<!-- End of col-md-8 -->
</div><!-- content row -->
</section>
You should format your code like below:
<div class="row">
<div class="col-md-8">
<img class="img-big img-responsive" src="https://en.apkshki.com/storage/5/icon_5dcfce7f86906_5_w256.png"></div>
</div>
<div class="col-md-4">
<img src="https://en.apkshki.com/storage/5/icon_5dcfce7f86906_5_w256.png"></div>
<img src="https://en.apkshki.com/storage/5/icon_5dcfce7f86906_5_w256.png"></div>
</div>
</div>
As you can see the two images at the bottom in col-md-4 if you spread the width 100% the next image will drop below.
You shouldnt really have a class with both a row and a col-md in the class name. (See http://getbootstrap.com/css/)
With regards to reducing the height and not the width are you not able to crop the image down on Paint or Photoshop and upload the image with the correct height?