image size shrinks when window is resized - html

I'm having an image in the layout, and when I resize the window it's size goes down and become too small.
I want to make the image fix at it's position and prevent it from become smaller and smaller as I shrink the window.
HTML
<div class="container-fluid" style="background-color: #333333;padding-left:30px;">
<div class="row">
<div class="col-md-12 outsidediv">
<!-- image -->
<div class="col-md-2 col-sm-2 col-xs-2 image" >
<img src="https://i.postimg.cc/50JVVSZF/checkk.png" style="max-width:100%;" alt="img">
</div>
<div class='col-md-2 col-sm-2 col-xs-2'>
<h2 style="font-size:2rem;color:#666666;">
<strong>
Some other Text alongside
</strong></h2>
</div>
</div>
</div>
</div>
CSS
.image{
display: flex;
flex-direction: column;
align-items: flex-start;
word-break:none;
color:white;
}
See this fiddle
When you shrink the window size, the image size decreases, how to fix this ?


You can set a static size with CSS: width: 93px; height: 96px;. You can either apply it to the '.image' class div or the image specifically. Here it is with inline CSS on the image tag:
.image{
display: flex;
flex-direction: column;
align-items: flex-start;
word-break:none;
color:white;
}
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="row">
<div class="col-md-12 outsidediv">
<!-- image -->
<div class="col-md-2 col-sm-2 col-xs-2 image" >
<img src="https://i.postimg.cc/50JVVSZF/checkk.png" style="width: 93px; height: 96px;" alt="img">
</div>
<div class='col-md-2 col-sm-2 col-xs-2'>
<h2 style="font-size:2rem;color:#666666;">
<strong>
Some other Text alongside
</strong></h2>
</div>
</div>
</div>
</body>
</html>


