I want to display the seats in the cinema hall. Sometimes there are a lot of places and I wanted that if the chairs occupied more than 50% of the page, then I had a scroll. I tried to use "overflow-scroll" but it doesn't work. photo of result
<div class="w-50">
<div class="border overflow-scroll">
<div v-for="row in seats" class="d-flex">
<div v-for="seat in row" :key="seat.id" class="seat"></div>
</div>
</div>
</div>
.seat {
width: 50px;
height: 50px;
background: dodgerblue;
border: solid black;
}
same problem using simple html + css (without vue)
index.html
.seat {
width: 50px;
height: 50px;
background: dodgerblue;
border: solid black;
}
<!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">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div style="width: 50%;">
<div style="border: solid black; overflow: scroll;">
<div style="display: flex;">
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
</div>
<div style="display: flex;">
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
</div>
</div>
</div>
</body>
</html>
You can use max-width to limit the viewport. The overflow: scroll should be the default anyway. The thing is flexbox will adjust the size of the items (shrink, grow).
Just set the items a min-width or use flex-shrink: 0.
If you use flex-wrap: nowrap together with flex-direction: column or shorthand: flex-flow: column nowrap for the container (I've added some classes) now, it will grow in width and therefore, since you have set a max-width of 50%, the items will overflow and are scrollable.
.seat {
height: 50px;
width: 50px;
flex-shrink: 0;
background: dodgerblue;
border: solid black;
}
.seat-row {
display: flex;
flex: column nowrap;
}
.container {
border: 1px solid black;
overflow: scroll;
max-width: 50%;
}
<!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">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="seat-row">
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
</div>
<div class="seat-row">
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
</div>
</div>
</body>
</html>
Related
<!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>
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>
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 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>
I am having some problems creating this layout.
Demo.
This is my code:
HTML
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" type="text/css" />
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="row " style="">
<div class="col-md-6 news_basic_style">
<div class="newsproducts_style">
<img src="http://placehold.it/150x150">
</div>
</div>
<div class="col-md-6 news_basic_style">
<div class="newsproducts_style">
<img src="http://placehold.it/150x150"></div>
</div>
</div>
<div class="row">
<div class="col-md-6 news_basic_style">
<div class="newsproducts_style">
<img src="http://placehold.it/150x150"></div>
</div>
<div class="col-md-6 news_basic_style">
<div class="newsproducts_style">
<img src="http://placehold.it/150x150"></div>
</div>
</div>
</body>
</html>
CSS
body{
background-color:#99B3FF;
}
.news_basic_style{
border-radius: 20px;
box-shadow:5px 5px 10px rgba(0,0,0,0.65);
}
.news_basic_style{
background-color:white;
width:170px;
margin:20px;
}
update
Thanks for the edit TRiG
solution demo:
Apply the border-radius and box-shadow directly to the image and remove the background, like so:
img{
border-radius: 20px;
box-shadow:5px 5px 10px rgba(0,0,0,0.65);
}
http://jsfiddle.net/LrmfU/