I have some images that I want to appear behind my text and I want the text to be centered in the parent div (centered horizontally and vertically), but whenever I change the 'top' value to 50% the text jumps to the top of the page outside of its parent div.
I am using Bootstrap.
.row_comm {
.community-body{
position: absolute;
top: 50%;
}
img {
display: block;
width: 100%;
}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="row row_comm">
<div class="container">
<div class="col-lg-4 col-lg-offset-2">
<img src="https://via.placeholder.com/100x100" class="active">
<img src="https://via.placeholder.com/100x100" class="inactive">
<img src="https://via.placeholder.com/100x100" class="inactive">
</div>
<div class="community-body">
<div class="row">
<div class="col-lg-6 col-lg-offset-4">
<h1>Join.</h1>
</div>
</div>
<div class="row">
<div class="col-lg-5 col-lg-offset-7">
<p class="lead">Some text.</p>
</div>
</div>
</div>
</div>
</div>
You will need to assign position relative to the parent of community-block so set row_com to position: relative in this case.
add position:relative to the main parent and a width to contain the absolute inside.
Related
I want to align this link to right bottom. I already tried adding the below CSS but it only align in the container. I want it to be align in the hero-area.
.rt {
position: absolute;
right: 0px;
bottom: 0px;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<div class="hero-area hero-style-03 christian-hero-bg">
<div class="container">
<div class="row">
<div class="col-lg-5 col-md-7 ml-auto">
<div class="hero-content text-left">
<h2 class="text-black">Text1 </h2>
<div class="ht-btn-area section-space--mt_40 rt">
x
</div>
</div>
</div>
</div>
</div>
</div>
Please check following, as i have changed container to container-fluid because you want it under hero-area.
a.hero-btn {
position: absolute;
bottom: 8px;
right: 16px;
font-size: 18px;
}
<div class="hero-area hero-style-03 christian-hero-bg">
<div class="container-fluid">
<div class="row">
<div class="col-lg-5 col-md-7 ml-auto">
<div class="hero-content text-left">
<h2 class="text-black">Text1 </h2>
<div class="ht-btn-area section-space--mt_40 rt">
x
</div>
</div>
</div>
</div>
</div>
</div>
Add Bootstrap's position:relative class, position-relative to your hero's classes:
.rt
{
position:absolute;
right:0px;
bottom:0px;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="position-relative hero-area hero-style-03 christian-hero-bg">
<div class="container">
<div class="row">
<div class="col-lg-5 col-md-7 ml-auto">
<div class="hero-content text-left">
<h2 class="text-black">Text1 </h2>
<div class="ht-btn-area section-space--mt_40 rt">
x
</div>
</div>
</div>
</div>
</div>
</div>
Absolutely positioned elements are positioned with respect to their closest positioned (non-static) ancestor, so setting position: relative on the hero makes the x move in relation to it instead of the body.
Yor master div position is up-left for fixing this problem you most give rt class to your master div.
Example
.rt
{
position:absolute;
right:0px;
bottom:0px;
}
<div class="hero-area hero-style-03 christian-hero-bg rt">
...
</div>
Or you most give all page space to div
I am using Bootstrap 4 and I have the following jumbotron class:
.rounded-circle{
vertical-align: left;
width: 100px;
height: 100px;
border-radius: 50%;
position: absolute;
left: -150px;
top: -50px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="jumbotron rounded-0">
<div class="container">
<div class="row">
<div class="col-md-4">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/Circle_-_black_simple.svg/500px-Circle_-_black_simple.svg.png" alt="..." class="rounded-circle">
</div>
<div class="col-md-8">
this is mobile way of the container and other line
</div>
</div>
</div>
</div>
With this syntax, my desktop view is displaying as well following,
https://i.stack.imgur.com/mUrAe.png
but in my mobile view, it is not displaying in correct position as following https://i.stack.imgur.com/SaRuW.png
then how could I view my image and descriptions on all devices (desktop, tab and phone) as well, I need in the small device top image and then description under the image.
edited image
It's wrong here to use position: absolute with col, flex-box gives you the utility to make the behavior you are trying to reach without position: absolute,
First add the class align-items-center beside class row (this will align center vertically)
Second add the class col-12 to the columns (make the description below the image for smaller size)
Then optionally, you can add the classes text-center and text-md-left (on bigger sizes it will align left and on smaller it will be center)
.rounded-circle{
width: 100px;
height: 100px;
border-radius: 50%;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="jumbotron rounded-0">
<div class="container">
<div class="row align-items-center text-center text-md-left">
<div class="col-12 col-md-4">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/Circle_-_black_simple.svg/500px-Circle_-_black_simple.svg.png" alt="..." class="rounded-circle">
</div>
<div class="col-12 col-md-8">
this is mobile way of the container and other line
</div>
</div>
</div>
</div>
I am wondering if you can take the height of one div and use that to position elements two levels down from it (a child of a child).
I am using Bootstrap and have tried using position: absolute to handle this but it doesn't work. There is also a problem I ran into simply using this:
.prod-pod {
top: 50%;
transform: translateY(+50%);
}
The thing is, there are two elements using .prod-pod and they are different heights, with one having an additional element inside it's col (the one on the left). This makes the one on the left not centered vertically.
<div class="prod-align">
<div class="col-md-4">
<%= link_to "Back to products", packs_path, class: "btn btn-info btn-block top-drop" %> <!-- I don't want this thing centered vertically -->
<div class="wellington top-drop prod-pod">
<h3 class="featurette-heading pack-name center"><%= #pack.title %></h3>
<h4 class="text-muted align-left">License:</h4>
<h4 class="featurette-heading align-right"><%= link_to "EULA", legal_path %></h4>
<div style="clear: both;"></div>
<h4 class="text-muted align-left">Category:</h4>
<h4 class="featurette-heading align-right"><%= #pack.pack_type %></h4>
<div style="clear: both;"></div>
<h4 class="text-muted align-left">Price:</h4>
<h4 class="featurette-heading align-right">$ <%= #pack.price %> <span class="text-muted CAD">USD</span></h4>
<div style="clear: both;"></div>
<button class="btn btn-success btn-block" id="btn-buy" type="button">Purchase This Library</button>
</div>
</div>
<div class="col-md-4"> <!-- This is the tallest element inside .prod-align -->
<div class="wellington top-drop">
</div>
</div>
<div class="col-md-4">
<div class="wellington top-drop prod-pod">
<h3 class="featurette-heading pack-name center">What's inside</h3>
<div class="pack-contents"><%= raw #pack.pack_contents %></div>
</div>
</div>
</div>
What I am trying to achieve is having both .prod-pod divs centered vertically in the .prod-align div.
I am using floats inside one of the divs as well.
Just change the parent div to a flexbox using display:flex and the child elements should have an equal height. Now just use the align-items property to vertically center the child elements' content.
Check this JSFiddle or run the following Code Snippet for a practical example of what I have described above:
#media (min-width: 992px){ /* only apply if "col-md-" and above */
.prod-align {
display:flex; align-items:center;
}
}
.col-md-4 {border: #222 solid 5px;}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="prod-align">
<div class="col-md-4">
<div class="wellington top-drop prod-pod">
<p>short height elements here</p><p>short height elements here</p>
</div>
</div>
<div class="col-md-4"> <!-- This is the tallest element inside .prod-align -->
<div class="wellington top-drop">
<p>long height elements here</p><p>long height elements here</p><p>long height elements here</p><p>long height elements here</p><p>long height elements here</p><p>long height elements here</p><p>long height elements here</p><p>long height elements here</p>
</div>
</div>
<div class="col-md-4">
<div class="wellington top-drop prod-pod">
<p>medium height elements here</p><p>medium height elements here</p><p>medium height elements here</p><p>medium height elements here</p>
</div>
</div>
</div>
You can use display: flex;.
Irrespective of the parent height, the div contents will be vertically centered.
.prod-pod {
border: 1px solid grey;
align-items: center;
display: flex;
}
.height-100{
height: 100px;
}
.height-200{
height: 200px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row prod-align">
<div class="col-md-4 col-sm-4 col-xs-4 col-lg-4">
<div class="wellington top-drop prod-pod height-100">
qqq
</div>
</div>
<div class="col-md-4 col-xs-4">
<div class="wellington top-drop prod-pod height-100">
</div>
</div>
<div class="col-md-4 col-xs-4">
<div class="height-200 wellington top-drop prod-pod">
qqqqqqq000
</div>
</div>
</div>
To center a element in a div with CSS, you need this option :
align-content: center;
Place it on "col-md-4".
But I recommend you use Bootstrap 4. It's VERY easy to make your effect with this version : https://getbootstrap.com/docs/4.2/utilities/flex/
I hope it will help you.
My goal is to achieve the following image on my page:
I managed to achieve this with the HTML and CSS you can find below, but it doesn't seem very viable, because the sidebar is losing it's physical height because of the position: absolute.
I'm wondering if it's possible to make one row with two columns on the left and a sidebar on the right, without having to use positioning.
I tried position: relative with a negative top, but since the top col-md-9 has a changing height (depending on what is entered), I can't give it a negative top. It'll simply be too static and impossible to maintain.
Changing the order in the HTML doesn't change anything, since the physical height of the sidebar will move the 2nd content down.
.sidebar {
position: absolute;
width: 100%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-md-9">
Changing content
</div>
<div class="col-md-3 sidebar">
Sidebar
</div>
<div class="col-md-9">
More content
</div>
</div>
I use xs columns for this example, but you can change to md in your page.
Firstly create a 9-column and a 3-column div. Then put two divs inside the 9-column one.
.content, .sidebar {
margin: 10px;
padding: 20px;
}
.content {
background-color: navy;
color: white;
}
.sidebar {
background-color: yellow;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row wrapper">
<div class="col-xs-9">
<div class="row">
<div class="col-xs-12">
<div class="content">Content</div>
</div>
<div class="col-xs-12">
<div class="content">Content</div>
</div>
</div>
</div>
<div class="col-xs-3">
<div class="sidebar">Sidebar</div>
</div>
</div>
You can nest col-x-x inside other col-x-x
You just have to create 2 parents: content and sidebar, then add multiple contents into the content parent :
<div class="row">
<div class="col-md-9">
<div class="col-md-12">
Content
</div>
<div class="col-md-12">
More content
</div>
</div>
<div class="col-md-3 sidebar">
Sidebar
</div>
</div>
You cannot have more that 12 columns in a row unless it is not defined in your custom grid.
What you can try is this:
<div class="row">
<div class="col-md-9">
<div class="row">
<div class="col-sm-12">
Changing content
</div>
<div class="col-sm-12">
More content
</div>
</div>
</div>
<div class="col-md-3" style="position: relative;">
<div class="row">
<div class="col-sm-12 sidebar">
Sidebar
</div>
</div>
</div>
</div
As a solution, you can make sidebar to stay at the right side of screen if you'll make left section overflow: auto.
.sidebar {
height: 100vh;
background: lightgreen;
}
.left-section {
height: 100vh;
background: lightblue;
overflow: auto;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-sm-9 left-section">
<div class="row">
<div class="col-sm-12">
Changing content
</div>
<div class="col-sm-12">
More content
</div>
</div>
</div>
<div class="col-sm-3 sidebar">
Sidebar
</div>
</div>
</div>
I am struggling with creating a responsive image gallery. I am using CSS and bootstrap, i tried with tag and as background, I couldnt get it to work.
so, this is what I want to achieve:
https://www.socialprintstudio.com/products/
image grid without image warp or overlapping
When you make your browser smaler, image aspect ratio stays the same, only the size changes and later on you get 2 per row, that I can do with col-lg-4 col-md-6 etc...
I would also prefer if I could do this with img tag as I think it is easier to fade one image to another on hover.
this is my HTML
<div class="item " data-categoryid="2">
<div class="item-image">
<div class="img-bg" style="background: url("http://laravel.dev/images/bon2.jpg"); display: none;"></div>
<div class="img-bg" style="background: url("http://laravel.dev/images/bon.jpg");"></div>
</div>
<div class="item-name">Some name</div>
<div class="item-price">price €</div>
<div class="item-button">
Button.
</div>
</div>
As you said, using bootstrap's .col classes is the way to go here:
Here's a resizable jsfiddle: https://jsfiddle.net/aL1ndzgg/1/
Images, by default, will keep their aspect ratio, unless you specify both the width and the height.
For the hover effect you can have only one of the images for each box set as as position: absolute;; that way, the other image will set the size of the box.
.single-image-container {
margin-bottom: 20px;
position: relative;
}
.single-image-container img {
width: 100%;
}
.blocker {
position: relative;
overflow: hidden;
}
.hover-image {
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: opacity 125ms ease-in-out;
}
.single-image-container:hover .hover-image {
opacity: 1;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-xs-6 col-md-4 single-image-container">
<div class="blocker">
<img src="http://placehold.it/400x400" alt="img">
<img class="hover-image" src="http://placehold.it/400x400/f00" alt="img2">
</div>
</div>
<div class="col-xs-6 col-md-4 single-image-container">
<div class="blocker">
<img src="http://placehold.it/400x400" alt="img">
<img class="hover-image" src="http://placehold.it/400x400/f00" alt="img2">
</div>
</div>
<div class="col-xs-6 col-md-4 single-image-container">
<div class="blocker">
<img src="http://placehold.it/400x400" alt="img">
<img class="hover-image" src="http://placehold.it/400x400/f00" alt="img2">
</div>
</div>
<div class="col-xs-6 col-md-4 single-image-container">
<div class="blocker">
<img src="http://placehold.it/400x400" alt="img">
<img class="hover-image" src="http://placehold.it/400x400/f00" alt="img2">
</div>
</div>
<div class="col-xs-6 col-md-4 single-image-container">
<div class="blocker">
<img src="http://placehold.it/400x400" alt="img">
<img class="hover-image" src="http://placehold.it/400x400/f00" alt="img2">
</div>
</div>
</div>
</div>
To make your images responsive add the following CSS:
.item img {
max-width: 100%;
width: 100%;
height: auto;
}
So as long as the image source is square the image will resize to its bootstrap grid
You can also try the following: CSS Tricks: Responsive Images