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>
Related
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>
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>
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 place a container (two rows) with two containers (in two different rows) in bootstrap?enter image description here
i want containers arranged like this
You can use grid to do these kind of things.
Can you Illustrate what should it look like?(I could help you more then)
EDIT:
For this you actually need just a row with two columns.
And it will look like this:
<div class="row">
<div class="col-md-8"> <!-- 8 is the width of the left side -->
You content here
</div>
<div class="col-md-4"> <!-- 4 is the width of the right side -->
Your content here
</div>
</div>
If you need so that the content inside of those columns is also a grid, then it will be a bit different:
<div class="row">
<div class="col-md-8"> <!-- 8 is the width of the left side -->
<div class="row">
<div class="col-md-12"></div>
<!-- You just add your columns here -->
</div>
<div class="row">
<div class="col-md-12"></div>
<!-- You just add your columns here -->
</div>
</div>
<div class="col-md-4"> <!-- 4 is the width of the right side -->
<div class="row">
<div class="col-md-12"></div>
<!-- You just add your columns here -->
</div>
<div class="row">
<div class="col-md-12"></div>
<!-- You just add your columns here -->
</div>
</div>
</div>
Use this code:
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<style type="text/css">
.gray{border:5px solid gray;
height: 100px;
}
.green{border: 5px solid green;
height: 300px;
}
.orange{
border: 5px solid orange;
height: 350px;
}
.greenplus{border: 5px solid green;
height: 50px;
}
</style>
<body>
<div class="container" style="margin-top: 50px;">
<div class="row" >
<div class="col-lg-8 col-sm-8 col-md-8">
<div class="row" style="padding-left: 20px; padding-right: 20px;">
<div class="gray"></div>
<br>
<div class="green"></div>
</div>
</div>
<div class="col-lg-4 col-sm-4 col-md-4">
<div class="row" style="padding-left: 20px; padding-right: 20px;">
<div class="orange"></div>
<br>
<div class="greenplus"></div>
</div>
</div>
</div>
</div>
</body>
</html>
So I am using Bootstrap panels for my project and I have the design mockup as below:
The Profile text and progress bar should be left aligned while the collapse icon should be right aligned.
This is my markup at the moment:
<div id="panelProfile" role="tab" class="panel-heading">
<h4 class="panel-title">Profile</h4>
<div class="progress body-profile">
<div class="progress-bar">
<div class="progress-filled"></div>
<div data-bind="" class="progress-value"></div>
</div>
</div>
</div>
I tried adding float to both profile text and progress bar but this gives me this:
What is the best way to handle this without declaring expicit values?(Need to be responsive)
Have you tried using a div.row within your div#panelProfile?
<div id="panelProfile" role="tab" class="panel-heading">
<div class="row">
<div class="col-xs-2">
<h4 class="panel-title">Profile</h4>
</div>
<div class="col-xs-8">
<div class="progress body-profile">
<div class="progress-bar">
<div class="progress-filled"></div>
<div data-bind="" class="progress-value"></div>
</div>
</div>
</div>
<div class="col-xs-2">
</div>
</div>
</div>
This code will perfectly work for you.
Add pull-right class in Minus Icon.
Add Pull-left class in Profile
To make View Complete Profile "center" add text-center class
Happy Coding :-)
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<style>
.progress{
border-radius: 15px;
}
.circle-minus{
width: 5px;
height: 3px;
border: 1px solid black;
border-radius: 50%;
padding: 1px 7px;
font-size: 14px;
}
.panel-heading{
background-color: white ! important;
}
.panel-footer{
background-color: white ! important;
}
body{
padding-top: 15px;
}
</style>
<body>
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="panel panel-default">
<div class="panel-heading">
<div class="pull-right"> 50% <span class="circle-minus">-</span></div>
<div class="pull-left">Profile </div>
<div>
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="50"
aria-valuemin="0" aria-valuemax="100" style="width:50%">
</div>
</div>
</div>
</div>
<div class="panel-body" style="height: 250px;"></div>
<div class="panel-footer"><h5 class="text-center">View Complete Profile</h5></div>
</div>
</div>
</div>
</div>
</body>
</html>