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>
Related
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
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>
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>
Responsive layout with nested divs using bootstrap
Here my html code
<div class="container-fluid" style="height: 350px;">
<div class="row-fluid clearfix" style="height: 100%">
<div class="col-md-9 column" style="height: 100%;">
<div class="row clearfix" style="height: 50%;">
<div class="col-md-4 column" style="height: 100%;background-color: red">
</div>
<div class="col-md-4 column" style="height: 100%;background-color: green">
</div>
<div class="col-md-4 column" style="height: 100%;background-color: blue">
</div>
</div>
<div class="row clearfix" style="height: 50%;">
<div class="col-md-12 column" style="height: 100%;background-color: pink">
</div>
</div>
</div>
<div class="col-md-3 column" style="height: 100%;background-color: yellow">
</div>
</div>
</div>
output:
while increasing the browser screen width
here the output after increasing
here green and blue colored div missing
my expected output:
Please help me out..
You need to define classes for mobile view as well, otherwise elements can overlap each other. For example:
col-xs-12 col-md-4 column
See the bootply
This is working now, remove clearfix class from row. here is the code
<div class="container-fluid" style="height: 350px;">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div class="row-fluid clearfix">
<div class="col-md-9 column">
<div class="row">
<div class="col-md-4 column" style="height: 150px;background-color: red">
</div>
<div class="col-md-4 column" style="height: 150px; background-color: green">
</div>
<div class="col-md-4 column" style="height: 150px; background-color: blue">
</div>
</div>
<div class="row">
<div class="col-md-12 column" style="height: 150px; background-color: pink">
</div>
</div>
</div>
<div class="col-md-3 column" style="background-color: yellow; height: 300px">
</div>
</div>
</div>
Dileep Kumar Hi there, I striped out most of your code to what is probably only needed.
See if this works for you.
This code has the pink block nest up with the others.
Here is the large view Fiddle. Easier to resize.
<!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">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Starter Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<style>
body {
padding-top: 50px;
}
.space {
margin-top: 5%;
margin-bottom: 5%;
}
.block-a {
height: 350px;
}
.block-b {
height: 175px;
}
.block-red {
height: 175px;
background-color:#ff1000;
}
.block-darkgreen {
height: 175px;
background-color: green;
}
.block-blue {
height: 175px;
background-color: blue;
}
.block-pink {
height: 175px;
background-color: pink;
}
.block-darkyellow {
height: 350px;
background-color: gold;
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top ">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand " href="#">Project name</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container col-lg-12 space"></div>
<div class="container-fluid">
<div class="row-fluid col-md-9 block-a">
<div class="col-xs-12 col-sm-12 col-md-4 block-red"></div>
<div class="col-xs-12 col-sm-12 col-md-4 block-darkgreen"></div>
<div class="col-xs-12 col-sm-12 col-md-4 block-blue"></div>
<div class="col-xs-12 col-sm-12 col-md-12 block-pink"></div>
</div>
<div class="row-fluid col-md-3 block-a">
<div class="col-xs-12 col-sm-12 col-md-12 block-darkyellow"></div>
</div>
</div>
<!-- Bootstrap core JavaScript -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</body>
</html>
Well of course the red one will be shown, because you have specified the height of the parent div as 50% and all the three children with height of 100% so the red div, which is the first one, will take up all the height. One solution would be to specify a height of 33.33% on the three divs, when the breakpoint is reached, like:
#media(max-width: 767px) {
.col-md-9 .col-md-4 {
height: 33.33%;
}
}
I'd put some more specific classes to the divs before doing this.
I want to have image on jumbotron and on this image some buttons from bootstrap and some other divs of course with bootstrap(my calendar). I want to create page full responsive so after version for computers I'm going to create version for mobiles. I wan't it to be something like this http://postimg.org/image/nmdsbws6d/ Thank for all responses
<html>
<head>
<title>calendar</title>
<!--STYLES-->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.js"></script>
<link rel="shortcut icon" type="images/ico" href="media/img/favicon.ico"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
.col-centered {
display:inline-block;
float:none;
/* reset the text-align */
text-align:left;
/* inline-block space fix */
margin-right:-4px;
}
</style>
</head>
<body>
<br><br><br><br>
<center>
<div class="jumbotron" style="background:url() no-repeat scroll center center / cover;">
<div class="container transparent" style="background-color: rgba(255, 255, 255, 0.6); padding:60px;">
<div class="row" style="background:url(<?php echo asset_url();?>media/img/tro.jpg) no-repeat center; height: 100%; width: 100%;">
<!-- now this row is outside img-->
<div class ="col-md-2 calendarbox1">
</div>
<div class ="col-md-1 " >
<img src="<?php echo asset_url();?>media/img/kalendarz/pon.png" style="height: 60px;">
</div>
<div class ="col-md-1 ">
<img src="<?php echo asset_url();?>media/img/kalendarz/wto.png" style="height: 60px">
</div>
<div class ="col-md-1 ">
<img src="<?php echo asset_url();?>media/img/kalendarz/sro.png" style="height: 60px">
</div>
<div class ="col-md-1 ">
<img src="<?php echo asset_url();?>media/img/kalendarz/czw.png" style="height: 60px">
</div>
<div class ="col-md-1 ">
<img src="<?php echo asset_url();?>media/img/kalendarz/pia.png" style="height: 60px">
</div>
<div class ="col-md-1 ">
<img src="<?php echo asset_url();?>media/img/kalendarz/sob.png" style="height: 60px">
</div>
<div class ="col-md-1 col-centered">
<img src="<?php echo asset_url();?>media/img/kalendarz/niedz.png" style="height: 60px">
</div>
<div class ="col-md-3 col-centered calendarbox1">
</div>
<!--
<div class="button-container">
<div class="btn btn-default" >Button</div>
<div class="btn btn-default">Button</div>
</div> -->
</div>
</div>
</div>
</body>
</html>
If your just trying to figure out how to get the image as the background. You can add it as a background to the jumbotron itself.
<div class="jumbotron container" style="background:url(http://www.keenthemes.com/preview/conquer/assets/plugins/jcrop/demos/demo_files/image1.jpg) no-repeat scroll center center / cover; height:600px;'">
I edited your code below. The styles aren't exact to the image you posted. But I believe this answers what you asked.
EDIT: Based on your comment below, I have edited the code, this seems closer to what you want.
<html>
<head>
<title>calendar</title>
<!--STYLES-->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.js"></script>
<link rel="shortcut icon" type="images/ico" href="media/img/favicon.ico"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
.calendarbox{
border: 2px solid gray;
width: 70px;
height: 60px;
}
.calendarbox1{
border: 3px solid ;
display: none;
}
</style>
</head>
<body>
<br><br><br><br>
<center>
<div class="jumbotron" style="background:url(http://www.nasa.gov/images/content/133202main_d_reichart_image2.jpg) no-repeat scroll center center / cover;">
<div class="container transparent" style="background-color: rgba(255, 255, 255, 0.6); padding:60px;">
<div class="myimage" style="background:url(http://www.keenthemes.com/preview/conquer/assets/plugins/jcrop/demos/demo_files/image1.jpg) no-repeat scroll center center / cover; height:600px;">
<div class="row">
<div class ="col-md-1 col-centered ">
<div class="calendarbox1"></div>
</div>
<div class ="col-md-1 col-centered">
<div class="calendarbox1"></div>
</div>
<div class ="col-md-1 col-centered">
<div class="calendarbox"></div>
</div>
<div class ="col-md-1 col-centered">
<div class="calendarbox"></div>
</div>
<div class ="col-md-1 col-centered">
<div class="calendarbox"></div>
</div>
<div class ="col-md-1 col-centered">
<div class="calendarbox"></div>
</div>
<div class="col-md-1 col-centered ">
<div class="calendarbox"></div>
</div>
<div class ="col-md-1 col-centered">
<div class="calendarbox"></div>
</div>
<div class ="col-md-1 col-centered">
<div class="calendarbox"></div>
</div>
<div class ="col-md-1 col-centered">
<div class="calendarbox1"></div>
</div>
<div class ="col-md-1 col-centered">
<div class="calendarbox1"></div>
</div>
<div class ="col-md-1 col-centered">
<div class="calendarbox1"></div>
</div>
</div>
<div class="button-container">
<div class="btn btn-default" >Button</div>
<div class="btn btn-default">Button</div>
</div>
</div>
</div>
</div>
</body>
</html>