working with Bootstrap 4 and I have following bootstrap codes with external css file in the html view,
<div class="jumbotron rounded-0">
<div class="container">
<div class="row">
<div class="col-md-4">
<img src="{{asset('images/flowler.jpg')}}" alt="..." class="rounded-circle">
</div>
</div>
</div>
</div>
External css
.rounded-circle{
vertical-align: left;
width: 100px;
height: 100px;
border-radius: 50%;
position: absolute;
left: -100%;
top: -50px;
}
but in mobile view in the browser above images not displaying properly. it is not in the correct position. how could I fix this problem?
1: https://i.stack.imgur.com/daggf.png`enter code here`
You specify the value left: -100%; You move the image out of the page
.rounded-circle{
vertical-align: left;
width: 100px;
height: 100px;
border-radius: 50%;
}
<!DOCTYPE html>
<html>
<head>
<title>HTML, CSS and JavaScript demo</title>
</head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<body>
<!-- Start your code here -->
<div class="jumbotron rounded-0">
<div class="container">
<div class="row">
<div class="col-md-4">
<img src="https://www.ivertech.com/Articles/Images/KoalaBear200x200.jpg" alt="..." class="rounded-circle">
</div>
</div>
</div>
</div>
<!-- End your code here -->
</body>
</html>
Related
This question already has answers here:
Why the content is not covered by the background of an overlapping element?
(8 answers)
Closed 2 years ago.
I'm trying to place a div on top of another but I don't understand why text inside div.servicios-info is over the image but the background-color isn't.
.imagen-servicio img {
border: 6px #ffffff solid;
}
.servicio-info {
background-color: #ec6a6a;
margin-top: -5rem;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-md-4 text-center">
<div class="imagen-servicio">
<img src="https://via.placeholder.com/300.png" class="img-fluid">
<div class="servicio-info">
<h3 class="text-uppercase">
<span class="text-lowercase">know about</span> <br> us
</h3>
read more
</div>
</div>
</div>
</div>
</div>
You can try something like this:
CSS
.servicio-info {
position: relative;
background-color: #ec6a6a;
margin-top: -5rem;
z-index:10
}
This code seems to do it.
<!DOCTYPE html>
<html>
<head>
<style>
.imagen-servicio img {
border: 6px #ffffff solid;
z-index: -1;
position: relative;
}
.servicio-info {
background-color: #ec6a6a;
margin-top: -5rem;
}
</style>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4 text-center">
<div class="imagen-servicio">
<img src="https://via.placeholder.com/300.png" class="img-fluid">
<div class="servicio-info">
<h3 class="text-uppercase">
<span class="text-lowercase">know about</span> <br> us
</h3>
read more
</div>
</div>
</div>
</div>
</div>
</body>
</html>
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>
<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%">
I am working with Bootstrap 3 and need to make a banner inspired of this page.
I have made this until now: Codepen.
The picture is not responsive. I can make the picture responsive if i add the class img-responsive to the img src tag, but then this happens.
How can I make the picture responsive, and make the box float on top of the picture on all screensizes?
<div class="container">
<div class="row">
<!-- Picture Column -->
<div class="col-lg-9 col-md-9 col-sm-8 col-xs-12">
<div>
<img src="https://www.lollypop.org/wp-content/uploads/2018/03/Blog_03_16_18_Photo-1-1200x400.jpg" class="img-responsive" ></img>
</div>
</div>
<!-- Contact Column-->
<div class="col-lg-3 col-md-3 col-sm-4 col-xs-12 pull-right-sm" style="padding-top: 80px;">
<div>
<div class="panel panel-default">
<div class="panel-heading">Contact</div>
<div class="panel-body">Here is the contact information gonna be. There will be a telephone number, open/closing times and an e-mail.</div>
</div>
</div>
</div>
</div><!--/row-->
</div><!--/container-->
Added a new relative (container for image) and absolute(container for panel) div div and removed unnecessary classes.
.abc {
position: relative;
}
.def {
position: absolute;
top: 30px;
right: 20px;
max-width: 300px;
}
<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>
</head>
<body>
<div class="container">
<div class="row">
<!-- Picture Column -->
<div class="col-sm-12">
<div class="abc">
<img src="https://www.lollypop.org/wp-content/uploads/2018/03/Blog_03_16_18_Photo-1-1200x400.jpg" class="img-responsive" ></img>
<div class="def">
<div class="panel panel-default">
<div class="panel-heading">Contact</div>
<div class="panel-body">Here is the contact information gonna be. There will be a telephone number, open/closing times and an e-mail.</div>
</div>
</div>
</div>
</div>
<!-- Contact Column-->
</div>
<!--/row-->
</div>
<!--/container-->
</body>
.abc {
position: relative;
}
.def {
position: absolute;
top: 10px;
right: 20px;
max-width: 300px;
}
#media screen and (max-width: 480px) {
.def {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 480px;
width: 95%;
height: 85%;
}
.panel.panel-default .panel-heading {
padding: 5px 15px;
}
.panel.panel-default .panel-body {
padding: 5px;
}
img.img-responsive {
height: 200px;
}
}
<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>
</head>
<body>
<div class="container">
<div class="row">
<!-- Picture Column -->
<div class="col-sm-12">
<div class="abc">
<img src="https://www.lollypop.org/wp-content/uploads/2018/03/Blog_03_16_18_Photo-1-1200x400.jpg" class="img-responsive" />
<div class="def">
<div class="panel panel-default">
<div class="panel-heading">Contact</div>
<div class="panel-body">Here is the contact information gonna be. There will be a telephone number, open/closing times and an e-mail.</div>
</div>
</div>
</div>
</div>
<!-- Contact Column-->
</div>
<!--/row-->
</div>
<!--/container-->
</body>
add this css to your div "col-lg-3 col-md-3 col-sm-4 col-xs-12 pull-right-sm"
padding-top: 40px;
position: absolute;
top: 0;
right: 5%;
and place it like this
<div class="col-lg-9 col-md-9 col-sm-8 col-xs-12">
<div>
<img src="https://www.lollypop.org/wp-content/uploads/2018/03/Blog_03_16_18_Photo-1-1200x400.jpg" class="img-responsive" ></img>
</div>
<!-- Contact Column-->
<div class="col-lg-3 col-md-3 col-sm-4 col-xs-12 pull-right-sm" style="padding-top: 80px;">
<div>
<div class="panel panel-default">
<div class="panel-heading">Contact</div>
<div class="panel-body">Here is the contact information gonna be. There will be a telephone number, open/closing times and an e-mail.</div>
</div>
</div>
</div>
</div>
I'm trying to make a responsive design, where I will have
structure like this.
But I want the vertical menu to go from the header to the footer, no matter if there is some text or not.
Here is my code:
<!DOCTYPE html>
<html>
<head lang="en">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<meta charset="UTF-8">
<title>template</title>
</head>
<body>
<div class="">
<div class="row">
<header class="col-sm-12 col-lg-12 bordered header"> <!-- Header -->
Header
</header> <!-- End of header -->
</div>
<div class="row">
<div class="col-sm-12 col-lg-12 bordered menu-horizontal"> <!-- Horizontal menu -->
Menu horizontal
</div><!-- End of horizontal menu -->
</div>
<div class="site-container container-fluid">
<div class="row">
<div class="col-sm-2 col-lg-2 bordered"> <!-- Vertical menu -->
<menu class="menu-vertical" role="menu">
Menu vertical
</menu>
</div> <!-- End of vertical menu -->
<div class="col-sm-10 col-lg-10 bordered"> <!-- Content -->
Content
</div> <!-- End of content -->
</div>
</div>
<div class="row">
<footer class="col-sm-12 col-lg-12 bordered footer"> <!-- Footer -->
Footer
</footer> <!-- End of footer -->
</div>
</div>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
And here is CSS
.bordered {
border: 1px solid black
}
.footer {
position: fixed;
bottom: 0;
}
.header {
height: 67px;
}
.menu-vertical {
position: relative;
height: 100%;
}
.site-container {
position: absolute;
height: 100%;
width: 100%;
}
.menu-horizontal {
height: 18px;
}
There is many ways to achieve what you want. One possible solution is :
1/ Remove "menu-vertical" from the menu element and put it on it's parent. Like this :
<div class="col-sm-2 col-lg-2 bordered menu-vertical">
<menu role="menu">
Menu vertical
</menu>
</div>
2/ Then, add this CSS :
.site-container > .row:first-of-type {
height:100%;
}
And you should be far closer to what you want ;)
.menu-vertical {
position : absolute;
top : height1 px;
bottom : height2 px;
}
see my screen :
http://screencast.com/t/N2NuyOju
I hope here you'll find something that can help.
<head lang="en">
<meta charset="UTF-8">
<title>template</title>
<style>
.bordered {
border: 1px solid red
}
.header {
height: 10%;
}
.menu {
height: 10%;
}
.vertical {
width: 30%;
float: left;
height: 70%;
}
.content {
float: left;
}
.footer {
position: fixed;
bottom: 0;
height: 10%;
}
</style>
</head>
<body>
<div class="">
<div class="bordered header">
<header>
Header
</header>
</div>
<div class="row">
<div class="bordered menu">
Menu horizontal
</div>
</div>
<div class="">
<div class="row">
<div class="bordered vertical">
<menu class="" role="menu">
Menu vertical
</menu>
</div>
<div class="bordered content">
Content
</div>
</div>
</div>
<div class="row">
<footer class="bordered footer">
Footer
</footer>
</div>
</div>
</body>
</html>