I am trying to achieve this:
I want the three panels in the gray <div> to overlap with the white jumbotron above them. How can I do this in CSS or with Bootstrap?
HTML:
<div id="home-page">
<div class="container text-center">
<div class="row">
<div class="col-sm-4">
<div class="panel">
</div>
</div>
<div class="col-sm-4">
<div class="panel">
</div>
</div>
<div class="col-sm-4">
<div class="panel">
</div>
</div>
</div>
</div>
<div class="container">
<h3>Passionate About Technology?</h3>
<p>We make and effort to learn something everyday</p>
LEARN
</div>
</div>
CSS
#home-page { background: #EFEFEF; }
#home-page .panel { box-shadow: 0px 0px 10px gray; margin: 15px; }
Thanks!
I was able to replicate the pic you had with a few adjustments to your code:
here is the css:
#home-page {
background: #EFEFEF;
}
#home-page .panel {
box-shadow: 0px 0px 10px gray;
margin: 15px;
margin-top:-50px;
height:200px;
}
#jumbo{
height:100px;
}
I also added a div on top to get that effect
<div id="jumbo"></div>
please see my codepen
http://codepen.io/sammyb123/pen/dMJaRw
View below snippet in Full page. If you want the same effect on smaller devices then use col-xs instead.
#home-page .panel {
box-shadow: 0px 0px 10px gray;
height: 250px;
margin-top: -15px;
}
#home-page .jumbo-ctr {
background: #fff;
margin-bottom: 20px;
}
#home-page .panel-ctr {
background: #EFEFEF;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div id="home-page">
<div class="container jumbo-ctr">
<h3>Passionate About Technology?</h3>
<p>We make and effort to learn something everyday</p>
LEARN
</div>
<div class="container-fluid text-center panel-ctr">
<div class="row">
<div class=" col-sm-offset-3 col-sm-2 ">
<div class="panel">
</div>
</div>
<div class="col-sm-2 ">
<div class="panel">
</div>
</div>
<div class="col-sm-2 ">
<div class="panel"></div>
</div>
</div>
</div>
</div>
Related
I'm working on an Angular 7 blog application where I'm having some difficulty in adjusting the view of a template made with bootstrap 4. In the main HTML component, I've created two cards in a row, one of it is the blog posts and the other card contains category. The category card is getting fetched from a different component and called using it's selector i.e <app-blog-category></app-blog-category> in the main HTML component. Below are the problems I'm facing in the view. Please look at the image below for reference. Also you can view it from this link ---> https://stackblitz.com/edit/angular-tlbxbr?file=src%2Fapp%2Fapp.component.html
1) The category card is getting rendered beside the last blog document thus leaving a significant amount of space on the top. If I apply style margin-top:negetive-value on the card class as style it is getting resolved but then again the value is differing as the device-width increases or decreases and it goes way above or below than what is needed.
2) the image inside the horizontal card is not taking the full height and width of the card
3) When the device-width is between than 768px-991px, the category card elements i.e the header and list items are breaking maybe due to too much padding around them or being centered.
HTML:
<div class="container">
<div class="row col col-md-12 mx-auto" style="text-align:center; font-size:22px">All Blogs
<br><br><br><br>
</div>
<div class="row" *ngIf="allBlogs.length>0">
<div class="col-md-9 card" *ngFor="let blog of allBlogs">
<div class="row">
<div class="col-md-4">
<a [routerLink]="['/blog', blog.blogId]"><img src="http://localhost:4000/{{blog.imagePath}}" class="card-img-top card-img-size" alt="blog1"></a>
</div>
<div class="col-md-8 px-3">
<div class="card-block px-3">
<h4 class="card-title">{{blog.title}}</h4>
<p class="card-text">{{blog.description}}</p>
<br>
<a [routerLink]="['/blog', blog.blogId]" class="mt-auto btn btn-primary">Read More</a>
</div>
</div>
</div>
</div>
<div class="col-md-3 col-sm-12">
<div class="container"> //note that this part is called from a separate angular component by it's selector <app-blog-category></app-blog-category>
<div class="row">
<div class="col-md-12 card">
<article class="filter-group">
<div class="card-body">
<header class="card-header">
<h6 class="title">Categories</h6>
</header>
<ul class="list-menu">
<li *ngFor="let category of categories" [routerLink]="['/bycategory/', category.categoryId]">{{category.categoryName}}</li>
</ul>
</div>
</article>
</div>
</div>
</div>
</div>
</div>
</div>
CSS:
.card-block {
font-size: 1em;
position: relative;
margin: 0;
padding: 1em;
border: none;
border-top: 1px solid rgba(34, 36, 38, .1);
box-shadow: none;
}
.card {
font-size: 1em;
overflow: hidden;
padding: 5;
border: none;
border-radius: .28571429rem;
box-shadow: 0 1px 3px 0 #d4d4d5, 0 0 0 1px #d4d4d5;
margin-top:20px;
}
.btn {
margin-top: auto;
}
.filter-group {
border-bottom: 1px solid #e4e4e4
}
.card-header {
padding: 0.75rem 1.25rem;
margin-bottom: 0;
background-color: #fff;
border-bottom: 1px solid rgba(0, 0, 0, 0.1)
}
.filter-group .card-header {
border-bottom: 0
}
.icon-control {
margin-top: 6px;
float: right;
font-size: 80%
}
.list-menu {
list-style: none;
margin: 0;
padding-left: 0
}
.list-menu a {
color: #343a40
}
a {
text-decoration: none !important;
background-color: transparent
}
I hope this works for you :
<div class="container">
<div class="row col col-md-12 mx-auto" style="text-align:center; font-size:22px">All Blogs
<br>
<br>
<br>
<br>
</div>
<div class="row">
<div class="col-12 col-md-9 order-2 order-md-1">
<div class="row" *ngIf="allBlogs.length>0">
<div class="col-md-12 card" *ngFor="let blog of allBlogs">
<div class="row">
<div class="col-md-4 p-0">
<a href="#">
<div class="card-img-top card-img-size" style="height: 100%; background-image: url('https://images.pexels.com/photos/1804035/pexels-photo-1804035.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500'); background-size: cover; background-position: center;" alt="blog1"></div>
</a>
</div>
<div class="col-md-8 px-3">
<div class="card-block px-3">
<h4 class="card-title">{{blog.title}}</h4>
<p class="card-text">{{blog.description}}</p>
<br>
Read More
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-3 order-1 order-md-2" style="margin-top: 1.1%;">
<app-blog-category></app-blog-category>
</div>
</div>
</div>
How can I make responsive layout like this?
I need only few tips how to do it. I dont need full source code. Sorry for my english.
My code:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-6">
<img src='https://via.placeholder.com/350x150' />
</div>
<div class="col-md-6">
CONTENT
</div>
</div>
<div class="row">
<div class="col-md-6">
CONTENT
</div>
<div class="col-md-6">
<img src='https://via.placeholder.com/350x150' />
</div>
</div>
</div>
I want img to be half page size.
Check fiddle and snippet below. It is fully responsive and it is working in any device.
body {
padding:15px 0;
}
.content-box {
position:relative;
width:100%;
min-height:350px;
background:#ccc;
margin:15px 0;
}
.img-box.left {
position:absolute;
top:-15px;
right:-15px;
bottom:-15px;
width:calc( 50vw - 15px );
background:red;
}
.img-box.right {
position:absolute;
top:-15px;
left:-15px;
bottom:-15px;
width:calc( 50vw - 15px );
background:red;
}
#media only screen and (max-width: 768px) {
.img-box.left, .img-box.right {
position:absolute;
top:0px;
left:0px;
right:0px;
bottom:0px;
width:100%;
background:red;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div class=container>
<div class="row">
<div class="col-md-6">
<div class="content-box">
<div class="img-box left">
image
</div>
</div>
</div>
<div class="col-md-6">
<div class="content-box">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="content-box">
</div>
</div>
<div class="col-md-6">
<div class="content-box">
<div class="img-box right">
image
</div>
</div>
</div>
</div>
</div>
</body>
https://jsfiddle.net/Sampath_Madhuranga/tfz87bqe/18/
This works for you...Check and let me know if need any help.
Thanks.
here's your layout with bootstrap 4. put image into box--wide but keep in mind pink divs are absolutely positioned so they will not resize the parent - they will take full parent's height which depends on content in gray box
to make this responsive - my suggestion is to wrap images into .col-12and for desktop set it's to position static while images are absolute so they will align inside .container, not .col-12 and on mobile images should be just static
.container {
background: #5f408c;
padding: 20px;
}
.container h1 {
text-align: center;
color: white;
}
.box {
min-height: 200px;
display: flex;
justify-content: center;
align-items: center;
color: white;
font-weight: bold;
text-transform: uppercase;
font-size: 40px;
}
.box--wide {
position: absolute;
left: 15px;
right: calc(50% + 15px);
}
.box--wide:last-child {
right: 15px;
left: calc(50% + 15px);
}
.box--pink {
background: #ec008c;
}
.box--gray {
background: #272827;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-12">
<h1>TITLE</h1>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="box box--pink box--wide">image</div>
<div class="col-12 col-md-6 offset-md-6 ">
<div class="box box--gray">content</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-12 col-md-6">
<div class="box box--gray">content</div>
</div>
<div class="box box--pink box--wide">image</div>
</div>
</div>
I have an image I am trying to replicate as seen in the image. I am trying to use bootstrap to limit the CSS.
The image I am copying is this
I have being trying to wrap my head around it but can't seem to figure it out. Below is an example of the code I have so far
<div class = "container col-md-offset-2">
<div class="row">
<div class="col-md-8 ">
<div class="row">
<div class="col-md-12 well"><img class = "img-responsive" src=""></div>
</div>
<div class="row">
<div class="col-md-12 well"><img class = "img-responsive" src=""></div>
</div>
</div>
<div class="col-md-4 well"><img class = "img-responsive" src=""></div>
</div>
</div>
.banner_text {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
color: #fff;
font-size: 36px;
}
.banner_wrapper {
background: lightgreen;
height: 250px;
}
.left_wrapper_block {
height: 150px;
padding: 30px;
margin: 10px 0;
background: lightblue;
}
.right_wrapper_block {
padding: 30px;
margin: 10px 0;
background: lightyellow;
height: 310px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-12 banner_wrapper">
<p class="banner_text">Latest News</p>
</div>
</div>
<div class="row">
<div class="col-md-6 left_wrapper">
<div class="left_wrapper_block">
<p>Resources</p>
</div>
<div class="left_wrapper_block">
<p>Lorem Serum</p>
</div>
</div>
<div class="col-md-6 right_wrapper">
<div class="right_wrapper_block">
<p>Lorem Serum</p>
</div>
</div>
</div>
</div>
What is the way of making div's have equal heights within the row?
it says everywhere that bootstrap4 is flex by default, but it doesn't work for some unknown reason
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div class="content" >
<div class="sub_title"> HISTORY </div>
<div class="desc"> Sometext </div>
</div>
</div>
</div>
<div class="row">
<div class="col-12 col-sm-6 col-md-6 col-lg">
<div class="content">
<div class="sub_title">
<div class="number"> 2012 </div>
</div>
<div class="desc"> some other text </div>
</div>
</div>
<div class="col-12 col-sm-6 col-md-6 col-lg ">
<div class="content">
<div class="sub_title">
<div class="number"> 2014 </div>
</div>
<div class="desc"> More text </div>
</div>
</div>
<div class="col-12 col-sm-6 col-md-6 col-lg ">
<div class="content">
<div class="sub_title">
<div class="number"> 2017 </div>
</div>
<div class="desc"> Text here too </div>
</div>
</div>
</div>
the scss
.content {
#extend .effect8;
background: white;
margin: 10px;
padding: 10px 30px 20px;
span {
display: block;
p {
font-weight: bold;
}
}
}
.sub_title {
font-size: 1.5em;
font-weight: 700;
text-transform: uppercase;
display: block;
color: $blue;
margin: 10px auto;
}
this is the scss for the content and the sub_title class
If you want .content to be full height on each .col, the content should have height:100%;. I don't know the CSS def of .effect8.
.content {
background: white;
margin: 10px;
padding: 10px 30px 20px;
height: 100%;
span {
display: block;
p {
font-weight: bold;
}
}
}
https://www.codeply.com/go/B4g6TlSDkA
Actually it depend of browser, e.g In Safari it may not work, and also in Internet Explorer may have unwanted behaviors.
If you're really want equal and avoid cross browser issue try JS solution e.g http://brm.io/jquery-match-height/
I am trying to align the text "address" in left div vertically. But i am unable to.
Here is the code,
div.row {
border: 1px solid black;
padding: 10px;
}
.centre {
display: block;
text-align: center;
vertical-align: middle;
background: yellow;
height: 100%;
}
<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-md-3 centre">
<label>Address</label>
</div>
<div class="col-md-6">
<div class="row">
<!--nested row one-->
<div class="col-md-6">
<label>Street</label>
</div>
<div class="col-md-6">
<input name="stname">
</div>
</div>
<div class="row">
<!--nested row two-->
<div class="col-md-6">
<label>Landmark</label>
</div>
<div class="col-md-6">
<input name="lmark">
</div>
</div>
<div class="row">
<!--nested row three-->
<div class="col-md-6">
<label>Zip code</label>
</div>
<div class="col-md-6">
<input name="zipcode">
</div>
</div>
</div>
</div>
<!--row end-->
</div>
What am i doing wrong. I am using bootsrap 3.
Plunker: https://plnkr.co/edit/cu4ZJVSp3jYTyBwz4NKB?p=preview (View Plunker in full screen)
I am trying to have result similar to this. The coloured borders are only for representation .
You are setting the styles to the center div, instead it should be the label inside the center div
<!DOCTYPE html>
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="script.js"></script>
<style>
div.row div{
border: 1px solid black;
padding: 10px;
}
.centre label{
display: block;
text-align: center;
vertical-align: middle;
background: yellow;
height: 100%;
padding:5px;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-3 centre">
<label>Address</label>
</div>
<div class="col-md-6">
<div class="row"><!--nested row one-->
<div class="col-md-6">
<label>Street</label>
</div>
<div class="col-md-6">
<input name="stname">
</div>
</div>
<div class="row"><!--nested row two-->
<div class="col-md-6">
<label>Landmark</label>
</div>
<div class="col-md-6">
<input name="lmark">
</div>
</div>
<div class="row"><!--nested row three-->
<div class="col-md-6">
<label>Zip code</label>
</div>
<div class="col-md-6">
<input name="zipcode">
</div>
</div>
</div>
</div><!--row end-->
</div>
</body>
</html>
you can add this code in your CSS file to get vertical-align.
but first, you have to add a new class with row class
<!DOCTYPE html>
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="script.js"></script>
<style>
.vertical > div {
display: table-cell;
vertical-align: middle;
float: none;
}
.vertical > div {
display: table-cell;
vertical-align: middle;
float: none;
}
div.row div{
border: 1px solid black;
padding: 10px;
}
.centre label{
display: block;
text-align: center;
vertical-align: middle;
background: yellow;
height: 100%;
padding:5px;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row vertical">
<div class="col-md-3 centre">
<label>Address</label>
</div>
<div class="col-md-6">
<div class="row"><!--nested row one-->
<div class="col-md-6">
<label>Street</label>
</div>
<div class="col-md-6">
<input name="stname">
</div>
</div>
<div class="row"><!--nested row two-->
<div class="col-md-6">
<label>Landmark</label>
</div>
<div class="col-md-6">
<input name="lmark">
</div>
</div>
<div class="row"><!--nested row three-->
<div class="col-md-6">
<label>Zip code</label>
</div>
<div class="col-md-6">
<input name="zipcode">
</div>
</div>
</div>
</div><!--row end-->
</div>
</body>
</html>
Here's a solution setting top margin/padding on columns not nested then cancelling top margin/padding in nested ones:
Plunkr
Relevant CSS:
[class*="col-"] {
border: 1px solid black;
padding: 10px;
}
.row:first-child [class*="col-"] {
margin-top: 10px;
background-color: lightgreen;
}
.row .row:first-child [class*="col-"] {
margin-top: -10px;
background-color: pink;
}
.row .row:not(:first-child) [class*="col-"] {
margin-top: 0;
background-color: lightblue;
}
Solution by #codegeek which avoids these problems is better imho :)
Code Pen
You can remove the offset and match it up to 12-grid system.
div.row {
border: 1px solid black;
padding: 10px;
}
.centre {
background: yellow;
top: 60px;
border: 1px solid blue;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-xs-3 centre">
<label>Address</label>
</div>
<div class="col-xs-8 col-sm-offset-1" style="border:1px solid green">
<!--You can remove style and remove offset and change it to sm-9 -->
<div class="row">
<!--nested row one-->
<div class="col-xs-6">
<label>Street</label>
</div>
<div class="col-xs-6">
<input name="stname">
</div>
</div>
<div class="row">
<!--nested row two-->
<div class="col-xs-6">
<label>Landmark</label>
</div>
<div class="col-xs-6">
<input name="lmark">
</div>
</div>
<div class="row">
<!--nested row three-->
<div class="col-xs-6">
<label>Zip code</label>
</div>
<div class="col-xs-6">
<input name="zipcode">
</div>
</div>
</div>
</div>
<!--row end-->
</div>
As for now, margin-top is a worth option trying.
I positioned the left div by using top: 50%(takes the height of the parent) and then using translateY, which takes the height of the current element.
Since relative positioning didnt take % values, I have used absolute.
But giving absolute makes the div come out of the document flow, hence used "left" for the right sibling with the width of the left sibling.
.parent{
position: relative;
}
.centre{
background: yellow;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.right{
left: 25%;
/* width of left sibling, since col-md-3 is 25%*/
background: lightgreen;
}
Plnkr Link(with bootstrap) or JsFiddle (without Bootstrap)
Result:
Your vertical-align:middle doesn't work, because elements with display: block cannot be centered that way. An easy alternative would be to use display: flex.
Here is a snippet to demonstrate the way display:flex can be used to center pretty much everything:
div.row div{
border: 1px solid black;
padding: 10px;
}
.centre{
display: block;
text-align: center;
vertical-align: middle;
background: yellow;
height: 100%;
}
.flex {
display: flex;
align-items: center;
}
<div class="container-fluid">
<div class="row">
<div class="flex">
<div class="col-md-3 centre">
<label>Address</label>
</div>
<div class="col-md-6">
<div class="row"><!--nested row one-->
<div class="col-md-6">
<label>Street</label>
</div>
<div class="col-md-6">
<input name="stname">
</div>
</div>
<div class="row"><!--nested row two-->
<div class="col-md-6">
<label>Landmark</label>
</div>
<div class="col-md-6">
<input name="lmark">
</div>
</div>
<div class="row"><!--nested row three-->
<div class="col-md-6">
<label>Zip code</label>
</div>
<div class="col-md-6">
<input name="zipcode">
</div>
</div>
</div>
</div>
</div><!--row end-->
</div>
EDIT: maybe this guide might be of interest for you:
Centering in CSS: A Complete Guide