I'm trying to center a FontAwesome icon in the center of an Image Overlay Card and I'm being unable to center it vertically.
I've tried multiple other suggestions such as using d-flex and justify-content-center but none seem to work. What am I missing?
<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
</head>
<body>
<div class="card bg-dark text-white">
<img class="card-img" src="http://placehold.jp/500x200.png" alt="Example">
<div class="card-img-overlay text-center">
<i class="fab fa-youtube fa-5x" style="color:#FF0000"></i>
</div>
</div>
</body>
I want the icon to be centered in the middle of the image, but can only align it horizontally and not vertically. Thank you for your help.
You can add d-flex class to your .card-img-overlay element, then add class="align-self-center mx-auto" to the inner a element:
<div class="card bg-dark text-white">
<img class="card-img" src="images/example.jpg" alt="Example">
<div class="card-img-overlay d-flex">
<a class="align-self-center mx-auto" data-fancybox href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">
<i class="fa fa-youtube fa-5x zoom" style="color:#FF0000"></i>
</a>
</div>
</div>
More info about align-self-center on official BS4 doc: https://getbootstrap.com/docs/4.3/utilities/flex/#align-self
You can use bootstrap flex utilities class on card-img-overlay element :
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="card bg-dark text-white">
<img class="card-img" src="https://fakeimg.pl/250x100/000000/" alt="Example">
<div class="card-img-overlay text-center d-flex flex-column justify-content-center">
<a data-fancybox href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" class="">
<i class="fab fa-youtube fa-5x zoom" style="color:#FF0000"></i>
</a>
</div>
</div>
Your first attempt was correct (Adding d-flex and justify-content-center class). You just forgot to also add align-items-center class.
Related
I am using Bootstrap 5 to build a webpage. My html code is as following:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<title>Homepage</title>
</head>
<body>
<div class="container-fluid p-1 bg-secondary text-white text-center">
<h1>Employee details</h1>
<span class="badge rounded-pill bg-success">2020-21 period</span>
</div>
</body>
</html>
I want to make the <h1> and <span> appear in the same line, rather than one below the other, but am unable to do so. Please help me.
The updated code is as below:
<div class="container-fluid p-1 bg-secondary text-white d-flex align-items-center justify-content-center">
<h1>Employee details</h1>
<span class="badge rounded-pill bg-success ms-3">2020-21 period</span>
</div>
Explanation:
Add class d-flex to make h1 and span in same line.
Add class align-items-center justify-content-center to make them center.
(Optional) Add margin by class ms-3 to the span div to add space between h1 and span
you can use row class and col class like this
<div class="container-fluid p-1 bg-secondary text-white text-center">
<div class="row">
<h1 class="col-4">Employee details</h1>
<span class="col-4 badge rounded-pill bg-success">2020-21 period</span>
</div>
</div>
<div class="container-fluid p-1 bg-secondary text-white text-center">
<div class="row">
<h1 class="col-3">Employee details</h1>
<p class="col-3 offset-1 badge rounded-pill bg-success">2020-21 period</p>
</div>
</div>
In a row there are 12 columns. Change the col-3 number to increase or decrease the number of columns that you want to fill.
The offset-1 is the space between the actual column and the previous. The number of the offset works exactly the same.
what you need is a display:flex and align items: center which using bootstrap can be done by the following:
<div class="container-fluid p-1 bg-secondary text-white d-flex align-items-center">
<h1>Employee details</h1>
<span class="badge rounded-pill bg-success">2020-21 period</span>
</div>
Note that if you need a gap between your span and your h1 you either need to give a margin-right to your h1 or margin-left to your span. If you want your h1 & span to be positioned in the middle of the div you need to add justify-content-center
I am a beginner at bootstrap 4. I want to change the background of this card image. But my CSS is not working. What could be the problem here? I have tried so many ways but could not find any solution. Please help me.
Here is my index.php file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ChessStation</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row text-center py-5">
<div class="col-md-3 col-sm-6 my-3 my-md-0">
<form action="index.php" method="post">
<div class="card shadow">
<div>
<img src="./img/p1.jpg" alt="image1" class="img-fluid card-img-top">
</div>
<div class="card-body">
<h5 class="card-title">Product1</h5>
<h6>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="far fa-star-half"></i>
</h6>
<p class="card-text">
some quick example text to build on the card
</p>
<h5>
<span class="price">1000BDT</span>
</h5>
<button type="submit" class="btn btn-warning my-3" name="add">Add to Cart <i class="fas fa-shopping-cart"></i></button>
</div>
</div>
</form>
</div>
<div class="col-md-3 col-sm-6 my-3 my-md-0">
</div>
<div class="col-md-3 col-sm-6 my-3 my-md-0">
</div>
<div class="col-md-3 col-sm-6 my-3 my-md-0">
</div>
</div>
</div>
<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.2/js/bootstrap.min.js"></script>
</body>
</html>
And my style.CSS file:
img{
max-width: 100%;
height: auto;
background-color: lightblue;
background-color: radial-gradient(white 30%, lightblue 70%) ;
}
.fa-star,
.fa-star-half{
color: yellow;
}
background-color will not work on img unless the image is .png or .svg (etc) but not .jpg.
I'm not really sure which card do you want the color to be added, but I assume it should be under card-body. So in your css just do:
.card-body {
max-width: 100%;
height: auto;
background-color: lightblue;
background-color: radial-gradient(white 30%, lightblue 70%) ;
}
You cannot give an image a background color unless it's background is transparent.
Full Code: https://codesandbox.io/s/strange-cohen-q64pw?file=/style.css
In this code i have used a bag PNG image with transparent background and your style is now visible in the background.
Give it a try. PNG Image Link with transparent background.
https://freepngimg.com/thumb/gloves/55145-4-school-bag-free-transparent-image-hd.png
I am trying to create 2 flexbox containers one after the other, I have applied a number of classes combination to make this work. Flexbox gets created but when I scroll, the lower one goes below upper one. The output is as shown here: Current Scenario Output.
My requirement is those 2 horizontal bars to be fixed and one after another, irrespective of scrolling.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="{% static 'personal/mystyles.css' %}">
</head>
<body>
<div class="d-flex flex-column flex-md-row align-items-center pt-1 px-md-4 mb-3 border-bottom shadow-sm sticky-top" style="background-color: #80ccff;">
<h5 class="my-0 mr-md-auto font-weight-normal">
<p>Hello, User </p>
</h5>
<nav class="my-0 my-md-0 mr-md-3">
<a class="p-2 text-dark" href=""><b>Home</b></a>
<a class="p-2 text-dark" href=""><b>Account</b></a>
<a class="p-2 text-dark" href=""><b>Logout</b></a></p>
</nav>
</div>
<!--This div will be used in different html file and first div will be included using 'include' keyword of django. -->
<div class="d-flex flex-column flex-md-row align-items-center pt-5 px-md-4 border-bottom shadow-sm sticky-top" style="background-color: #80ccaa;"></div>
</body>
</html>
You can change your second horizontal bar like this and add some css:
<div class="d-flex flex-column flex-md-row align-items-center pt-5 px-md-4 border-bottom shadow-sm sticky-top" style="background-color: #80ccaa; position: fixed; width: 100%; margin-top: 50px"></div>
Wrap 2 divs that you want side by side inside a div and make it flex
<body>
<div class="d-flex">
<div>...</div> // your first div
<div>...</div> // your second div
<div>
</body>
I'm quite new to learning Bootstrap, but I have some trouble aligning my icon on the same line as my .
What it looks like right now..
I've been trying to fix it within the container, but also with rows, columns and several aligning methods.
This is my code right now:
<div class="container">
<div class="row">
<div class="col">
<h1 class="mb-3 ml-5">Products</h1>
<button class="filterIcon navbar-toggler float-right align-self-start" type="button">
<i class="fa fa-list"></i>
</button>
</div>
</div>
Can someone show me what I'm doing wrong? I can't really seem to find the answer in documentation as well. If someone does have documentation, please show me so I can learn from it :).
Thank you!
You can use a flex layout to get the items aligned side by side and in the center vertically. For bootstrap, this means using the classes d-flex and align-items-center
<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">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" integrity="sha256-+N4/V/SbAFiW1MPBCXnfnP9QSN3+Keu+NlB+0ev/YKQ=" crossorigin="anonymous" />
<div class="container">
<div class="row">
<div class="col d-flex align-items-center">
<h1 class="m-0" style="flex-grow:1;">Products</h1>
<button class="filterIcon navbar-toggler" type="button">
<i class="fa fa-list"></i>
</button>
</div>
</div>
I am trying to fix a code. I want a responsive image with Bootstrap, but it doesn't work. How can I solve the problem?
<header class="masthead text-center text-white d-flex">
<div class="container my-auto">
<div class="row">
<div class="col-lg-10 mx-auto">
<!--immage responsive do not word on bootstrap -->
<img class = "img-responsive" src = "img/HDtagliata.jpg" alt = "">
</div>
<div class="col-lg-8 mx-auto">
<p class="text-faded mb-5"></p>
<a class="btn btn-primary btn-xl js-scroll-trigger" href="#about">alpafin</a>
</div>
</div>
</div>
</header>
Ivan
Michal Graczyk is correct... img-responsive has been replaced by img-fluid in Bootstrap 4.
You can find more information about the changes from v.3 to v.4 at https://getbootstrap.com/docs/4.0/migration/
You can find more information specifically about images in v.4 at https://getbootstrap.com/docs/4.0/content/images/
I guess there is some problem with your bootstrap CDN when I tried executing your code with proper bootstrap CDN with some random height and width of the image. It was responsive.
This is with respect to bootstrap 3
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<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>
</head>
<body>
<header class="masthead text-center text-white d-flex">
<div class="container my-auto">
<div class="row">
<div class="col-lg-10 mx-auto">
<!--immage responsive do not word on bootstrap -->
<img class = "img-responsive" src = "img/HDtagliata.jpg" alt = "">
</div>
<div class="col-lg-8 mx-auto">
<p class="text-faded mb-5"></p>
<a class="btn btn-primary btn-xl js-scroll-trigger" href="#about">alpafin</a>
</div>
</div>
</div>
</header>
</body>
</html>
If you are using Bootstrap 4
Images in Bootstrap 4 are made responsive with .img-fluid. max-width: 100%; and height: auto; are applied to the image so that it scales with the parent element.
<img src="..." class="img-fluid" alt="Responsive image">
Since You're using Bootstrap 4 there is no img-responsive class. You should use img-fluid.