You can just delete max-size and it will stay at the same size all the time.
.bs-example{
margin: 20px;
}
.outsidediv{
/*border:solid;*/
}
ul li{
/*margin-left:15px;*/
box-sizing: border-box;
font-size:1.3rem;
}
#play{
margin-top:35px;
}
.image{
display: flex;
flex-direction: column;
/*justify-content: center;*/
/*font-size:2rem;*/
align-items: flex-start;
word-break:none;
color:white;
}
#bt{
margin-top:40px;
position: relative;
margin-left:30px;
font-size:2rem;
}
nav{
min-width: 100%;
}
body{
margin:0px;
padding:0px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Main page</title>
<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="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- font awesome for the icons -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="container-fluid" style="background-color: #333333;padding-left:30px;">
<div class="row">
<div class="col-md-12 outsidediv">
<!-- image -->
<div class="col-md-2 col-sm-2 col-xs-2 image" >
<img src="https://i.postimg.cc/50JVVSZF/checkk.png" alt="img">
</div>
<div class='col-md-2 col-sm-2 col-xs-2'>
<h2 style="font-size:2rem;color:#666666;">
<strong>
Some other Text alongside
</strong></h2>
</div>
</div>
</div>
</div>
</body>
</html>

Related

Put a frame and a picture together

I put a frame and a picture together but my photo is not fully displayed, and in each size a part of the image is displayed, for example, for a mobile phone, only a small part of it is displayed, and in a larger and medium size, a larger part of the photo is displayed. can you help me?
My html markup:
<!-- about section -->
<section id="about" class="bg-secondary">
<div class="container-fluid">
<div class="row">
<!-- about img column -->
<div class="col-md-6 about-picture height-80 img-responsive "></div>
<!-- about text column -->
<div class="col-md-6 about-text height-80 px-5 d-flex align-items-center justify-content-center">
<!-- this is for centering -->
<div class="about-text-center">
<!-- title -->
<div class="row">
<div class="col text-center">
<h1 class="display-4 text-uppercase text-dark mb-0"><strong>about</strong></h1>
<div class="title-underline bg-warning"></div>
<p class="mt-2 text-capitalize">hi it is a test</p>
</div>
</div>
<!-- end of title -->
<!-- single item -->
</div>
</div>
</div>
</div>
</section>
This is my CSS:
body {
font-family: 'Roboto', sans-serif;
}
.height {
min-height: 100vh;
}
.title-underline {
width: 200px;
height: 5px;
margin: 0 auto;
}
.height-80 {
min-height: 100vh;
}
.height-11 {
max-height: 11vh;
}
.about-picture {
background: url("https://cdn.mos.cms.futurecdn.net/6t8Zh249QiFmVnkQdCCtHK.jpg");
}

You can use background image as you have done, but you need to give it a size and position, and stop it repeating, otherwise it is just picking up the defaults for these values.
Here is what to put in your CSS. I have deliberately explicitly set each value so it's easier to see what is going on:
.about-picture {
background-image: url("https://cdn.mos.cms.futurecdn.net/6t8Zh249QiFmVnkQdCCtHK.jpg");
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
}
Of course, you may want to change the positioning, but the size contain makes sure the whole image is always visible whatever the actual dimensions of the column on any device.

After I see your code, maybe I don't think you can put the image in the css if it's used like that. I changed your code in the css section in .about-picture.
And I also changed the html markup in this section:
<div class="col-md-6 about-picture">
<img src="https://cdn.mos.cms.futurecdn.net/6t8Zh249QiFmVnkQdCCtHK.jpg">
</div>
Like this edited from me:
<html>
<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"/>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<style>
body{
font-family: 'Roboto', sans-serif;
width: 100%;}
.height{
min-height: 100vh;}
.title-underline{
width: 200px;
height: 5px;
margin: 0 auto;}
.height-80{
min-height: 100vh;}
.height-11{
max-height: 11vh;}
.about-picture{
align-items: center!important;
}
.about-picture img{
width: 100%;
position: relative;
padding-top: 120px;
}
</style>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
<title>Document</title>
</head>
<body>
<!-- about section -->
<section id="about" class="bg-secondary">
<div class="container-fluid">
<div class="row">
<!-- about img column -->
<div class="col-md-6 about-picture">
<img src="https://cdn.mos.cms.futurecdn.net/6t8Zh249QiFmVnkQdCCtHK.jpg">
</div>
<!-- about text column -->
<div class="col-md-6 about-text height-80 px-5 d-flex align-items-center justify-content-center">
<!-- this is for centering -->
<div class="about-text-center">
<!-- title -->
<div class="row">
<div class="col text-center">
<h1 class="display-4 text-uppercase text-dark mb-0"><strong>about</strong></h1>
<div class="title-underline bg-warning"></div>
<p class="mt-2 text-capitalize">hi it is a test</p>
</div>
</div>
<!-- end of title -->
<!-- single item -->
</div>
</div>
</div>
</div>
</section>
</body>
</html>

How can I display all the values at the center of the row and the div above row is not taking width same as row below it. how to achieve that?

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
ul {
list-style-type: none;
margin: 0;
padding: 0
}
li{
height: 64px;
background-color:pink;
}
.a{
height: 64px;
}
.ab{
display: flex;
direction: row;
align-items: center;
}
}
.b{
display: flex;
direction: row-reverse;
align-items: center;
}
.secondli{
margin-top: 20px;
}
</style>
<title>Document</title>
</head>
<body>
<div class="container" >
<div class="row">
<div class="col-md-6 col-6" >
<p>mwiiwiw</p>
<ul>
<li>
<div style="width: 100%">
<span>Xyz</span>
<span>sjfoeij</span>
</div>
<div class="row a">
<div class="col-12 col-md-8 ab" style="background-color: aqua;">
<span class="b">ABC</span>
</div>
<div class="col-12 col-md-4 b"style="background-color: yellow;" >
<span>11</span>
</div>
</div>
</li>
<li class="secondli">
<div class="row a">
<div class="col-12 col-md-8 ab" >
<span class="b">ABC</span>
</div>
<div class="col-12 col-md-4 b" >
<span>11</span>
</div>
</div>
</li>
</ul>
</body>
</html>
How can I display all the values at the center of the row?And the div with spans value Xyz is not taking width same as row below it.And also the second row is not taking width same as row above?
How can I achieve that using bootstrap and Css. Can we add two li and a row inside li or we will have to add container as well inside

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
div{
height: 80px;
text-align: center;
padding-top: 30px;
}
</style>
<title>Document</title>
</head>
<body>
<div class="container" >
<div class="row">
<div class="col-sm-6" >
<p>mwiiwiw</p>
<div class="row">
<div class="col-sm-8" style="background-color: aqua;">
<span class="b">XYZ</span>
</div>
<div class="col-sm-4 b"style="background-color: yellow;" >
<span>Sjfoeij</span>
</div>
</div>
<div class="row">
<div class="col-sm-8" style="background-color: blue;">
<span class="b">ABC</span>
</div>
<div class="col-sm-4 b"style="background-color: red;" >
<span>11</span>
</div>
</div>
<div class="row">
<div class="col-sm-8" style="background-color: aqua;" >
<span class="b">ABC</span>
</div>
<div class="col-sm-4" style="background-color: yellow;" >
<span>11</span>
</div>
</div>
</body>
</html>

