I'm trying to center the content, vertical and horizontal. I'm having some problems with the vertical part: Working Plunker
My custom css card:
.customCard {
width: 15rem;
height: 7rem;
background-color: blue;
color:#eee;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card-deck">
<div class="card-block ">
<div class="card customCard mt-2 customCursorPointer">
<div class="card-body">
<div class="container d-flex r h-100">
<div class="row justify-content-center mx-auto align-items-center">
<h4 class="card-title">AAAA</h4>
</div>
</div>
</div>
</div>
</div>
</div>
You need to add height:100% in .card-body
.customCard {
width: 15rem;
height: 7rem;
background-color: blue;
color:#eee;
}
.card-body {
height: 100%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card-deck">
<div class="card-block ">
<div class="card customCard mt-2 customCursorPointer">
<div class="card-body">
<div class="container d-flex r h-100">
<div class="row justify-content-center mx-auto align-items-center">
<h4 class="card-title">AAAA</h4>
</div>
</div>
</div>
</div>
</div>
</div>
Related
I want to create a specified amount of space between columns. So I created this based on the answers I already had. But this has an overflow to the right. I want to eliminate this overflow itself because I can't specify overflow: hidden due to interference of other components:
.row {
margin: 0 -25px;
}
.col {
padding: 0 25px;
min-width: 0;
}
div {
overflow-wrap: break-word;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<div class="container-fluid p-0">
<div class="row">
<div class="col">
<div class="w-100 p-3 border bg-light">Looooooooooooooooooooooooooooooooooooooooooooooooong text</div>
</div>
<div class="col">
<div class="w-100 p-3 border bg-light">Looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong text</div>
</div>
</div>
</div>
I also saw this Pen: https://codepen.io/frouo/pen/OqGaWN
Take a parent div and give a css to them
Here your html code with a parent div 'content-div'
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<div class="container-fluid p-0">
<div class="row">
<div class="col">
<div class="content-div">
<div class="w-100 p-3 border bg-light">Looooooooooooooooooooooooooooooooooooooooooooooooong text</div>
</div>
</div>
<div class="col">
<div class="content-div">
<div class="w-100 p-3 border bg-light">Looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong text</div>
</div>
</div>
</div>
</div>
CSS
.content-div {
padding: 0 25px;
max-width: 150px;
}
Note: Try to avoid assign css to bootstrap classes
I removed the first and last padding in addition to no-gutters. This can be done, but please let me know if there is a better way to fit the Bootstrap design!
div {
overflow-wrap: break-word;
}
[class^="col-"]:first-child>div {
padding-left: 0 !important;
}
[class^="col-"]:last-child>div {
padding-right: 0 !important;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<div class="container-fluid p-0">
<div class="row no-gutters">
<div class="col-3">
<div class="w-100 p-3 border bg-light">Looooooooooooooooooooooooooooooooooooooooooooooooong text</div>
</div>
<div class="col-3">
<div class="w-100 p-3 border bg-light">Looooooooooooooooooooooooooooooooooooooooooooooooong text2</div>
</div>
<div class="col-6">
<div class="w-100 p-3 border bg-light">Looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong text</div>
</div>
</div>
</div>
How can I make this angular8 component fill the whole height?
The Root Style.scss has this
html, body, app-root {
min-height: 100vh;
height: auto;
margin: 0;
}
The left green bar (DIV) needs to fill the height of the screen
.nav-left-container {
width: var(--nav-left-w) // 6rem;
height: 100vh;
background-color: var(--col-green-blue);
position: absolute;
top: 0;
left: 0;
}
HTML
<div class="nav-left-container">
<div class="nav-logo-container d-flex justify-content-center align-items-center">
<a [routerLink]="['/home']" routerLinkActive="" (click)=toHome()><img class="nav-logo-img"" alt=" "></a>
</div>
<div class="navigation-container d-flex justify-content-start align-items-center flex-column">
<div class="home d-flex justify-content-center align-items-center mt-4 mb-5">
<a [routerLink]="['/home']" routerLinkActive="" tooltip="Home" placement="right" (click)="toHome()"><img class="nav-link-img" src="../../../assets/images/ui/home.png" alt="home"></a>
</div>
<div class="search d-flex justify-content-center align-items-center mb-5">
<a [routerLink]="['/products']" routerLinkActive="" tooltip="Search" placement="right" (click)="toSearch()"><img class="nav-link-img" src="../../../assets/images/ui/barcode_search.png" alt="search"></a>
</div>
<div class="history d-flex justify-content-center align-items-center mb-5">
<a [routerLink]="['/history']" routerLinkActive="" tooltip="History" placement="right" (click)="toHistory()"><img class="nav-link-img" src="../../../assets/images/ui/history.png" alt="history"></a>
</div>
<div class="settingsd-flex justify-content-center align-items-center mb-5">
<a [routerLink]="['/settings']" routerLinkActive="" tooltip="Settings" placement="right" (click)="toSettings()"><img class="nav-link-img" src="../../../assets/images/ui/settings.png" alt="settings"></a>
</div>
</div>
</div>
The main container of the page (home and notifications (grey) have this
.home-container {
width: calc(100% - var(--nav-left-w)) // to avoid horizontal scroll;
height: 100vh;
margin-left: 6rem;
}
HTML
.home-container {
width: calc(100% - var(--nav-left-w));
height: 100vh;
margin-left: 6rem;
}
<app-nav-top></app-nav-top>
<div class="container-fluid home-container">
<div class="row">
<div class="col-md-9">
<div class="row mt-4">
<div class="col">
<div class="find-resource-wrapper mt-4">
<a (click)="onFindResource()">
<h1>Find a resource <fa-icon [icon]="faSearchPlus"></fa-icon>
</h1>
</a>
<hr>
<div class="find-resource-display-wrapper">
<app-resource-list></app-resource-list>
</div>
</div>
</div>
</div>
<!-- end find resource -->
<div class="row mt-4">
<div class="col">
<div class="offer-resource-wrapper">
<a>
<h1>Offer resource <fa-icon [icon]="faSearchPlus"></fa-icon>
</h1>
</a>
<hr>
</div>
</div>
</div>
<!-- end offer resource -->
<div class="row mt-4">
<div class="col">
<div class="cycles-wrapper">
<a>
<h1>Cycles <fa-icon [icon]="faRecycle"></fa-icon></h1>
</a>
<hr>
</div>
</div>
</div>
<!-- end cycles -->
</div>
<!-- end main left -->
<div class="col-md-3 notification-area">
<div class="row">
<div class="col">
<div class="mt-4">Logged in as</div>
<div>
<fa-icon [icon]="faEnvelope"></fa-icon> {{email}}
</div>
</div>
</div>
</div>
</div>
<!-- end notification -->
</div>
<!-- end home-container -->
<app-nav-left></app-nav-left>
How can I get the green bar to fill the whole height of the screen?
Thank you in advance.
try to make change in your css I am sure it will work.
.nav-left-container {
width: var(--nav-left-w) // 6rem;
background-color: var(--col-green-blue);
position: absolute;
top: 0;
left: 0;
bottom: 0;
}
I am creating an admin Dashboard with Bootstrap but I can't get the margins of the sidebar and the main panel to work correctly. Is hardcoding the margins in a .css file the way this is normally done? For example, once I have the top bar, should I use margin-top for the sidebar on the left with the value of the top-bar height?
The reason I'm asking is that if I margin-top the main panel with the same value, which is reasonable, the sidebar is also dropping even more. Also, I'm not sure how to set the margin on the left of the main panel. Styling is driving crazy.
Here's a picture of what I just said.
.sidebar {
position: absolute;
height: 100%;
margin-top: 55.6px;
}
.options-container {
margin-top: 56px;
margin-left: 780px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" />
<main role="main" class="container container-fluid options-container bg-light">
<div class="row">
<div class="option col-sm-3">
<div class="card card-block bg-light">
<h4>Add Player</h4>
</div>
</div>
<div class="option col-sm-3">
<div class="card card-block bg-secondary">
<h4>Add Team</h4>
</div>
</div>
<div class="option col-sm-3">
<div class="card card-block bg-warning">
<h4>Add Competition</h4>
</div>
</div>
<div class="option col-sm-3">
<div class="card card-block bg-danger">
<h4>Add Referee</h4>
</div>
</div>
<div class="option col-sm-3">
<div class="card card-block bg-info">
<h4>Add Stadium</h4>
</div>
</div>
</div>
</main>
<nav class="col-md-2 d-none d-md-block bg-light sidebar">
<div class="list-group">
<h5 class="players-title">Players</h5>
<label class="player-item" *ngFor="let player of players" (click)="onSelect(player)">
<span class="badge">{{player.id}}</span> {{player.name}}
<app-player-detail [player]="selectedPlayer"></app-player-detail>
</label>
</div>
</nav>
Ok so you have a lot of work to do to rebuild this as there's a few issues, you didn't give me all your styling so I made my own:
* {
padding: 0px;
margin: 0px;
}
.sidebar {
height:100vh;
display:inline-block;
float:left;
background: green;
padding: 20px;
margin-right: 20px;
width: 20%;
}
.options-container {
width: 72%;
display:inline-block;
margin-top: 20px;
}
.option {
display: inline-block;
margin-right: 10px;
}
.card {
background: yellow;
padding: 10px 20px;
border-radius: 20px;
}
.card h4 {
line-height: 20px;
font-size: 16px;
margin: 0px;
}
<div class="container">
<main role="main" class="container container-fluid options-container bg-light">
<div class="row">
<div class="option col-sm-3">
<div class="card card-block bg-light">
<h4>Add Player</h4>
</div>
</div>
<div class="option col-sm-3">
<div class="card card-block bg-secondary">
<h4>Add Team</h4>
</div>
</div>
<div class="option col-sm-3">
<div class="card card-block bg-warning">
<h4>Add Competition</h4>
</div>
</div>
<div class="option col-sm-3">
<div class="card card-block bg-danger">
<h4>Add Referee</h4>
</div>
</div>
<div class="option col-sm-3">
<div class="card card-block bg-info">
<h4>Add Stadium</h4>
</div>
</div>
</div>
</main>
<nav class="col-md-2 d-none d-md-block bg-light sidebar">
<div class="list-group">
<h5 class="players-title">Players</h5>
<label class="player-item" *ngFor="let player of players" click)="onSelect(player)">
<span class="badge">{{player.id}}</span> {{player.name}}
<app-player-detail [player]="selectedPlayer"></app-player-detail>
</label>
</div>
</nav>
</div>
Here's a working codepen: https://codepen.io/danielvickerssa/pen/rvWvaO
By all means this isn't perfect like you should use flexbox for sizing etc. however this solves the issue you had.
I want to create a grid system similar to this page using Bootstrap 4. I want to create a square box in a col-sm-4 and a longer rectangle next to it in a col-sm-8 of the same height. I'm having trouble creating a square box that is responsive. How can I do this?!
Current code:
<div class="container">
<div class="row section-box">
<div class="col-sm-4 text-center description-text">
first square box.
</div>
<div class="col-sm-8 description-image">
second rectangle box.
</div>
</div>
</div>
Things I've tried:
Using jQuery to set the height. This doesn't work with padding on the div, and isn't responsive.
This link where I managed to get a square box with a rectangle next to it, but as soon as text was added it was no longer a square.
You could use bootstrap 4 embed-responsive class and it's done
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<div class="container">
<div class="row m-5">
<div class="col-1">
<div class="embed-responsive embed-responsive-1by1 text-center">
<div class="embed-responsive-item bg-primary">col-1</div>
</div>
</div>
</div>
<div class="row m-5">
<div class="col-2">
<div class="embed-responsive embed-responsive-1by1 text-center">
<div class="embed-responsive-item bg-primary">col-2</div>
</div>
</div>
</div>
<div class="row m-5">
<div class="col-3">
<div class="embed-responsive embed-responsive-1by1 text-center">
<div class="embed-responsive-item bg-primary">col-3</div>
</div>
</div>
</div>
<div class="row m-5">
<div class="col-4">
<div class="embed-responsive embed-responsive-1by1 text-center">
<div class="embed-responsive-item bg-primary">col-4</div>
</div>
</div>
</div>
<div class="row m-5">
<div class="col-5">
<div class="embed-responsive embed-responsive-1by1 text-center">
<div class="embed-responsive-item bg-primary">col-5</div>
</div>
</div>
</div>
<div class="row m-5">
<div class="col-6">
<div class="embed-responsive embed-responsive-1by1 text-center">
<div class="embed-responsive-item bg-primary">col-6</div>
</div>
</div>
</div>
<div class="row m-5">
<div class="col-7">
<div class="embed-responsive embed-responsive-1by1 text-center">
<div class="embed-responsive-item bg-primary">col-7</div>
</div>
</div>
</div>
<div class="row m-5">
<div class="col-8">
<div class="embed-responsive embed-responsive-1by1 text-center">
<div class="embed-responsive-item bg-primary">col-8</div>
</div>
</div>
</div>
<div class="row m-5">
<div class="col-9">
<div class="embed-responsive embed-responsive-1by1 text-center">
<div class="embed-responsive-item bg-primary">col-9</div>
</div>
</div>
</div>
<div class="row m-5">
<div class="col-10">
<div class="embed-responsive embed-responsive-1by1 text-center">
<div class="embed-responsive-item bg-primary">col-10</div>
</div>
</div>
</div>
<div class="row m-5">
<div class="col-11">
<div class="embed-responsive embed-responsive-1by1 text-center">
<div class="embed-responsive-item bg-primary">col-11</div>
</div>
</div>
</div>
<div class="row m-5">
<div class="col-12">
<div class="embed-responsive embed-responsive-1by1 text-center">
<div class="embed-responsive-item bg-primary">col-12</div>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
eventually, a pseudo element could help :
.col-sm-4:before,
.col-sm-8:before {
content: '';
width: 0;
}
.col-sm-4:before,
.col-sm-8:before,
.ib {
white-space: normal;
display: inline-block;
vertical-align: middle;
max-width: 100%;
}
.col-sm-4:before {
padding-top: 100%;
/* makes expand to a square */
}
.col-sm-8:before {
padding-top: 50%;
/* makes a rectangle half the height of a square */
}
[class^="col"] {
white-space: nowrap;
box-sizing: border-box;
box-shadow: inset 0 0 0 5px white;
padding: 0;
text-align: center;
background: url(http://lorempixel.com/400/200) tomato;
background-size: cover;
}
.row {
color: white;
text-shadow: 0 0 black, 0 0 2px black;
}
.col-sm-4 {
background: gray;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row section-box">
<div class="col-sm-4 text-center description-text p-0">
first square box.
</div>
<div class="col-sm-8 description-image p-0">
second rectangle box.
</div>
</div>
<div class="row section-box">
<div class="col-sm-8 description-image p-0">
<div class="ib">second<br> rectangle box.</div>
</div>
<div class="col-sm-4 text-center description-text p-0">
first square box.
</div>
</div>
</div>
I have a carousel, and 2 rows in bootstrap. The layout is fine in standard view but when it goes into mobile queries the page layout becomes messed up. The 2nd row seems to overlap the blue column and i am not sure why.
https://jsfiddle.net/ydcategd/
<div id="myCarousel" class="carousel slide carousel-fade" data-ride="carousel" >
<div class="carousel-inner">
<div class="item active">
<div >
</div>
</div>
</div>
</div>
<div class="container-fluid box">
<div class="row" id="triple">
<div class="col-lg-4 one">
<p>123</p>
</div>
<div class="col-lg-4 two">
<p>456</p>
</div>
<div class="col-lg-4 three">
<p>789</p>
</div>
</div>
<div class="row" id="single">
<div class="col-lg-4 four">
</div>
<div class="col-lg-4 four">
</div>
<div class="col-lg-4 four">
</div>
</div>
You should target mobile devices first if you want mobile responsiveness
<div id="myCarousel" class="carousel slide carousel-fade" data-ride="carousel" >
<div class="carousel-inner">
<div class="item active">
<div >
</div>
</div>
</div>
</div>
<div class="container-fluid box">
<div class="row" id="triple">
<div class="col-xs-4 one">
<p>123</p>
</div>
<div class="col-xs-4 two">
<p>456</p>
</div>
<div class="col-xs-4 three">
<p>789</p>
</div>
</div>
<div class="row" id="single">
<div class="col-xs-4 four">
</div>
<div class="col-xs-4 four">
</div>
<div class="col-xs-4 four">
</div>
</div>
Based on your updates check this fiddle
Here is your fix:
HTML:
<div id="myCarousel" class="carousel slide carousel-fade" data-ride="carousel" >
<div class="carousel-inner">
<div class="item active">
<div >
</div>
</div>
</div>
</div>
<div class="container-fluid box">
<div class="row" id="triple">
<div class="col-lg-4 one">
<p>123</p>
</div>
<div class="col-lg-4 two">
<p>456</p>
</div>
<div class="col-lg-4 three">
<p>789</p>
</div>
</div>
<div class="row" id="single">
<div class="col-lg-4 four">
</div>
<div class="col-lg-4 four">
</div>
<div class="col-lg-4 four">
</div>
</div>
CSS:
html, body{
height: 100%;
}
.carousel, .item, .active, .carousel-inner{
height: 100%;
}
.item>div{
width: 100%;
height: 100%;
}
.item:nth-child(1) > div {
background-color: yellow;
}
.box{
width: 100%;
height: 100%;
position:absolute;
top:100%;
}
#triple{
height: auto;
}
.col-lg-4 {
height:100%;
}
.one, .two, .three{height: 50vh;}
.one{ background-color:red;}
.two{ background-color:blue;}
.three{ background-color:green;}
.four{ background-color:orange;}
#single{
height:50%;
border:1px solid black;
}
#media (max-width: 767px){
.one, .two, .three{height: 100vh;}
}
Fiddle: https://jsfiddle.net/vsk59tck/1/