I need to create a kind-of 'outter' container of images to surround a div which contains text. Please see the attached image for a rough idea of what i'm trying to achieve. I've tried using columns with bootstrap but I'm unable to create the image overlap effect (on the right-hand side).
<!-- Top Layer -->
<div class="col-md-12"><img src="image1.png"></div>
<!-- Left Layer -->
<div class="col-md-3"><img src="image2.png"></div>
<!-- Text (Middle) -->
<div class="col-md-6"><p>This is the text This is the text</p></div>
<!-- Right Layer -->
<div class="col-md-3"><img src="image3.png"></div>
But this obviously causes problem with the long image on the right-hand side.
Any ideas how to complete this with CSS?
Any help would be greatly appreciated. Thanks
I would do it as 3 columns, although you haven't described how you would like this to look on smaller screens as the columns will collapse in order. The below snippet is a rough example of what you could do.
.padded {
padding: 1px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Left Column -->
<div class="center-block" style="width: 80%">
<div class="row">
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
<div class="row">
<img src="http://via.placeholder.com/100x100" class="padded" />
</div>
<div class="row">
<img src="http://via.placeholder.com/100x100" class="padded" />
</div>
<div class="row">
<img src="http://via.placeholder.com/100x100" class="padded" />
</div>
</div>
<!-- Text (Middle) -->
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<div class="text-center">
<img src="http://via.placeholder.com/200x100" class="padded" />
</div>
<div class="panel">
This is the text This is the text
</div>
</div>
<!-- Right Column -->
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
<div class="row">
<img src="http://via.placeholder.com/100x200" class="padded" />
</div>
<div class="row">
<img src="http://via.placeholder.com/100x100" class="padded" />
</div>
</div>
</div>
</div>
Alright, from what i can get, you need to arrange the images kind-of as an inverted 'U'- shaped and place the text in the between of the two side images. The idea is to float the images left or right accordingly and then set the display of the text as inline-block.
The following code places 4 boxes in an arrangement as asked in the question, you can align them as you want using margin-left property.
NOTE This arrangement is only possible if the boxes/divs are wide enough, so make sure to adjust the widths of each div. Not necessarily as i have done you can change it as you wish, just make sure that the boxes are wide enough to fill in the page or the arrangement will not show up.
#top{
display: inline-block;
height: 20%;
width: 50%;
background-color: red;
}
#left{
height: 50%;
width: 25%;
float: left;
background-color: blue;
}
#text{
height: 50%;
width: 50%;
background-color: green;
text-align: center;
float: left;
}
#right{
height: 50%;
width: 25%;
background-color: yellow;
float: right;
}
<body>
<div id='top'></div>
<div id='left'></div>
<div id='right'></div>
<div id="text"></div>
</body>
EDIT Don't know why stackOverflow is not able to show the result on running this code, but i suggest you copy it and run it manually, it will show something like the image attached.
Something like this?
.left-container, .right-container {
width: 60px;
float: left;
}
.center-container {
float: left;
}
.img-small {
width: 40px;
height: 40px;
margin: 10px;
background-color: green;
}
.img-big {
width: 40px;
height: 80px;
margin: 10px;
background-color: green;
}
.img-wide {
width: 80px;
height: 40px;
margin-top: 10px;
background-color: green;
}
.text {
width: 80px;
height: 120px;
margin-top: 10px;
background-color: blue;
}
<body>
<div class='left-container'>
<div class='img-small'></div>
<div class='img-small'></div>
<div class='img-small'></div>
<div class='img-small'></div>
</div>
<div class='center-container'>
<div class='img-wide'></div>
<div class='text'></div>
</div>
<div class='right-container'>
<div class='img-small'></div>
<div class='img-big'></div>
<div class='img-small'></div>
<div class='img-small'></div>
</div>
</body>
Related
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?
I'm trying to build a webpage with the bootstrap 3 framework and the less tool.
For one special page I'd like to center the container horizontally and vertically. I know there are allready some questions out there, but for me they do not work.
So this are the solutions i've tried following:
HTML:
<div class="container hvcenter" > <!-- Container -->
<div class="row"> <!-- Bootstrap Row -->
<div class="col-sm-4">
<img src="img/logo.png" alt="logo" class="img-responsive">
</div>
<div class="col-sm-offset-1 col-sm-7">
<p>Textblock ... </p>
</div>
</div>
</div>
CSS:
.container {
max-width: 85%;
padding-top: 3em;
padding-bottom: 3em;
background-color: silver;
border-radius: #border-radius-large * 6;
}
.hvcenter {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
This effects thath the div is centered horizontally, but not vertically.
An other try was to build in one mor class for vertical alignment and to use the builtin solution for horizontal alignment (.center-block):
HTML:
<div class="container center-block vcenter" > <!-- Container -->
<div class="row"> <!-- Bootstrap Row -->
<div class="col-sm-4">
<img src="img/logo.png" alt="logo" class="img-responsive">
</div>
<div class="col-sm-offset-1 col-sm-7">
<p>Textblock ... </p>
</div>
</div>
</div>
CSS:
.container {
max-width: 85%;
padding-top: 3em;
padding-bottom: 3em;
background-color: silver;
border-radius: #border-radius-large * 6;
}
.vcenter {
display: inline-block;
vertical-alignment: middle;
float: none;
}
I'm happy about every answer. Thanks for spending time on this.
.container {
max-width: 85%;
padding-top: 0;
background-color: silver;
border-radius: #border-radius-large * 6;
}
.vcenter {
display: flex;
align-items: center;
height:10em;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="container center-block" > <!-- Container -->
<div class="row"> <!-- Bootstrap Row -->
<div class="col-xs-4">
<img src="img/logo.png" alt="logo" class="img-responsive">
</div>
<div class="col-xs-offset-1 col-xs-7 vcenter">
<p>Textblock ... </p>
</div>
</div>
</div>
You should try flex. Check out this link:
https://jsbin.com/pezesaquza/edit?html,css,output
So, I'm trying to get this to display properly on mobile phone for the class 'circle-right right' div. Right now, instead of being centered, the circle-right class is displaying too far to the right instead of center. On desktop it displays correctly.
<div class="path-container">
<div class="row">
<div class="large-12 columns ">
</div>
</div>
<div class="row path-item">
<div class="large-7 push-5 columns">
<div id="img1" class="circle circle-left "></div>
</div>
<div class="large-5 pull-7 columns path-text left">
<h3 id="pstop1">Get in touch!</h3>
<a class="pathlinks" href="#" data-reveal-id="myModal">Get in touch>></a>
</div>
</div>
<div class="row path-item">
<div class="large-7 columns">
<div id="img2" class="circle circle-right right"></div>
</div>
<div class="large-5 columns path-text right">
<h3 id="pstop2">Give us feedback!</h3>
<p class="shadow">We're not happy unless your satisfied. During the process, we'll be in touch to make sure we're on the right track.</p>
Get in touch>>
</div>
This is most of the default css that comes with the foundation path template. Tried using media query to select the class and adjust the position, but it wont work. Here's a link to the template http://patterntap.com/code/responsive-timeline
css:
.path-container .path-item .circle.circle-right {
right: 100px;
}
.path-container {
text-align: center;
}
.path-container .circle {
top: 0;
right: 0;
left: 0;
float: none;
margin-bottom: 30px !important;
margin-top: 60px;
margin-left: auto;
margin-right: auto;
}
I'm trying to achieve the following layout for a search result box. Specifically a 100% width and height image that on the right has two stacked containers that equals the height of the image, each with differing background colours that are butted up right against the image.
All attempts to achieve this simple layout are failing miserably. The issue I keep hitting is the when using something like:
<div class="search-result-box">
<div class="row">
<div class="col-md-3">
<img src="" class="img-responsive" style="height: 196px;" height="196">
</div>
<div class="col-md-9">
...
</div>
</div>
</div>
The image doesn't quite fill the col-md-3 column completely and thus you see the column's background.
What's the best way to do this?
Bootstrap columns have a padding of 15px by default. Also the image width has to be 100%. You can do something like this:
<div class="search-result-box">
<div class="row">
<div class="col-md-3" style="padding: 0;">
<img src="" class="img-responsive" style="width: 100%;">
</div>
<div class="col-md-9">
...
</div>
</div>
</div>
Jsfiddle: http://jsfiddle.net/HM4gE/1/
I wouldn't use Bootstrap columns though to achieve this since you seem to have some fixed heights and widths for columns. Instead I would do it like this (given that the height and the width of the image is always 196px): http://jsfiddle.net/HM4gE/2/
Check browser support for calc() before using it: http://caniuse.com/calc
Here a possible answer:
<div class="search-result-box">
<div class="row">
<div class="col-md-3">
<img src="" class="img-responsive" style="height: 196px;" height="196" />
</div>
<div class="col-md-9">
<div class="title">Title</div>
<div>Link1</div>
</div>
</div>
</div>
.search-result-box {
display: table;
width: 100%;
}
.row {
display: table-row;
}
.row > * {
display: table-cell;
}
.col-md-3 {
background: orange;
width: 260px;
height: 196px;
}
.col-md-9 {
vertical-align:top;
background: grey;
}
.title {
background: #ccc;
width: 100%;
height: 150px;
}
http://jsfiddle.net/junkie/fAPQ6/2/