I am trying to create a hero image with text on top of the image. I wanted to create this using mostly bootstrap 4 so I don't have to write a lot of CSS. Bootstrap card has an image-overlay class that helps put text over the image. so I am halfway there thanks to bootstrap, But I am having some issues on mobile and other things. Did i reach the bootstrap limit and need some CSS? or I can modify my bootstrap code and fix these issues below
example image
Problems
on mobile texts and buttons are going outside the image, I want to keep it inside the image
how can I make the "card-image-overlay" left centred like the example (see example image). I
made it left, not centred.
I put w-25 on text and button parent div so that I can control the width and the div stays on the left even if the texts are long (like the lorem ipsum text on example)
my code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="./style/index.css">
</head>
<body>
<div class="container">
<div class="card bg-dark text-white">
<img class="card-img img-responsive" src="https://images.pexels.com/photos/87840/daisy-pollen-flower-nature-87840.jpeg?cs=srgb&dl=bloom-blossom-close-up-87840.jpg&fm=jpg" alt="Card image" width="500px" height="500px">
<div class="card-img-overlay ">
<div class="text-left w-25 ">
<h2 class="card-title "> Headline</h2>
<p class="card-text ">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<div class="">
CTA to Our Locations
</div>
</div>
</div>
</div>
</div>
</body>
</html>
</body>
</html>
The w-25 class isn't responsive (it's 25% width on all screen widths), but the grid classes (row>col*) are responsive. Instead use a row > col-* inside the card, and use the responsive col widths as needed. For example, col-lg-3 col-sm-6 is 33% width on lg and up, 50% width on md and sm, and then becomes full width on xs (mobile).
<div class="card bg-dark text-white">
<img class="card-img img-responsive"
src="https://images.pexels.com/photos/87840/daisy-pollen-flower-nature-87840.jpeg?cs=srgb&dl=bloom-blossom-close-up-87840.jpg&fm=jpg" alt="Card image" width="500px" height="500px">
<div class="card-img-overlay d-flex align-items-center">
<div class="row">
<div class="text-left col-lg-3 col-sm-6">
<h2 class="card-title ">H2 Locations Headline</h2>
<p class="card-text ">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<div class="">
CTA to Our Locations
</div>
</div>
</div>
</div>
</div>
Use d-flex align-items-center on the card-img-overlay to vertically center the row.
https://www.codeply.com/go/eRpRZj9Z8M
Related
I am trying to achieve below using Tailwind CSS Grid:
My HTML code is as below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="tw_style.css" type="text/css">
<title>This is a Testing Site</title>
</head>
<body>
<section class="container h-screen mx-auto bg-red-100 grid grid-rows-10 gap-4">
<!-- Banner Image (left) and Menu Button (right) in same Grid Row-->
<section class="row-span-1">
<banner class="" style="background-image: url(Banner.jpg)">
<h1 class="pt-2 text-center align-top text-3xl font-black text-red-700">This is a Testing Site</h1>
</banner>
<button>
</button>
</section>
</section>
</body>
</html>
[Q1]: Why the background image does not show up until I put a block or flex class <banner class="block" style="background-image: url(Banner.jpg)"> ?
[Q2]: Why text in <h1> tag is not on the top of background image even though align-top is in place ?
Thanks a lot.
Q1: there is no html element named banner. When you use a div it works.
Q2: it is, however since the banner does not have a height defined it can't be on top
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="tw_style.css" type="text/css">
<title>This is a Testing Site</title>
</head>
<body>
<section class="container h-screen mx-auto bg-red-100 grid grid-rows-10 gap-4">
<!-- Banner Image (left) and Menu Button (right) in same Grid Row-->
<section class="row-span-1 grid grid-cols-10">
<div class="bg-no-repeat bg-cover col-span-9" style="background-image: url('https://media.giphy.com/media/26BRQTezZrKak4BeE/giphy.gif')">
<h1 class="pt-2 text-center align-top text-3xl font-black text-red-700">This is a Testing Site</h1>
</div>
<button class="col-span-1">
Menu
</button>
</section>
<div class="row-span-8 text-center text-6xl">Main content</div>
<div class="row-span-1 bg-yellow text-center">Footer</div>
</section>
</body>
Example pen: https://codepen.io/onewaveadrian/pen/MWpvwvx
I'm working on a page (Angular) that dynamically displays bootstrap cards that looks as follows:
<div class="row">
<div class="card border-primary p-0 mb-2 col-md-4 col-sm-6 colxs-12" *ngFor="let m of myVals">
<h4 class="card-header text-center">{{m.Title}}</h4>
<div class="card-body">
<h5>{{m.Year}}</h5>
<img [src]="m.Poster" [alt]="m.Title" class="card-img-top">
</div>
</div>
</div>
The issue I'm facing is with the element <h4 class="card-header text-center">{{m.Title}}</h4>
The challenge is that sometimes the title gets displayed on 2 lines, other times on 1 (but never more than 2) and, so, the cards aren't looking uniform.
What I'm wondering is if there's a Bootstrap / CSS way to always make the card-header display as 2 lines high regardless of the text within it. I've tried setting a CSS style of line-height: 2, but it's not affecting it at all. Any correct / better way to accomplish this?
Thanks!
You can add the custom CSS to do it. check working fiddle below -
.card-header-custom {
min-height:80px;
display:flex;
justify-content:center;
align-items:center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Card Header and Footer</h2>
<div class="row">
<div class="col-sm-6">
<div class="card">
<div class="card-header card-header-custom">Header big content Header big content </div>
<div class="card-body">Content</div>
<div class="card-footer">Footer</div>
</div>
</div>
<div class="col-sm-6">
<div class="card">
<div class="card-header card-header-custom">Header</div>
<div class="card-body">Content</div>
<div class="card-footer">Footer</div>
</div>
</div>
</div>
</div>
</body>
</html>
HTML:
<div>
<h4>
<span>One line heading</span>
</h4>
<h4>
<span>Assume this heading has two lines</span>
</h4>
</div>
CSS:
h4 {
height: 2.5em;
}
h4 span {
line-height: 1.25em;
}
I'm trying to create cards that maintain the position of its button when the user's browser dimensions change.
Desktop full-screen:
When the browser is resized:
I'm trying to keep the card button in the same position when the browser is resized. But in my example the "Upvote" button is moved beneath the text, instead of remaining on the right side. To be more specific, have a look at this picture:
The green space should be reserved for the button, and red space should be the position of the button:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js" integrity="sha384-xrRywqdh3PHs8keKZN+8zzc5TX0GRTLCcmivcbNJWm2rs5C8PRhcEn3czEjhAO9o" crossorigin="anonymous"></script>
<div class="row justify-content-center">
<div>
<div class="container">
<div class="card m-2">
<div class="card-body">
<div class="container p-1">
<img
src="https://1iq2pi1r3dw63rcvw63p8mfb-wpengine.netdna-ssl.com/wp-content/uploads/2017/08/kion-bar-box-600x600.jpg"
class="float-left mr-1"
alt=""
width="60px"
heigth="60px"
/>
<div class="row">
<div class="col-md-11 pr-5">
<h5 class="card-title">Kion Bar 2 - Best energy bar there is no</h5>
<p class="card-text">Best energy bar there is, no other like this that can even..</p>
</div>
<div class="col-md-1 ml-md-auto align-self-center">
<a href="#" class="btn btn-outline-secondary float-right">
Upvote
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col">
<div class="media align-items-center">
<img width="10%" class="align-self-center mr-3" src="https://1iq2pi1r3dw63rcvw63p8mfb-wpengine.netdna-ssl.com/wp-content/uploads/2017/08/kion-bar-box-600x600.jpg" alt="Generic placeholder image">
<div class="media-body">
<div class="row align-items-center">
<div class="col-md-9 col-9">
<h5 class="mt-0">Kion Bar 2 - Best energy bar there is no</h5>
<p>Best energy bar there is, no other like this that can even..</p>
</div>
<div class="col-md-3 col-3">
<a href="#" class="btn btn-outline-secondary float-right">
Upvote
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
It'd be better if you use media, it'll make your work easier. Also .container should use only once within a section.
Containers provide a means to center and horizontally pad your site’s
contents. Use .container for a responsive pixel width or
.container-fluid for width: 100% across all viewport and device
sizes.
Rows are wrappers for columns. Each column has horizontal padding
(called a gutter) for controlling the space between them. This
padding is then counteracted on the rows with negative margins. This
way, all the content in your columns is visually aligned down the
left side.
In a grid layout, content must be placed within columns and only
columns may be immediate children of rows.
You can check the below links for reference
Grid System of Bootstrap
Media
First of all, you are making many mistakes in your markup. You should take the time to learn how to correctly write your markup.
Secondly, learn how to work with images. DO use width and height attributes for your images, but DO NOT specify them in pixels. What you are doing is setting an aspect ratio, not the actual dimensions. The .img-fluid class makes your image responsive. The attributes maintains its aspect ratio. Specifying the aspect ratio will prevent the browser from moving content down the page while it waits to download the image and figure out how to draw it on the canvas.
I believe the following is what you are trying to do.
See it on Bootply
<div class="container-fluid">
<div class="card my-2">
<div class="card-body">
<div class="row">
<div class="col-1">
<img src="https://1iq2pi1r3dw63rcvw63p8mfb-wpengine.netdna-ssl.com/wp-content/uploads/2017/08/kion-bar-box-600x600.jpg" class="img-fluid" alt="" width="600" heigth="600">
</div>
<div class="col-9">
<h5 class="card-title">Kion Bar 2 - Best energy bar there is no</h5>
<p class="card-text">Best energy bar there is, no other like this that can even..</p>
</div>
<div class="col-2">
<a href="#" class="btn btn-outline-secondary btn-block">
Upvote
</a>
</div>
</div>
</div>
</div>
</div>
Remember, you can set different col spans for different viewports.
I have this code: https://www.bootply.com/a0wTkTuKyG
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<div class="col-md-2" style="background-color:red">
Sidebar<br>Sidebar<br>Sidebar<br>Sidebar<br>Sidebar<br>
</div>
<div class="col-md-6" style="background-color:yellow">
Content<br>Content<br>Content<br>Content<br>Content<br>
</div>
</div>
</div>
As you can see there is a big remaining white area right to the yellow "Content" div. I want that when I scale (resize) the window horizontally first shrink the white area and only when it's over re-scale or break the red and blue divs.
I also want to add some margin between the sidebar and the content which should be reduced first as well.
So I want the same as "container" class behaves. Keep the content size until it is possible and only re-size content when windows size become small enough.
Can I do it with bootstrap?
as far as i know you can get close with bootstrap, if i understood you well this might help you:
<div class="container-fluid">
<div class="row">
<div class="col-md-2 col-sm-3 col-xs-4" style="background-color:red">
Sidebar<br>Sidebar<br>Sidebar<br>Sidebar<br>Sidebar<br>
</div>
<div class="col-md-6 col-sm-7 col-xs-8" style="background-color:yellow">
Content<br>Content<br>Content<br>Content<br>Content<br>
</div>
</div>
</div>
I have the following code. I want to resize my image, but it doesn't work with col-xs-offset-0. (I want to center it)
What could be the problem here? I want my image to get big with col-xs and centered.
I don't want to use col-xs-4 since it'll make my image too small. I can't col-xs-5 because then I can't use offset.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<link rel="stylesheet" href=""/>
<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
<body>
<div class="container">
<div class="row">
<div class="col-md-2 col-md-offset-5 col-sm-4 col-sm-offset-4 col-xs-6 col-xs-offset-0">
<img class="img-responsive" src="http://www.turkcealtyazi.org/images/poster/0903747.jpg" alt="">
</div>
</div>
</div>
<script src="/js/jquery-2.1.3.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
Fiddle : http://jsfiddle.net/rx4ptj2k/
An offset of zero would only be appropriate if you had a width of 12. As it's 6 columns wide, you'd divide the remainder of the 12 in half for a result of 3.
Use col-xs-offset-3 instead of col-xs-offset-0.
Demo