I have the following four inner div container (small picture - text - small picture - text):
<div class="container">
<div class="col-md-12">
<div class="row">
<div class="col-sm-2">
<div class="components-circle inner-component"></div>
</div>
<div class="col-sm-4">
<h3>Title</h3>
<p class="description">
Some ... long ... text
</p>
</div>
<div class="col-sm-2">
<div class="components-circle inner-component"></div>
</div>
<div class="col-sm-4">
<h3>Title</h3>
<p class="description">
Some ... long ... text
</p>
</div>
</div>
</div>
</div>
The CSS for components-circle and inner-component:
.components-circle {
display: block;
margin: 0 auto;
background-repeat: no-repeat;
height: 115px;
width: 115px;
border-radius: 100%;
border: 2px solid #e0e0eb;
}
.inner-component {
background: url(http://...) no-repeat;
background-position: 20px 15px;
}
The problem is, that components-circle and inner-component are overlapping the text which is on the right side of them when I resize the browser, that means the template is not responsive.
How could I insert a line break when the browser is resized or make components-circle and inner-component responsive, so that they do not overlap the corrsponding text on the right side?
Is the content of the "col-sm-12" div overlapping the content of the page, or the text next to the image that is overlapping?
Anyway, you can fix both of these issues in this way, using a "container" or "row" div and adding a css for page resizing.
.components-circle {
display: block;
margin: 0 auto;
background-repeat: no-repeat;
height: 115px;
width: 115px;
border-radius: 100%;
border: 2px solid #e0e0eb;
}
.inner-component {
background: url(http://...) no-repeat;
background-position: 20px 15px;
}
.center-text{
text-align: left;
}
#media (max-width: 765px) {
.center-text{
text-align: center;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="col-md-12">
<div class="row">
<div class="col-sm-2">
<div class="components-circle inner-component"></div>
</div>
<div class="col-sm-4 center-text">
<h3>Title</h3>
<p class="description">
Some ... long ... text
</p>
</div>
<div class="col-sm-2">
<div class="components-circle inner-component"></div>
</div>
<div class="col-sm-4 center-text">
<h3>Title</h3>
<p class="description">
Some ... long ... text
</p>
</div>
</div>
</div>
</div>
You are already using row class so just setting the width of components-circle to 100% (rather than making it static) will work (as bootstrap will handle rest of the responsive stuff).
To keep the aspect ratio of height-width you have to remove height from components-circle and use padding-top. Have a look here to see how it works. (padding-top: 100% gives 1:1 aspect ratio)
Open the below snippet in full-page view and resize to see the effect :)
Though there can be other methods to achieve the same, IMO this one is quite simple and understandable.
.components-circle {
display: block;
margin: 0 auto;
background-repeat: no-repeat;
padding-top: 100%;
width: 100%;
border-radius: 100%;
border: 2px solid #e0e0eb;
}
.inner-component {
background: url(https://i.ebayimg.com/images/g/eiMAAOSwH3haAlKl/s-l300.png) no-repeat;
background-size: contain;
}
<html>
<head>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js" integrity="sha384-u/bQvRA/1bobcXlcEYpsEdFVK/vJs3+T+nXLsBYJthmdBuavHvAW6UsmqO2Gd/F9" crossorigin="anonymous"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
</head>
<body>
<div class="col-md-12">
<div class="row">
<div class="col-sm-2">
<div class="components-circle inner-component"></div>
</div>
<div class="col-sm-4">
<h3>Title</h3>
<p class="description">
Some ... long ... text
</p>
</div>
<div class="col-sm-2">
<div class="components-circle inner-component"></div>
</div>
<div class="col-sm-4">
<h3>Title</h3>
<p class="description">
Some ... long ... text
</p>
</div>
</div>
</div>
</body>
</html>
Update: To keep the inner image at the centre during resize, you have to set it's position to 0px 0px (which is default) and add background-size: contain to the inner-component. This will scale the image to fit the parent. See the updated snippet above!
To make a breakpoint that is hidden on larger viewports, you can use these CSS classes with the line break:
.d-md-none To make it invisible on anything larger than md sized screens.
.d-sm-none To hide it on anything larger than sm sized screens.
You may also need to put the row inside a container.
This is what it would look like: <br class="d-md-none">
If you want a line break without using a <br> element, check out this guide.
Related
I'm trying to build a CMS style html template so that a user can drop content into a template.
I'm using bootstrap grid to create the template but I'm having some issues.
Basically I'm shooting for a main body container, which has a sticky top, a sticky bottom, and then the main middle section filling the rest of the space which houses other areas.
IN this case, the middle section has 2 areas at 50%, one to the left and one to the right.
The problem is my middle section is currently stuck to the very top of the page along with the top section but I need it to fill up the middle the way that I've structured it but I"m not sure how I should change positioning.
Here's the current block:
<head>
<style type="text/css">
html,body{
height:100%;
}
</style>
</head>
<div class="container-fluid" style="text-align: center; height:100%; border: 1px solid red;">
<div class="row top">
<div class="col-lg-12" style=" background-color: #A0A0A0;position: absolute; height: 15%;">
<p style="color: white">Top</p>
</div>
</div>
<div class="row middle">
<div class="col-lg-6" style=" background-color: #A0A0A0">
<p style="color: white">Left</p>
</div>
<div class="col-lg-6" style=" background-color: #A0A0A0;">
<p style="color: white">Right</p>
</div>
</div>
<div class="row bottom">
<div class="col-lg-12" style=" background-color: #A0A0A0; bottom:0; position: absolute; height: 10%;">
<p style="color: white">Bottom</p>
</div>
</div>
</div>
You're making it hard on yourself. Here are a few things you could change to get the desired result and also make it easier for yourself to control and contain your CSS. I've added .my-container class to .container-fluid to keep the changes from applying to other pages, but that's totally optional:
html,
body {
height: 100%;
}
.my-container {
display: flex;
flex-direction: column;
border: 1px solid red;
height: 100%;
}
.my-container>.top [class^="col-"],
.my-container>.bottom [class^="col-"] {
background-color: #A0A0A0;
color: white;
text-align: center;
}
.my-container>.middle {
/* make middle section push header and footer at the margins of available space */
flex-grow: 1;
}
.my-container>.middle>* {
border: 1px solid red;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid my-container">
<div class="row top">
<div class="col-lg-12">
<p>Top</p>
</div>
</div>
<div class="row middle">
<div class="col-lg-6">
<p>Left</p>
</div>
<div class="col-lg-6">
<p>Right</p>
</div>
</div>
<div class="row bottom">
<div class="col-lg-12">
<p>Bottom</p>
</div>
</div>
</div>
I also:
removed inline styles
removed position:absolute (otherwise you'll need to keep header and footer height in sync with <body> or .container-fluid top and bottom paddings which allow all your content to be visible)
used flex to position the header and footer
removed % height which is considered very bad UI (consider what happens on mobile when you rotate the screen - how it affects an element with height:15%).
I have the following
<div class="row">
<div class="col-md-6">
<div class = "box-cell">
<p>
Slightly short text
</p>
</div>
</div>
<div class="col-md-6">
<div class = "box-cell">
<p>
Text that<br>literally<br>spans<br>4 lines
</p>
</div>
</div>
</div>
and css
.box-cell
{
position: relative;
margin: 3px;
border-style: groove ridge ridge groove;
border-width: 3px;
background-size: cover;
}
So the problem that I am facing is that one of the cells is usually taller than the other.IS there any way for me to equalize how much height each cell takes up?
Searching didn't yield me which property I can manipulate to get same height :(
Here is jsfiddle
However in this fiddle I can not get them to be side by side to prove my point
EDIT: I guess I didn't specify it properly. I would like to have the borders be as tall as the tallest cell. So all the examples provided here actually take out the borders and instead color the background. If I do that then yes it gives illusion of every cell being the same, but I would like there to be a border of same height.
I tried replicating what it sounds like you are looking for.
I would recommend you mess around with flexbox since it seems to do exactly what you are looking for.
<div class="myc">
<div class="col">
<p>Text of some sorts</p>
<p>Text of some sorts</p>
<p>Text of some sorts</p>
<p>Text of some sorts</p>
</div>
<div class="col">
<p>Text of some sorts</p>
<p>Text of some sorts</p>
<p>Text of some sorts</p>
</div>
</div>
And for the CSS
.myc {
display: flex;
}
.col {
background-color: yellow;
margin-right: 20px;
}
.row {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.row > [class*='col-'] {
display: flex;
flex-direction: column;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="row">
<div class="col-xs-12 col-sm-4" style="background-color: green">
some content
</div>
<div class="col-xs-6 col-sm-4" style="background-color: orange">
some content
<img src="http://placehold.it/100x120">
</div>
<div class="col-xs-6 col-sm-4" style="background-color: magenta">
some of content
</div>
</div>
Some options to solve it:
Different Tricks on How to Make Bootstrap Columns All the Same Height
<style type="text/css">
.box-cell{
position: relative;
margin: 3px;
border-style: groove ridge ridge groove;
border-width: 3px;
background-size: cover;
}
</style>
<div class="row">
<div class="col-md-6">
<div class = "box-cell">
<p>
Slightly short text
</p>
</div>
</div>
<div class="col-md-6">
<div class = "box-cell">
<p>
<span>Text that</span>
<span>literally</span>
<span>s4 lines</span>
<span>ygthfg</span>
</p>
</div>
</div>
</div>
1- you need to add text in span tag.
2- Or take text in one line .
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?
The idea of this is to have a responsive header with text and an image element, which sit on a fixed background image.
I've tried to do this with bootstrap columns, which works on desktop to come out the way I want it. On smaller devices however, the bootstrap media queries do exactly what they are supposed to do and break the columns up to be displayed below each other.
I am out of ideas for this. I know I need to fix the image element somehow to stay consistently on the bottom end of the container, but since the entire thing is responsive I have no idea how to accomplish that.
Here is what I have so far, but this is not the solution. I appreciate any suggestions.
<section class="section swatch-black section-text-shadow section-inner-shadow">
<div class="background-media" style="background-image: url('http://some-url.com/home-intro.jpg'); background-repeat: no-repeat; background-size: cover; background-attachment:fixed; background-position: 50% 60%;"> </div>
<div class="container">
<div class="row">
<div class="col-md-6 text-left element-normal-top element-normal-bottom">
<h1 class="bigger hairline bordered-normal element-tall-top"> Header Text<br>
<strong>More Text </strong> </h1>
<p class="lead"> Even more text </p>
learn more
contact us </div>
<div class="col-md-6 text-right">
<img src="assets/images/uploads/test.png" style="position:relative; right: 0px; bottom: 0px; top: 150px;">
</div>
</div>
</div>
</section>
you can set up your own column structure. Here's an example that I made for you real quick:
http://jsfiddle.net/97wswqvr/
this will need more work obviously, depending on the rest of your header text/buttons etc... but its a good place to start
html
<header>
<div class='content col col-1-2'>
<div>
text text text
</div>
<div>
text text text
</div>
<div>
text text text
</div>
</div>
<div class='col col-1-2 img'>
<img class='col' src='http://store.storeimages.cdn-apple.com/8459/as-images.apple.com/is/image/AppleInc/aos/published/images/i/ph/iphone/compare/iphone-compare-bbh-201411?wid=254&hei=210&fmt=png-alpha&qlt=95&.v=1416449205305'/>
</div>
</header>
css
html,body {
margin: 0;
}
header {
background-image: url(http://wowslider.com/sliders/demo-85/data1/images/southtyrol350698.jpg);
text-align: center;
}
.content {
color: white;
padding: 40px 0;
}
.col {
display: inline-block;
vertical-align: middle;
}
.col-1-2 {
width: 45%;
}
.img {
}
img {
width: 70%;
}