I've tried a few different iterations of this and just can't figure it out.
I'm using Bootstrap 4.3.1 and have the following div:
<div class="d-flex flex-row align-items-center">
<div class="col-8">
<h3>A lovely header</h3>
<ul>
<li>Content</li>
<li>Content</li>
</ul>
</div>
<div class="col-4 img-wip">
<p>Hello</p>
</div>
</div>
I have a col-8 wide and the 2nd col-4 wide, the 2nd has a background image defined by the img-wip class. The content "Hello" is centered nicely but I can't get the background image to fill to the same height as defined by the content in the left col-8 column. The col-4 box just doesn't grow.
I've tried height:100% , flex:1;, flex-grow:1;
But the only thing that would change the height of the background image surrounding <p>hello</p> was a specific numerical height. I don't want that, I wanted the height defined by the height of the col-8
Is this possible or have I misunderstood how flex works?
The .img-wip class resolves to:
.img-fill {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-image: url(../images/resin_wip.jpg);
}
What you have understood about flexbox is indeed correct but you have some confusions. The default behaviour of flex-items is stretch in cross-axis. In your case you are not putting a content within your div with img-wip class (<div class="col-4 img-wip">... </div>).
You are setting background-image in your CSS. And what is happening is that, the height of the flex-container is taken as the height of largest of the flex-items (This is the default behaviour in Flexbox) and in the code it is your first column which is <div class="col-8">.
If you add more content to you col-8 div, you will realize that your image will start to show more and more or If you set a height on col-4 div to the height of the image, height of col-8 div will also increase accordinly
Another scenario is directly adding the img tag in your col-4 div. In that case you will see that, full image is shown and col-8 div also takes the height of the col-4 div (as expected in flex-box).
CODE SNIPPET shows this behavior:
.img-wip {
background-image: url("https://res.cloudinary.com/diqqf3eq2/image/upload/v1583368215/phone-2_ohtt5s.png");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>JS Bin</title>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<!-- Bootstrap CSS -->
<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"
/>
<title>Hello, world!</title>
</head>
<body>
<div class="d-flex flex-row align-items-center">
<div class="col-8">
<h3>A lovely header</h3>
<ul>
<li>Content</li>
<li>Content</li>
</ul>
</div>
<div class="col-4 img-wip">
<p>Hello</p>
<img
src="https://res.cloudinary.com/diqqf3eq2/image/upload/v1583368215/phone-2_ohtt5s.png"
alt=""
/>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"
></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"
></script>
</body>
</html>
</body>
</html>
CODE FOR OTHER SCENARIO: Keep HTML code same as it is and add below CSS.
CSS:
.img-wip {
background-image:
url("https://res.cloudinary.com/diqqf3eq2/image/upload/v1583368215/phone-2_ohtt5s.png");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
min-height: 60vh;
}
Related
I've been trying to get my rows and columns to appear over my background image. I've been struggling with this for a while. Any help would be greatly appreciated!
I am also quite new to this so, if it is simple I've yet to find it XD
<!DOCTYPE html>
<html>
<head>
<title>Testing</title>
<!--CSS-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<!--Font Awesome-->
<script src="https://kit.fontawesome.com/b5212ab333.js" crossorigin="anonymous"></script>
<!--Index Stylesheet-->
<link rel="stylesheet" type="text/css" href="css/style.css">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kQtW33rZJAHjgefvhyyzcGF3C5TFyBQBA13V1RKPf4uH+bwyzQxZ6CmMZHmNBEfJ" crossorigin="anonymous"></script>
<style type="text/css">
</style>
</head>
<body>
<div id="about-us" class="">
<img src="https://via.placeholder.com/1920x618.png" alt="">
<div class="container-md">
<div class="row justify-content-center">
<div class="col-4 about-text-header">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
</div>
</div>
</body>
</html>
First you need to change Image path i have changed image path.
Give a backgroud-image to parent div in css.
<!DOCTYPE html>
<html>
<head>
<title>Testing</title>
<!--CSS-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<!--Font Awesome-->
<script src="https://kit.fontawesome.com/b5212ab333.js" crossorigin="anonymous"></script>
<!--Index Stylesheet-->
<link rel="stylesheet" type="text/css" href="css/style.css">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kQtW33rZJAHjgefvhyyzcGF3C5TFyBQBA13V1RKPf4uH+bwyzQxZ6CmMZHmNBEfJ" crossorigin="anonymous"></script>
<style type="text/css">
#about-us{
background-image: url('https://previews.123rf.com/images/melpomen/melpomen1904/melpomen190400312/120268255-e-learning-concept-with-person-using-a-laptop-on-a-white-table.jpg?fj=1');
}
</style>
</head>
<body>
<a href="https://placeholder.com">
<div id="about-us" class="p-5">
<div class="container-md">
<div class="row justify-content-center" style=" position: relative;">
<div class="col-4 text-light about-text-header">
First Column
</div>
<div class="col-4 text-light ">
Second Column
</div>
</div>
</div>
</div>
</a>
</body>
</html>
You can put image as background for your block using CSS. Inside your style.css file:
#about-us {
background-image: url('https://via.placeholder.com/1920x618.png');
}
There are also CSS properties to set background image position, size etc.
You can find more here
Edit: According to you comment if you want to achieve this design:
HTML:
<body>
<!-- Top image GTA, there is no text so it can be <img> tag -->
<div id="hero-img">
<img src="./yourimg.png" alt="">
</div>
<!-- About us section, with car in background -->
<div id="about-us">
<!-- Your regular columns and content -->
<div class="container-md">
<div class="row justify-content-center">
<div class="col-4 about-text-header">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
</div>
</div>
</body>
CSS:
#hero-img{
/* to remove space between images, because car image has this wave and page background would be visable */
margin-bottom: -50px;
}
#hero-img img{
object-fit: cover;
width: 100%
height: 600px;
}
#about-us{
background-image: url('./yourCarImage.png');
background-position: center;
background-size: cover;
/* probably padding needed */
padding: 100px 0;
}
This should work in general, adjust it for your needs.
So, I've this little piece of test code where I'm trying to fit an image into the parent div as below in BS5. The challenge is that the image leaves a sizeable gap width-wise. This inspite of using .img-fluid class. Outcome attached which isn't ideal. There's a big gap.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Google Font -->
<link href="https://fonts.googleapis.com/css?family=Nunito:200,300,400,700" rel="stylesheet">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!-- Custom CSS -->
<link rel="stylesheet" href="app.css">
<title>Practice </title>
</head>
<body>
<section class="container-fluid">
<div class="row g-0 h-50 border border-2 border-success ">
<div class="col-6 px-0"></div>
<div class="col-6 px-0">
<img src="image-header-desktop.jpg" alt="" class="img-fluid">
</div>
</div>
</section>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
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>
</body>
</html>
Why not write an inline css.
<img src="image-header-desktop.jpg" alt="" style="width: 100%">
I think your col-6 that has the image inside it... It's making the thing appear just on the left side of the page?? This should work...
<div class="col-6 mx-auto px-0">
<img src="image-header-desktop.jpg" alt="" class="img-fluid">
</div>
Tha above only takes your normal thing and centers it on the page, I only added mx-auto to center the Div which contains your image.
You could also try col-8 col-9 col-10 to make the image bigger. It will still be fluid and extend the full width no matter how many columns wide you are. Naturally you wouldn't want it fluidly expanding larger than it's normal pixel size though.
I am making a row with 2 columns with Bootstrap 3. I am programming for a webshop there is having around 100.000 products, so it is not converted to BS4 yet. Therefore I am forced to use BS3. The left column is gonna contain a background color and some text, while the right column will be an image.
This is how the row is looking like now:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<div class="wrapper">
<div class="row">
<div class="col-sm-3" style="background-color:pink;">
<h3>Headline</h3>
<p>Some text here</p>
<button type="button" class="btn btn-info">Button</button>
</div>
<div class="col-sm-9">
<img src="http://placehold.it/900x200">
</div>
</div>
</div>
This is how my end result should be:
As said in comments your code is working, since you are using bootstrap 3 you may want to use img-responsive class for your image, because it has a large width.
By the way I have changed your col-sm-3 and col-sm-9 classes to xs ones, you may want to consider changing them to md or sm for your case.
<!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" />
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu"
crossorigin="anonymous"
/>
<title>Static Template</title>
<style>
.d-flex {
display: flex;
}
.image-container {
background-size: cover;
background-position: center center;
}
</style>
</head>
<body>
<h1>
This is a static template, there is no bundler or bundling involved!
</h1>
</body>
<!-- Latest compiled and minified CSS -->
<div class="container">
<div class="wrapper">
<div class="row d-flex">
<div class="col-xs-3" style="background-color:pink;">
<h3>Headline</h3>
<p>Some text here</p>
<button type="button" class="btn btn-info">Button</button>
</div>
<div
class="col-xs-9 image-container"
style="background-image: url(https://picsum.photos/id/287/900/200)"
></div>
</div>
</div>
</div>
<!-- Latest compiled and minified JavaScript -->
</html>
-Edit: after taking a deeper look on what you really want to achieve (same height for both columns) I updated my question with the follow:
Adding a class called d-flex to set a display: flex on any container you need, once a container has a display: flex; value its children will stretch by default.
You may also need to update your image to support a height: 100% which I highly recommend not to, cause it will make the image look ugly. Instead take advantage of background-size: cover;.
Some good resources on how to make your image fit in nicely:
https://css-tricks.com/almanac/properties/o/object-fit/
https://css-tricks.com/almanac/properties/b/background-size/
The HTML of the website
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row" >
<div class="col-md-3"><div class="float-left" style="background-color:grey;">
<h2 style="background-color:yellow;">Notifications</h2>
<div>You have a new follow </div>
<div>Your previous request was approved</div>
<div></div>
</div>
</div>
<div class="col-md-9">Hiiiii</div>
</div>
</div>
<script src="jquery.slim.min.js"></script>
<script src="popper.min.js"></script>
<script src="bootstrap.min.js"></script>
</body>
</html>
The output leaves a space as such on the left:
I have tried to replace the padding and tried various float options, but none of them seem to work. Any solutions?
You are using .container class, this is to create a centered container.
If you don't want this use .container-fluid class as detailed in the documentation:
Use .container-fluid for a full width container, spanning the entire width of the viewport.
If you don't want to use a container, then don't use a container at all.
.navbar-pink {
background-color: pink
}
.title-yellow {
background-color: yellow
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<header class="navbar navbar-expand navbar-pink">
<h1> NAVBAR </h1>
</header>
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<h2 class="title-yellow">Notifications</h2>
<div>You have a new follow </div>
<div>Your previous request was approved</div>
</div>
<div class="col-md-9">Hiiiii</div>
</div>
</div>
If i got correctly, you are trying to remove spacing from this portion
see the arrow in the image
If this is the case, you can simply use bootstrap's css class "container-fluid" instead of "container".
The "container" class leaves paddings/spaces to left and right whereas,
the "container-fluid" class utilizes full width of the screen.
Here is the full code--
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<div class="float-left" style="background-color:grey;">
<h2 style="background-color:yellow;">Notifications</h2>
<div>You have a new follow </div>
<div>Your previous request was approved</div>
<div></div>
</div>
</div>
<div class="col-md-9">Hiiiii</div>
</div>
</div>
<script src="jquery.slim.min.js"></script>
<script src="popper.min.js"></script>
<script src="bootstrap.min.js"></script>
</body>
</html>
Please note, i have used bootstrap cdn.
I am trying to beat a bootstrap layout into fitting some requirements I have. The layout started as the default generated by an MVC 5 project template, but I am stuck on getting an image to fill the entire browser width. I need the image to appear as follows:
If I add a section, with an img tag, the image doesn't stretch across the entire screen, but starts 'indented' from the left, and causes the brower so 'overflow' to the right, like:
The only alternative I can see is to set a background image for body-content, but that presents a whole lot of scary positioning issues for the content below the image, and there is quite a lot of that, e.g. below the text "Here's what you'll get' there is still a whole lot of content.
Here is an abridged version of my first attempt:
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>s</title>
<link href="/Content/bootstrap.css" rel="stylesheet" />
<link href="/Content/site.css" rel="stylesheet" />
<script src="/Scripts/modernizr-2.6.2.js"></script>
</head>
<body>
<div class="navbar">
...
</div>
<div class="container body-content">
<section id="landing">
<img src="/Content/Images/landing_back.png" alt="The Tax-Free Investment Account" />
</section>
<footer>
...
</footer>
</div>
<script src="/Scripts/jquery-1.10.2.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/respond.js"></script>
</body>
</html>
You can set the background image of the entire body like this:
body {
background-image: url("http://www.placecage.com/1000/800");
background-size:100%;
}
However if you are looking to make a specific element full width with Bootstrap then you should use container-fluid rather than container to hold your content as that element reaches the boundary of your screen width instead of being fixed width.
Note: run this snippet in full screen to get the full effect.
.container,
.container-fluid {
background-image: url("http://www.placecage.com/1000/800");
min-height: 400px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-xs-12">Fixed width</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">Full width</div>
</div>
</div>