What is the proper Web combonent name for this? Is it Card, Caption? And Does CSS Bootrap have a component for this? Our Customers wants to build a web component as designed below. An Image with Title Description.
There is no specific CSS component in Bootstrap that can match with your image but you can use some CSS style from Bootstrap.
you can try this and change title side CSS according to your requirement
<!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.3.1/css/bootstrap.min.css">
</head>
<body>
<div class="container-fluid">
<div class="row" style="height: 100px;" >
<div class="col-md-2" style="background-color:lavender;">
<img src="img.png" class="align-self-center mr-3"style="position: absolute;top: 50%; left: 50%; transform: translate(-50%, -50%);"></div>
<div class="col-md-2" style="background-color: #b3b2b2;text-align: center;">
<p style="position: absolute;top: 50%; left: 50%; transform: translate(-50%, -50%);">title<p/></div>
</div>
</div>
</body>
</html>
Use this
<div class="media">
<img src="img.png" class="align-self-center mr-3" style="width:60px">
<div class="media-body">
<h4>Title</h4>
<p>use this </p>
</div>
</div>
or
<div class="col-md-6">
<div class="col-md-3">
<img src="">
</div>
<div class="col-md-3">
<h2 class="bg-secondary text-white">title</h2>
</div>
</div>
Related
What am I trying to achieve is to have a blob background behind the orange. The most important thing is that whenever window is resized that the blob will always stay directly behind the orange and not move to left or right. Could anybody help me achieve that? I would appreciate that very much.
<!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="jumbotron text-center">
<h1>Hello Everyone</h1>
</div>
<div class="container">
<div class="row">
<div class="col-sm-6 col-6">
<h3>Column 1</h3>
<p>I would like to place the blob directly behind the orange</p>
<p>And then block the movement so whenever window is resized all is in the same place</p>
</div>
<div class="col-sm-6 col-6" style="position:relative;left:0;top:0">
<img src="http://riviste.newbusinessmedia.it/wp-content/uploads/sites/27/2013/12/Fotolia_11313277_M.jpg"
style="width:100%;">
<img src="https://d3b1ak9ylguumf.cloudfront.net/stencil/public/static/images/wave-blob.svg?h=b9d69d25&v=2020-08-19.00" style="position:absolute;">
</div>
</div>
</div>
</body>
</html>
You should position your element with left: 0; top: 0; (putting it on relative element has no effect):
.images {
position: relative;
}
.images .bottom-image {
width: 100%;
position: relative;
z-index: 5;
opacity: .9
}
.images .top-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
opacity: .9;
z-index: 4;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class="jumbotron text-center">
<h1>Hello Everyone</h1>
</div>
<div class="container">
<div class="row">
<div class="col-sm-6 col-6">
<h3>Column 1</h3>
<p>I would like to place the blob directly behind the orange</p>
<p>And then block the movement so whenever window is resized all is in the same place</p>
</div>
<div class="col-sm-6 col-xs-6 images">
<img class="bottom-image" src="http://riviste.newbusinessmedia.it/wp-content/uploads/sites/27/2013/12/Fotolia_11313277_M.jpg"/>
<img class="top-image" src="https://d3b1ak9ylguumf.cloudfront.net/stencil/public/static/images/wave-blob.svg?h=b9d69d25&v=2020-08-19.00"/>
</div>
</div>
</div>
You can insert the blob image as background-image property of the div.
You can read more about it on https://www.w3schools.com/cssref/pr_background-image.asp
Note: Here orange has white background, so cant see clearly, you can check it with some transparent background image.
<!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="jumbotron text-center">
<h1>Hello Everyone</h1>
</div>
<div class="container">
<div class="row">
<div class="col-sm-6 col-6">
<h3>Column 1</h3>
<p>I would like to place the blob directly behind the orange</p>
<p>And then block the movement so whenever window is resized all is in the same place</p>
</div>
<div class="col-sm-6 col-6" style="position:relative;left:0;top:0; background-image: url('https://d3b1ak9ylguumf.cloudfront.net/stencil/public/static/images/wave-blob.svg?h=b9d69d25&v=2020-08-19.00');">
<img src="https://riviste.newbusinessmedia.it/wp-content/uploads/sites/27/2013/12/Fotolia_11313277_M.jpg"
style="width:100%;">
</div>
</div>
</div>
</body>
</html>
<div class="jumbotron jumbotron-fluid" id="landing">
<div class="container">
<div class="row">
<div class="col-sm-6"><h1>Hey, I'm A Man <br> Thanks for coming</h1></div>
<div class="col-sm-6"><img class="img-responsive" src="example.png" alt=""></div>
</div>
</div>
</div>
CSS for Jumbotron (Not entirely sure if this is reason it's messing up so leaving it here just incase)
#landing {
background-image: url(jumboimg);
background-size: cover;
height: 800px;
margin-top: -80px;
}
Heres what it's coming out as
https://i.imgur.com/7wXdWeb.png
I'm trying to get it to the right of the text
See below code sample, I have tried to replicate same and it works
and yes there was closing </h1> missing in the code
#landing {
background-image: url(https://www.vklalco.com/wp-content/uploads/2018/03/mumbai_night-800x400.jpg);
background-size: cover;
height: 800px;
/* margin-top: -80px; */
padding: 20px;
color: #fff;
}
img.img-responsive {
max-width: 100%;
}
<!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.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.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.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="jumbotron jumbotron-fluid" id="landing">
<div class="container">
<div class="row">
<div class="col-sm-6"><h1>Hey, I'm A Man <br> Thanks for coming</h1></div>
<div class="col-sm-6">
<img class="img-responsive" src="https://www.pentasia.com/rails/active_storage/blobs/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBdHJKIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--94a7bbc0f18502cae6a97b304f2712e26588fd1e/pentasia-surrey-redhill2.jpg" alt="">
</div>
</div>
</div>
</div>
<p>This is some text.</p>
<p>This is another text.</p>
</div>
</body>
</html>
width 100% will make your image fit to your column
<img class="img-responsive" src="example.png" alt="" width="100%">
My HTML file is :-
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Kitty Portfolio</title>
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6">
<img src="http://placehold.it/100x100" class="img-responsive" alt="Logo">
</div>
<div class="col-md-6 text-uppercase text-right">
<h1 class="super-text">Jane Doette</h1>
<h3>Front-end Ninja</h3>
</div>
</div>
<div class="row">
<div class="col-md-12">
<hr>
</div>
</div>
<div class="row">
<div class="col-md-12">
<img src="http://placehold.it/1140x350" class="img-responsive">
</div>
</div>
<div class="row">
<div class="col-md-12">
<h2>Featured Work</h2>
</div>
</div>
<div class="row text-center">
<div class="col-md-4">
<img src="http://placehold.it/555x300" class="img-responsive">
<h3>Appify</h3>
<p>Link to project</p>
</div>
<div class="col-md-4">
<img src="http://placehold.it/555x300" class="img-responsive">
<h3>Sunflower</h3>
<p>Link to project</p>
</div>
<div class="col-md-4">
<img src="http://placehold.it/555x300" class="img-responsive">
<h3>Bokeh</h3>
<p>Link to project</p>
</div>
</div>
</div>
</body>
</html>
And my css file is :-
.super-text {
font-size: 60px;
font-weight: 200;
}
body {
font-family: 'Lato', sans-serif;
color: #747704;
font-weight: 100;
}
Now, When I open the html file in a browser. The font style and color makes it but the font-weight is nor affecting the any text on the screen. I tried mozilla firefox, chrome and internet explorer and none of these browsers do any good. Does anyone know where my problem might be lying.
change font-eight in your CSS to 700px
i didn't encounter any problem with none of these 3 browsers but i got better results with
font-size: 60pt;
instead of using px in css file for size.
For font-weight don't use numbers, valid values are ;
normal|lighter|bold|bolder|value|initial| inherit
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='https://fonts.googleapis.com/css?family=Lato:400,300,100' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6"><img src="http://placehold.it/150x150" class="img-responsive title-logo"></div>
<div class="col-md-6 text-right text-uppercase title-thin">
<h1>Trevor Cleworth</h1>
<h3>Junior Web Developer</h3>
</div>
</div>
<div class="row">
<hr>
</div>
<div class="row">
<div class="col-md-12">
<img src="http://placehold.it/1400x350" class="img-responsive">
</div>
</div>
<div class="row">
<div class="col-md-12">
<h3>Featured Work</h3>
</div>
</div>
<div class="row text-center">
<div class="col-md-3">
<img src="http://placehold.it/220x220" class="img-responsive">
<h3>Appify</h3>
<p>Click to see</p>
</div>
<div class="col-md-3">
<img src="http://placehold.it/220x220" class="img-responsive">
<h3>Appify</h3>
<p>Click to see</p>
</div>
<div class="col-md-3">
<img src="http://placehold.it/220x220" class="img-responsive">
<h3>Appify</h3>
<p>Click to see</p>
</div>
<div class="col-md-3">
<img src="http://placehold.it/220x220" class="img-responsive">
<h3>Appify</h3>
<p>Click to see</p>
</div>
</div>
</div>
This is the code that is connected with my CSS file, the font family will work but the font weight will not, does anyone see why this is? I will link my CSS below. I have been trying to figure out the problem for about thirty minutes but I haven't been able to find anything. If somebody could please show me what the problem is I would appreciate it a ton!
body {
font-family: 'Lato', sans-serif;
font-weight: 300;
color: #333333;
}
add #import url(http://fonts.googleapis.com/css?family=Lato); to your css sheet.
then tell me how it works, I don't have Lato font in my Windows fonts on my laptop
I have just started learning front-end web development. I was working on my portfolio mockup and I am having issues with image sizing. I am using bootstrap framework. When i use an image with img-responsive class, the height and width of the image I upload are set automatically. Since I wanted to set the height myself, I changed the height of the image (in css file). However, now when i reduce my browser's width in order to see how my portfolio will look when in mobile view, the width resizes but the height remains the same. This makes the image look disproportional. How can i fix this? If I don't use custom height, everything is fine in mobile view.
this worked for me in my google chrome browser. As far as the mobile view and other devices this meta tag helps "meta name="viewport" content="width=device-width, initial-scale=1.0" (refer to the meta tag in my html head element)
hr {
border-style: solid;
border-width: 1px;
width: 100%;
}
.featured-work {
color: #BCBBBB;
}
.font {
font-family: 'Lato', sans-serif;
font-weight: 100;
font-size: 60px;
}
.font1 {
font-family: 'Lato', sans-serif;
font-weight: 300;
font-size: 20px;
}
.footer-title-fonts {
color: #747704;
}
.name {
margin-top: 66px;
}
.ulogo {
margin-top: 40px;
}
.multiple-borders {
box-shadow: 0px 0px 0px 7px black;
}
.multiple-borders1 {
box-shadow: 0px 0px 0px 7px blue;
}
.multiple-borders2 {
box-shadow: 0px 0px 0px 7px red;
}
.multiple-borders3 {
box-shadow: 0px 0px 0px 7px green;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home Page</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/style.css">
<link href='http://fonts.googleapis.com/css?family=Lato:100,300,400' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="container"> <!-- start of container class -->
<div class="row"> <!-- start of row class -->
<!-- udacity logo -->
<div class="col-md-6">
<img class="ulogo" src="images/logo.jpg" alt="udacity logo">
</div>
<!-- end of udacity logo -->
<!-- start of name div -->
<div class="col-md-6">
<h1 class="font name text-uppercase text-right">Jane Doette</h1>
<h5 class="font1 text-uppercase text-right">Front-end ninja</h5>
</div>
<!-- end of name div -->
</div> <!-- end of row class -->
<hr>
<!-- main image -->
<div class="row">
<div class="col-md-12">
<img class="img-responsive multiple-borders" src="http://placekitten.com/1170/500" alt="filler image">
</div>
</div>
<!-- end of main image -->
<!-- bottom 3 images -->
<div class="row"> <!-- start of row class -->
<div class="col-md-12">
<h3 class="featured-work">Featured Work</h3>
</div>
<!-- First Image -->
<div class="col-md-4">
<img src="http://placekitten.com/550/400" class="img-responsive multiple-borders1" alt="filler image">
<h2 class="footer-title-fonts text-center text-uppercase">Applify</h2>
<h6 class="footer-title-fonts text-center">https://github.com/udacity/Appify/</h6>
</div>
<!-- End of frst Image -->
<!-- Second Image -->
<div class="col-md-4">
<img src="http://placekitten.com/550/400" class="img-responsive multiple-borders2" alt="filler image">
<h2 class="footer-title-fonts text-center text-uppercase">Sunflower</h2>
<h6 class="footer-title-fonts text-center">https://github.com/udacity/Sunflower/</h6>
</div>
<!-- End of second Image -->
<!-- Third Image -->
<div class="col-md-4">
<img src="http://placekitten.com/550/400" class="img-responsive multiple-borders3" alt="filler image">
<h2 class="footer-title-fonts text-center text-uppercase">Bokeh</h2>
<h6 class="footer-title-fonts text-center">https://github.com/udacity/Bokeh/</h6>
</div>
<!-- End of Third Image -->
<!-- end of bottom 3 images -->
</div> <!-- end of row class -->
</div> <!-- end of container class -->
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="bootstrap_css/bootstrap.min.css">
<link rel="stylesheet" href="Custom_css/P1.css" media="screen" title="no title" charset="utf-8">
<link href='http://fonts.googleapis.com/css?family=Lato:100,300' rel='stylesheet' type='text/css'>
<title>Project 1</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6">
<img class="top-image" src="images/udacity.png" width="200px" class="img-responsive" alt="Responsive image">
</div>
<div class="col-md-6 text-right text-uppercase">
<h1 class="text-thin">Jiwanjot Singh</h1>
<h4>Front-end Ninja</h4>
</div>
</div>
<div class="row">
<div class="col-md-12">
<hr>
</div>
</div>
<div class="row">
<div class="col-md-12">
<img src="images/mainimage.jpg" class="img-responsive">
</div>
</div>
<div class="row">
<div class="col-md-12">
<h2>Featured Work</h2>
</div>
</div>
<div class="row">
<div class="col-md-4 text-center">
<img class="img-responsive" src="images/arcade.jpg" alt="Placehold Image" />
<h3 class="text-uppercase">ArcadeDemo</h3>
<p>https://github.com/udacity/ArcadeDemo/</p>
</div>
<div class="col-md-4 text-center">
<img class="img-responsive" src="images/alarm.jpg" alt="Placehold Image" />
<h3 class="text-uppercase">AlarmMe</h3>
<p>https://github.com/udacity/AlarmMe/</p>
</div>
<div class="col-md-4 text-center">
<img class="img-responsive" src="images/bokeh.jpg" alt="Placehold Image" />
<h3 class="text-uppercase">Bokeh</h3>
<p>https://github.com/udacity/Bokeh/</p>
</div>
</div>
</body>
</html>