Setting same height on columns - html

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/

Related

Bootstrap 5 unused space

Good day
I have a question;
I am using Bootstrap 5 for my website, which works fine yet,
I want Bootstrap using the whole page and not like 80%; (See image)
<head>
<title>Home</title>
<link rel=stylesheet href='./style/stylesheet.css'>
<link rel=stylesheet href='./style/bootstrap.css'>
</head>
<body>
<div class='container'>
<div class='row'>
<div class='col-12 navbar'>
<h1 class='title'>Welcome Reno</h1>
</div>
</div>
</div>
</body>
And my css;
body {
background-image: url(https://i.imgur.com/M8Jq9IE.jpg);
background-size: cover;}
.title {
color: whitesmoke;}
.navbar {
background-size: cover;
background-color: gray;}
So how can I make it so Bootstrap uses the whole page and not have those wierd border/margins?
Thanks
Bootstrap's default .container class has a fixed width that changes depending on the breakpoint.
If you want the container to be full width at all breakpoints, you need to use .container-fluid.
If you want to have the full width of the container depending on the breakpoint, you need to use one of the Responsive Container classes like container-sm or container-lg.
In your case, it would be:
<head>
<title>Home</title>
<link rel=stylesheet href='./style/stylesheet.css'>
<link rel=stylesheet href='./style/bootstrap.css'>
</head>
<body>
<div class='container-fluid'>
<div class='row'>
<div class='col-12 navbar'>
<h1 class='title'>Welcome Reno</h1>
</div>
</div>
</div>
</body>
Check out the documentation for more information:
https://getbootstrap.com/docs/5.0/layout/containers/

Want to inline SVG ICON and text on same line html/css/bootstrap

I want to inline SVG image/icon and text on same line but its not working. Below is code
.row.justtify-content-left.icon1 {
padding-left: 260px;
padding-top: 36px;
}
<div class="row justtify-content-left icon1">
<div class="col-md-4 icon1">
<img src="images/icon/graph-up.svg" width="30px" class="img-fluid icon1" alt="">
<h5>INVESTMENT PLANNING</h5>
<p>This handout will help you understand how paragraphs.</p>
</div>
</div>
Here you go...
You need to "separate" the image and the text into two columns inside the same row.
You do this with classes col-1 and col-11. As stated on Bootstrap's official website: There are 12 template columns available per row, allowing you to create different combinations of elements that span any number of columns. Column classes indicate the number of template columns to span (e.g., col-4 spans four).
So, 1+11=12.
Note: I changed your image with an image of a giraffe so you can see the result.
<!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'>
<title>Document</title>
<link href='https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css' rel='stylesheet' integrity='sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl' crossorigin='anonymous'>
</head>
<body>
<div class="row justtify-content-left icon1">
<div class="col-1 icon1">
<img src="https://animals.sandiegozoo.org/sites/default/files/2016-11/animals_hero_giraffe_1_0.jpg" width="30px" class="img-fluid icon1" alt="">
</div>
<div class="col-11 icon1">
<h5>INVESTMENT PLANNING</h5>
<p>This handout will help you understand how paragraphs.</p>
</div>
</div>
</body>
</html>

Bootstrap - Align 2 divs vertically on responsive mode

I'm new to bootstrap, trying to align 2 divs vertical on responsive mode, but no luck so far.
<!DOCTYPE html>
<html lang="en">
<head>
<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>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<div>
<div class="col-xs-12 col-sm-1" ><i class="material-icons">cloud</i>
</div>
<div class="col-xs-12 col-sm-11">
<p>The estimated delivery date is provided to you as a guide only.</p>
</div>
</div>
</body>
On normal desktop mode, the divs are vertically aligned. But once I go to mobile mode, the second div is sitting below the first div. How can I make the 2nd div to sit next to the first div vertically?
Most of the boostrap over mobile devices tend to make things one below another because that is pretty much what bootstrap does in CSS/Div elements on mobile.
There are some solutions over it, but I see in your elements before
<div class="col-xs-12 col-sm-1" ><i class="material-icons">cloud</i>
that you don't use the triple rule.
Using bootstrap col- elements should be always into container and row like this:
<div class="container"> <!-- Or container-fluid -->
<div class="row">
<div class="col-xs-12 col-sm-1">
most inner div
<div/>
<div/>
<div/>
A little harder as solution is to copy the whole Bootstrap grid css file into a new file you make and you modify the things you need the most, like the .col-lg xs or the flex and the max width
Last but not least, go check the #media element over here:
https://www.w3schools.com/css/css_rwd_intro.asp
This could help you understand the most of what I said before about auto-resizing over mobile devices and css elements
<!--Try this one, It's simple and responsive in all widths and are aligned vertically can also do this using css flex box but little bit lengthy.-->
<!doctype html>
<html lang="en">
<head>
<title>Title</title>
<!-- 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">
</head>
<body>
<div class="container mt-5">
<div class="col-md-12">
<div class="d-flex flex-column">
<img src=" https://i.ytimg.com/vi/hF_LjTUvP-U/maxresdefault.jpg" alt="firstImg" class="img-fluid" style="width: 150px;
height: 150px;">
<img src="https://wallpapercave.com/wp/wp2554641.jpg" alt="secondImg" class="img-fluid mt-2" style="width: 150px;
height: 150px;">
</div>
</div>
</div>
</body>
</html>
strong text
You wrote
<div class="col-xs-12 col-sm-1" >
The col-xs-12 means, that on small screens, this element should fill the complete container. Use
<div class="col-xs-6 col-sm-1" >
for both containers, or one col-xs-1 and the other col-xs-11.
There are 12 columns in bootstrap and you decide, how they are filled

Bootstrap 4 hide and show grids

The objective it's to hide the red column on mobile and show it on higher resolutions but it just does not hide. Can somebody tell me what it's wrong with my code?, I pasted it in fiddle and works perfect but I take the same to my project and it does not work... What am I doing wrong? I'm using bootstrap 4.2.1
Fiddle
<html>
<head>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="d-none d-md-block col-md-8" style="background-color: red; height: 100vh">
</div>
<div class="col-12 col-md-4" style="background-color: black; height: 100vh">
</div>
</div>
</div>
</body>
</html>
Chrome test(also proved on real phone with the same result)
Simply add
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Into your <head>
A viewport element gives the browser instructions on how to control the page's dimensions and scaling. The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device). The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.
(Source w3schools)
Try this code
<div className="row">
<div className="col-md-12 bg-danger d-none d-lg-block" style="height: 100vh">
</div>
<div className="col-12 col-md-12 bg-success d-lg-none" style="height: 100vh">
</div>
</div>

Make an image fill the background in a Bootstrap layout

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>