I am working with bootstrap. There for I am using the grid system as shown in the following code snippet:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row" style="background-color: aliceblue;">
<div class="col-lg">
First
</div>
</div>
<div class="row" style="background-color: red;">
<div class="col-lg">
Second
</div>
</div>
So I want the first row to fill 90% of the screen and the second row 10%. How can I do that?
Thanks for your help
specify viewport as height. viewport is the part of the website that is visible to the browser window
<div class="row" style="background-color: aliceblue; height: 90vh;"> </div>
<div class="row" style="background-color: red; height: 10vh;"> </div>
First, set the height of the Body and the Container (parent of rows) to 100%.
html, body {
height: 100%;
}
.fill {
min-height: 100%;
height: 100%;
}
<link rel="stylesheet" type="text/css" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<body>
<div class="container-fluid fill">
<div class="row-fluid vh-40" style="background-color: blue;">
<div class="col-lg">
d90
</div>
</div>
<div class="row-fluid vh-10" style="background-color: red;">
<div class="col-lg">
d10
</div>
</div>
</div>
</body>
More informations :
https://getbootstrap.com/docs/4.4/layout/grid/
https://getbootstrap.com/docs/4.4/utilities/sizing/
In responsive, use vh (height relative to the viewport).
Good continuation.
_Teddy_
Related
My website has a menubar which is in the main component html and inside this html is also the app-selector of another component:
MainComponent.html
<div style="height:200px">This is my Menubar</div>
<app-test></app-test>
I would like to display 3 boxes in my testComponent.html.
I am using flexLayout: https://github.com/angular/flex-layout
<div fxLayout="column" fxLayoutAlign="space-between none" style="height: 100%">
<div style="background-color: red">
T1
</div>
<div style="background-color: blue">
T2
</div>
<div style="background-color: yellow; height: 200px">
T3
</div>
</div>
The problem is that because there is a menubar, i get a scrolling behaviour but I just want the last box to end at my screen bottom. See here: http://prntscr.com/nhwcbp
How can I achieve this?
https://stackblitz.com/edit/flex-layout-angular-material-xssepa
put below style in style.css:
html, body { height: 100%; width: 100%; margin: 0; }
Remove height: 100vh and make use of flexbox
<div fxLayout="column" style="height:100%">
<div fxLayout="row" fxLayoutAlign="center">
<mat-card fxFlex="50">
<div fxLayout="row">
<div fxFlex="30" class="action-blurb">This is a blurb.</div>
<div fxFlex="30" class="action-blurb" fxFlexOffset="5">This is a blurb.</div>
<div fxFlex="30" class="action-blurb" fxFlexOffset="5">This is a blurb.</div>
</div>
</mat-card>
</div>
<div fxFlex="">
<app-test></app-test>
</div>
</div>
I hope this should do the trick as per this demo
I would like to align three div in one line with a little space between first div and second div and last div using bootstrap as you see in the picture :
I try with this code :
<div class="row">
<div class="col-md-2">
<img src="img/emo_positif.png')}}">
</div>
<div class="col-md-7">
<div class="square1"></div>
</div>
<div class="col-md-3">
<img src="img/emo_negative.png')}}">
</div>
</div>
but it shows me a big space between the div
Using Bootstrap 3:
.row {
height: 24px;
}
.row > div {
height: 100%;
}
.square {
background: pink;
}
.square1 {
background: #01a8ff;
height: 100%;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" >
<div class="row">
<div class="col-xs-2 square">
</div>
<div class="col-xs-8">
<div class="square1"></div>
</div>
<div class="col-xs-2 square">
</div>
</div>
Check this Pen.
Read the docs.
For making the three division in same line . There are many ways. For better UX use display:flex in css for the parent division
Thanks
I'm building a sidebar using the grid system in Bootstrap 4, and the Flexbox utility. For the most part, I have it working, except that I would like to have the sidebar be "static," that is, it should not move when the user scrolls on the page next to it.
I attempted to do this by adding position:fixed to it, but when I did that, the column the sidebar was in was reduced in size to the length of the longest string that was there.
How do I make the sidebar stay fixed in place, while maintaining column width?
Here's my code: (It's a React app, so "class" is replaced with "className")
Parent component:
{ this.state.isLoggedIn ?
<div className="row h-100">
<div className="col-2 no-padding-right">
<Sidebar />
</div>
<div className="col-10 no-padding-left">
<Main />
</div>
</div> :
<Main />
}
The sidebar itself:
<div className="d-flex h-100 align-items-start sidebar-left flex-column sidebar-background sidebar-text">
<div className="p-2">
Week 11
</div>
<div className="mb-auto align-self-stretch h-100 p-2">Leagues/Teams</div>
<div className="p-2">Current Features</div>
<div className="p-2">Feature Request</div>
<div className="p-2">Settings</div>
<div className="p-2">Billing</div>
<div className="p-2">Log Out</div>
</div>
And the relevant piece of CSS:
.sidebar-left {
padding-top: 83px;
position: fixed;
}
Thanks!
Apply the max-width to the sidebar-left is equal to how much your col have.
.sidebar-left {
max-width: 16.666667%;
}
Stack Snippet
body {
margin: 0;
}
.sidebar-left {
font: 13px Verdana;
padding-top: 83px;
position: fixed;
background: red;
max-width: 16.666667%;
left: 0;
top: 0;
overflow: auto;
}
.p-2 {
word-break: break-word;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<div class="row h-100">
<div class="col-2 no-padding-right">
<div class="d-flex h-100 align-items-start sidebar-left flex-column sidebar-background sidebar-text">
<div class="p-2">
Week 11
</div>
<div class="mb-auto align-self-stretch h-100 p-2">Leagues/Teams</div>
<div class="p-2">Current Features</div>
<div class="p-2">Feature Request</div>
<div class="p-2">Settings</div>
<div class="p-2">Billing</div>
<div class="p-2">Log Out</div>
</div>
</div>
<div class="col-10 no-padding-left">
<div class="main"></div>
</div>
</div>
I desinged my personal webpage in non-responsive way, it's shaped to be properly displayed #1920x1080 screen. Now, I want it to be responsive, so I began my adventure with Bootstrap. I know that columns must sum to 12, but my webpage has it content in 2 divs, 100% wide each (visit my website and scroll to the right to see what I'm talking about).
My question is - how to port that layout to my responsive project? Is there any way to put 2 container-fluid divs in one row?
Add a wrapper, give it 200vw width and display: flex
html, body {
margin: 0;
}
.wrapper {
width: 200vw;
display: flex;
}
.container-fluid {
flex: 1;
background: lightgray
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
First
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
Second
</div>
</div>
</div>
</div>
or display: inline-block
html, body {
margin: 0;
}
.wrapper {
white-space: nowrap;
}
.container-fluid {
display: inline-block;
width: 100%;
background: lightgray;
white-space: normal;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
First
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
Second
</div>
</div>
</div>
</div>
The row must be in container-fluid and not the opposite. To create two div 100% wide you can:
<section class="container-fluid">
<div class="row">
<div class="col-xs-12">
First div 100% width for all device
</div>
</div>
<div class="row">
<div class="col-xs-12">
Second div 100% width for all device
</div>
</div>
</section>
How can I set margin for div inside column div in bootstrap, like in the code I am trying to make margin 5px but it doesnt work!
<div class="container bg_red">
<h1>Test DIV boxes</h1>
<div class="row">
<div class="col-md-3 thin_border bg_green">
<div class="bg_blue">
Some content here for panel 1
</div>
</div>
<div class="col-md-9 thin_border">
Some content here for panel 2
</div>
</div>
</div>
Is this what you wanted? Check the margin-5 class that is added to one div and not the other so you can see the difference.
.thin_border {
border: 1px solid #EFEFEF;
}
.margin-5{
margin: 5px;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container bg_red">
<h1>Test DIV boxes</h1>
<div class="row">
<div class="col-md-3 thin_border bg_green">
<div class="bg_blue margin-5">
Some content here for panel 1
</div>
</div>
<div class="col-md-9 thin_border">
Some content here for panel 2
</div>
</div>
</div>