I am trying to set a maximum height for a banner I am creating in bootstrap5 like this..
.banner {
background: red;
max-height: 50px;
}
<head>
<title>Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container d-flex banner">
<div class="col-2">
<img class="img-fluid" src="https://dummyimage.com/600x400/000/fff">
</div>
<div class="col-10">
This is some text for the right hand side of the banner
</div>
</div>
</body>
Why is the image breaking out of the banner? I was expecting it to resize itself proportionally because I am using img-fluid. Where am I going wrong>
img-fluid only adds max-width:100% and height:auto since your content is restricted by height and not width you need to add max-height:100%
.banner {
background: red;
max-height: 50px;
}
.img-fluid{
max-height: 100%;
}
<head>
<title>Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container d-flex banner">
<div class="col-2">
<img class="img-fluid" src="https://dummyimage.com/600x400/000/fff">
</div>
<div class="col-10">
This is some text for the right hand side of the banner
</div>
</div>
</body>
Related
I am facing one issue, maybe not a big one but I am not able to figure out how can I do
I want the double line in between the content of a div left (Subtotal) and right ($200).
Can anyone help me with this?
I have tried but I am not able to make it vertically middle.
Attaching screenshot of how I want it to look:
enter image description here
CODE SNIPPET I AHVE TRIED:
.row{
display: flex;
}
.dividerLine{
display: table-cell;
vertical-align: middle;
text-align: right;
border: 2px solid red;
height: 7px;
}
<!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/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-3 start-lines">
<p class="order-receipt-label light-label">
<span>Subtotal</span>
</p>
</div>
<div class="col-sm-4 dividerLine" style="background-color:lavenderblush;">
</div>
<div class="col-3 start-lines">
<p class="order-receipt-label light-label">
<span>Subtotal</span>
</p>
</div>
</div>
</div>
</body>
</html>
product total and I want to make the double line in between them
Attaching the screenshot how it looks:
You can achieve this by giving .row the align-items: center; property and removing margin from the p tags inside .start-lines.
You can use CSS flex align center option for this.
.row {
display: flex;
align-items: center;
}
.mb-0 {
margin-bottom: 0 !important;
}
.dividerLine {
border-top: 2px solid red;
border-bottom: 2px solid red;
height: 7px;
background-color: lavenderblush;
}
<!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/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3">
<p class="order-receipt-label light-label mb-0">
<span>Subtotal</span>
</p>
</div>
<div class="col-sm-6">
<div class="dividerLine"></div>
</div>
<div class="col-sm-3">
<p class="order-receipt-label light-label mb-0">
<span>Subtotal</span>
</p>
</div>
</div>
</div>
</body>
</html>
That looks like a giant equals sign, so let's make it a giant equals sign. That way we can be sure that it will align with the other characters vertically correctly without us having to do any other vertical positioning.
The way this can be done is to put an = character in the central column at the standard font-size but scale in the x direction. We put a huge scale in just so it will cover the whole central column whatever the width. Of course this isn't seen as overflow is set to hidden.
<!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.2/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.2/js/bootstrap.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
text-align: center;
}
p.wide-font {
transform: scale(10000, 1);
color: gold;
overflow: hidden;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-3" style="text-align: right;">
<p style="text-align: right;">SUBTOTAL</p>
</div>
<div class="col-sm-4" style="overflow: hidden;">
<p class="wide-font">=</p>
</div>
<div class="col-3">
<p style="text-align: left;">SUBTOTAL</p>
</div>
</div>
</div>
</body>
</html>
Hello I use the bootstrap jumbotron class and whenever the screen goes below 500 pixels I want to get padding 0 bootstrap automatically padding: 2rem 1rem; but it doesn't work if I want to change it. What is the solution? Thanks in advance for your answers.
#media (max-width: 500px) {
.jumbotron {
padding:0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<link rel="stylesheet" href="berkay.css">
<link rel="stylesheet" media="(max-width:500px)" href="mobile.css" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/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.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="jumbotron row" style="height:100px;">
<div class="col-xs-12 col-sm-12 mol-md-9 col-lg-9 col-xl-10">
<p class="lead">Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile-first projects on the web.</p>
</div>
</div>
</div>
</body>
</html>
Simply set the padding to 0 by default with p-0, or px-0 if you want to remove only the horizontal padding (py-0 for vertical). Then add a padding on larger screen, for exemple p-md-5 to have an horizontal and vertical padding from md breakpoint.
You can do it without any custom CSS.
<div class="container-fluid">
<div class="jumbotron row p-0 p-md-5" style="height:100px;">
<div class="col-xs-12 col-sm-12 mol-md-9 col-lg-9 col-xl-10">
<p class="lead">Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile-first projects on the web.</p>
</div>
</div>
</div>
There you go:
#media (max-width: 500px) {
.container-fluid .row.jumbotron {
padding:0px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<link rel="stylesheet" href="berkay.css">
<link rel="stylesheet" media="(max-width:500px)" href="mobile.css" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/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.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="jumbotron row" style="height:100px;">
<div class="col-xs-12 col-sm-12 mol-md-9 col-lg-9 col-xl-10">
<p class="lead">Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile-first projects on the web.</p>
</div>
</div>
</div>
</body>
</html>
I have the following code :
<!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/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>
<style>
.class1 {height: 100px; background-color: DarkSlateGrey}
</style>
</head>
<body>
<div class="container-fluid class1">
<div class="row">
<div class="col-xs-6">Website</div>
<div class="col-xs-1">Services</div>
<div class="col-xs-1">Services</div>
<div class="col-xs-1">Services</div>
<div class="col-xs-1">Services</div>
<div class="col-xs-1">Services</div>
<div class="col-xs-1">Services</div>
</div>
</div>
</body>
</html>
The problems with me are:
When i do "inspect" to see the website on mobile:
-the background doesn't take all the width of mobile.
-Words "services" are overlapped, i want them to be separated with some spaces between them
How can I avoid these problems? Any help will be appreciated
Your width for each child inside the row is simply too small. For mobile size, you are setting the div to only 1/12 width of the mobile screen. You can add padding and overflow: hidden to it so it doesn't go over the desired width, but that doesn't seem ideal to me. I added a sample code based on your codes as an option for you to explore. If the screen is less than >=720px (col-md) then your first child in the row will take full width, and give more space for the rest so it looks more presentable.
.class1 {
height: 100px;
background-color: DarkSlateGrey
}
.tomato{
background: tomato;
}
.white{
background: white;
}
row div{
text-align: 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/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>
<style>
</style>
</head>
<body>
<div class="container-fluid class1">
<div class="row">
<div class="tomato col-xs-12 col-md-6">Website</div>
<div class="white col-xs-4 col-md-1">Services</div>
<div class="tomato col-xs-4 col-md-1">Services</div>
<div class="white col-xs-4 col-md-1">Services</div>
<div class="tomato col-xs-4 col-md-1">Services</div>
<div class="white col-xs-4 col-md-1">Services</div>
<div class="tomato col-xs-4 col-md-1">Services</div>
</div>
</div>
</body>
</html>
I have a problem with background-image property in one of my sections. Here is the HTML code:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css" type="text/css">
<link rel="stylesheet" href="css/custom.css" type="text/css">
<title>Elipsis</title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="">
</head>
<body>
<header id="intro">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
</div>
</div>
</div>
</header>
<main>
<section id="about">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
</div>
</div>
</div>
</section>
<section id="services">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
</div>
</div>
</div>
</section>
</main>
<footer id="contact">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
</div>
</div>
</div>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
And CSS:
#intro {
background-image: url(.../.../img/intro.png);
background-image: url(intro.png);
background-image: url(".../.../img/intro.png");
background-image: url("intro.png");
}
Index.html is in root folder, css file is in root/css/... and intro.png is in both root/img/... and root folders. Why it's not showing? I've read a couple of topics here on stack and some articles from google but nothing seems to work.
The way you wrote that CSS rule only the very last line will apply, which is
background-image: url("intro.png");
(it overwrites the other lines before it)
So you probably want to change that to
#intro {
background-image: url("../img/intro.png");
height: 300px; /*whatever value, if there is no content */
}
Plus, as someone wrote in the comments: if that element has no content and no defined height, it will have height 0, therefore the background image will not be visible.
Try this.
background-image: url('../img/intro.png');
I usually drag and drop that image to get the proper path. I hope this helps.
I created a sample page with a header containing an image. But the page is not responsive. I added the class img-responsive to the img tag but yet it is not responsive. Here is the code:
<!DOCTYPE html>
<html>
<head>
<title>A Sample Bootstrap Page</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="css/style.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="page-header" id="header">
<img id="logo" src="img/logo.png" height="100" alt="Image" class="img-responsive">
<p>Some text here</p>
</div>
</div>
</body>
</html>
The style.css includes the following:
#header #logo
{
display: block;
margin-left: auto;
margin-right: auto;
}
Remove the img tag height="100" as suggested above and add this to your style.css
#header #logo {
display: block;
margin-left: auto;
margin-right: auto;
height: 100px;
}
As for the image not being responsive make sure the bootstrap style for .img-responsive is being used
In firebug/developer tools you should see a class of
.img responsive {
max-width: 100%;
height: auto;
display: block;
}
As for resolving your issue I'll be glad to solve it if you can make a codepen/snippet example for me to see/look at
You should do like this,even needn't use custom class to style, bootstrap provided enough.
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<img src="http://lorempixel.com/1900/100/" alt="" class="img-responsive">
</div>
</div>
</div>
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<img src="http://lorempixel.com/1900/100/" alt="" class="img-responsive">
</div>
</div>
</div>
</body>
</html>