As per your comment #irkhaladkar below is the code snippet:
ul {
list-style-type: none;
margin: 0;
padding: 0
}
li{
/*height: 64px;
background-color:pink;*/
}
.pink{background:pink;}
.h-64{height:64px}
.a{
height: 64px;
}
.ab{
display: flex;
direction: row;
align-items: center;
}
}
.b{
display: flex;
direction: row-reverse;
align-items: center;
}
.secondli{
margin-top: 20px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<div class="container" >
<div class="row">
<div class="col-md-6 col-6" >
<p>mwiiwiw</p>
<ul>
<li>
<div class="row pink">
<span class="col-12 col-md-6">Xyz</span>
<span class="col-12 col-md-6">sjfoeij</span>
</div>
<div class="row h-64">
<div class="col-12 col-md-6 ab" style="background-color: aqua;">
<span class="b">ABC</span>
</div>
<div class="col-12 col-md-6 ab"style="background-color: yellow;" >
<span>11</span>
</div>
</div>
</li>
<li class="secondli">
<div class="row h-64 pink">
<div class="col-12 col-md-6 ab" >
<span class="">ABC</span>
</div>
<div class="col-12 col-md-6 ab" >
<span>11</span>
</div>
</div>
</li>
</ul>

Make row occupy full height in Bootstrap 4

I want to create a Bootstrap grid whose second row occupies the full height of the page, in a very similar fashion to Twitter bootstrap 3 two columns full height. However, the "non-hacky" answer provided, which uses Bootstrap 4's h-100, doesn't seem to be working. Here's the code and its output:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="wiewport" content="width=device-width, initial-scale=1 user-scalable=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<style>
html {
height: 100%;
}
body {
min-height: 100%;
background-color: lightblue;
}
main {
background-color: yellow;
}
#second-row {
background-color: green;
}
textarea {
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<main class="container-fluid h-100">
<div class="row">
<div class="col-sm-6">
Hello,
</div>
<div class="col-sm-6">
World!
</div>
</div>
<div class="row h-100" id="second-row">
<div class="col-sm-8">
<textarea></textarea>
</div>
<div class="col-sm-4">
<textarea></textarea>
</div>
</div>
</main>
</body>
</html>
Update: Bootstrap 4: How to make the row stretch remaining height?, a similar question, has an answer that uses Bootstrap 4's flex-grow class. I tried it like so:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="wiewport" content="width=device-width, initial-scale=1 user-scalable=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<style>
html {
height: 100%;
}
body {
min-height: 100%;
background-color: lightblue;
}
main {
background-color: yellow;
}
#second-row {
background-color: green;
}
textarea {
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<main class="container-fluid d-flex h-100 flex-column">
<div class="row">
<div class="col-sm-6">
Hello,
</div>
<div class="col-sm-6">
World!
</div>
</div>
<div class="row flex-fill d-flex justify-content-start" id="second-row">
<div class="col-sm-8 portlet-container portlet-dropzone">
<textarea></textarea>
</div>
<div class="col-sm-4 portlet-container portlet-dropzone">
<textarea></textarea>
</div>
</div>
</main>
</body>
</html>
Output remains unchanged.

You should use flex-grow:1; as explained in the other answer: Bootstrap 4: How to make the row stretch remaining height?
The problem is that body should be height:100%; not min-height...
<main class="container-fluid d-flex h-100 flex-column">
<div class="row">
<div class="col-sm-6">
Hello,
</div>
<div class="col-sm-6">
World!
</div>
</div>
<div class="row flex-grow-1" id="second-row">
<div class="col-sm-8 portlet-container portlet-dropzone">
<textarea></textarea>
</div>
<div class="col-sm-4 portlet-container portlet-dropzone">
<textarea></textarea>
</div>
</div>
</main>
https://www.codeply.com/go/tpecZ31njp

How to force a row and its cols use 100% of the height of its parent element (jumbotron)

So I want to vertical and horizontal align the slogan to the jumbotron, the top logo is in it correct place and the small isotype should go all the way on the base of the jumbotron.
any help is greatly appreciated.
#hero {
height: 50vh;
background-image: url("/img/background.png");
background-size: cover;
background-repeat: no-repeat;
padding-top: 0.5em;
padding-bottom: 0.5em;
}
<!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/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4"
crossorigin="anonymous">
<link rel="stylesheet" href="/css/custom.css">
<title>Document</title>
</head>
<body>
<div class="jumbotron jumbotron-fluid" id="hero">
<div class="container">
<div class="row">
<div class="col-12 text-left align-top h-25">
<img src="/img/toplogo.png" alt="">
</div>
<div class="col-12 text-center align-middle h-auto">
<img src="img/slogan.png" alt="">
</div>
<div class="col-12 text-right align-bottom test">
<img src="/img/logowhite.png" alt="">
</div>
</div>
</div>
</div>
<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.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm"
crossorigin="anonymous"></script>
</body>
</html>

If I'm correct, you asking for align the slogan vertically to the center and align the isotype to the bottom as you showed in above image. You can add below inline style parts to the slogan and small isotype.
To align slogan to mid:
<img src="img/slogan.png" alt="" style="top:--height from the top-- ;">
or
<img src="img/slogan.png" alt="" style="display: flex; flex-direction: column; justify-content: center;">
To set small isotype into bottom:
<img src="/img/logowhite.png" alt="" style="top:--height from the top-- ;">
or
<img src="img/logowhite.png" alt="" style="display: flex; flex-direction: column; justify-content: center;">
I think, this will works on you.

As user #ZimSystem said it was just a matter of adding h-100 to the row and container
Thanks for your help.

Bootstrap - Move rows to bottom of page

I am new to Bootstrap, and would like to move my box2 and box3 divs to the bottom of the column on the right side of the page. I can't seem to work out how to do this without resorting to an empty row that is above box2 and box3. Here is my current html:
<!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 rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
.jumbotron {
text-align: center;
padding-bottom: 5px;
}
h2 {
margin: auto;
}
.box1 {
min-height: 450px;
border-style: dotted;
}
.box2 {
min-height: 150px;
margin-bottom: 10px;
border-style: dotted;
}
.box3 {
min-height: 30px;
border-style: dotted;
}
</style>
</head>
<body style="background:pink;">
<div class="jumbotron" style="background:pink;">
<h2>Lyrical</h2>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-lg-6 col-lg-offset-3">
<div class="box1">FORM</div>
</div>
<div class="col-lg-3">
<div class="row">
<div class="col-lg-12">
<div class="box2">Description</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="box3">Credits</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Is there a way of doing this using the Bootstrap grid?
Any help is much appreciated!

Try this
<!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 rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
var bottom1 = $('.box1').outerHeight(true);
var bottom2 = $('.right-sides-columns').outerHeight(true);
var topheight = bottom1 - bottom2;
$('.right-sides-columns').css("margin-top", topheight + "px");
});
</script>
<style type="text/css">
.jumbotron {
text-align: center;
padding-bottom: 5px;
}
h2 {
margin: auto;
}
.box1 {
min-height: 450px;
border-style: dotted;
}
.box2 {
min-height: 150px;
margin-bottom: 10px;
border-style: dotted;
}
.box3 {
min-height: 30px;
border-style: dotted;
}
</style>
</head>
<body >
<div class="jumbotron" >
<h2>Lyrical</h2>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-lg-6 col-lg-offset-3">
<div class="box1">FORM</div>
</div>
<div class="col-lg-3 right-sides-columns">
<div class="row">
<div class="col-lg-12">
<div class="box2">Description</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="box3">Credits</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

Not a specific bootstrap answer, but a more general approach:
It is possible to push an element to the bottom of it's parent with flexbox's align-self.
.flex-row {
display: flex;
flex-direction: row;
align-items: flex-start;
height: 300px;
}
.flex-col {
background: rebeccapurple;
}
.flex-col--end {
align-self: flex-end;
}
<div class="flex-row">
<div class="flex-col">
<p>Lorem Ipsum</p>
</div>
<div class="flex-col flex-col--end">
<p>Dolor Sit</p>
</div>
</div>