I am using bootstrap for my layout.
<div class="container-fluid footer">
<div class="row p-4">
<div class="col-lg-3 d-flex flex-column justify-content-center align-items-md-center">
<h3>Company</h3>
<div class="mt-3 text-left">
<div class="box">
<p class="link-router" routerLink="/careers">Careers</p>
</div>
<div class="box">
<p class="link-router" routerLink="/about-us"><a>About</a></p>
</div>
<div class="box">
<p class="link-router" routerLink="/contact-us">Contract us</p>
</div>
</div>
</div>
</div>
</div>
Here is for example one column in my row.The content of that column should be on the left ( default )
and centered vertically so for that i used
d-flex flex-column justify-content-center
but now on smaller devices i want the content to be in the center, not in on the left.
So tried with the class
align-items-md-center
to tell that the content should be in the middle on > 768px devices.But then the whole time the content is in the middle not only on md devices.
How shoould i do that ?
Youn need to use align-items-center align-items-md-start. You have centring by default and you reset the center on md (> 768px)
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" >
<div class="container-fluid footer">
<div class="row p-4">
<div class="col-lg-3 d-flex flex-column justify-content-center align-items-center align-items-md-start">
<h3>Company</h3>
<div class="mt-3 text-left">
<div class="box">
<p class="link-router" routerLink="/careers">Careers</p>
</div>
<div class="box">
<p class="link-router" routerLink="/about-us"><a>About</a></p>
</div>
<div class="box">
<p class="link-router" routerLink="/contact-us">Contract us</p>
</div>
</div>
</div>
</div>
</div>
Related
I'm struggling on how to level this card equally to each other:
As you can see in the picture below. The card for the top reason for downtime doesn't match what is on the other cards or vice-versa. I want them to on the same height with each other regardless of what is inside on them.
Below is my code:
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<div class="card shadow mb-4">
<h5 class="card-header">
Top Reason for downtime
</h5>
<div class="card-body">
<ul id="top5Downtime">
</ul>
</div>
</div>
</div>
<div class="col-md-5">
<div class="card shadow mb-4">
<h5 class="card-header">
Top Down Terminals:
</h5>
<div class="card-body">
<ol id="mostDown">
</ol>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card shadow mb-4">
<h5 class="card-header">
Top Up Terminals:
</h5>
<div class="card-body">
<ol id="mostUp">
</ol>
</div>
</div>
</div>
</div>
<!--End of div.row-->
<div class="row">
<div class="col-12">
<div class="card shadow mb-5">
<div class="card-body">
<div id="bar-chart">
</div>
</div>
</div>
</div>
</div>
<!--End of div.row-->
<div class="row">
<div class="col-12">
<div class="card shadow mb-5">
<div class="card-body">
<div id="lineChart">
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="card shadow mb-3">
<h5 class="card-header">
Planned vs Unplanned Event
</h5>
<div class="card-body">
<div id="pieChart"></div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card shadow mb-3">
<h5 class="card-header">
Downtime vs Uptime
</h5>
<div class="card-body">
<div id="pieChart2"></div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="card shadow mb-5">
<div class="card-body">
<div id="barChart2">
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="card shadow mb-5">
<div class="card-body">
<div id="barChart3">
</div>
</div>
</div>
</div>
</div>
<!--END OF div.row-->
<!--END OF div.row-->
</div>
I've tried using the align-self-stretch but it only broke my design. How could I proceed?
Applying display: flex (or .d-flex class) to each of the .cols in same row will make them have equal height:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-md-3 d-flex">
<div class="card shadow mb-4 w-100">
<h5 class="card-header">
Top Reason for downtime
</h5>
<div class="card-body">
<ul id="top5Downtime">
</ul>
</div>
</div>
</div>
<div class="col-md-5 d-flex">
<div class="card shadow mb-4 w-100">
<h5 class="card-header">
Top Down Terminals:
</h5>
<div class="card-body">
<ol id="mostDown">
</ol>
</div>
</div>
</div>
<div class="col-md-4 d-flex">
<div class="card shadow mb-4 w-100">
<h5 class="card-header">
Top Up Terminals:
</h5>
<div class="card-body">
<ol id="mostUp">
</ol>
</div>
</div>
</div>
</div>
<!--End of div.row-->
<div class="row">
<div class="col-12">
<div class="card shadow mb-5">
<div class="card-body">
<div id="bar-chart">
</div>
</div>
</div>
</div>
</div>
<!--End of div.row-->
<div class="row">
<div class="col-12">
<div class="card shadow mb-5">
<div class="card-body">
<div id="lineChart">
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 d-flex">
<div class="card shadow mb-3 w-100">
<h5 class="card-header">
Planned vs Unplanned Event
</h5>
<div class="card-body">
<div id="pieChart"></div>
</div>
</div>
</div>
<div class="col-md-6 d-flex">
<div class="card shadow mb-3 w-100">
<h5 class="card-header">
Downtime vs Uptime
</h5>
<div class="card-body">
<div id="pieChart2"></div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="card shadow mb-5">
<div class="card-body">
<div id="barChart2">
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="card shadow mb-5">
<div class="card-body">
<div id="barChart3">
</div>
</div>
</div>
</div>
</div>
<!--END OF div.row-->
<!--END OF div.row-->
</div>
You also have to apply .w-100 to cards inside .d-flex cols, to make them stretch to full column width on smaller responsiveness intervals.
Important note: this solution relies on the fact you only have 1 card in each .col. If you have more than one, you'll need to add .flex-column to your .col as well.
But, for your example, .d-flex to .cols is enough.
I added a new advertising block to the header visible here: https://musebycl.io/test_page. This made the navigation block move to the far right. I can't figure out why that is happening, even though these elements are supposedly in separate divs.
How do I modify the header ad or the navigation HTML/CSS to bring the navigation back to its normal position as visible on the home page (https://musebycl.io/)?
Your framework applies flex rules on the .row element that push your navigation block to the right, as it has no defined width.
Try to move your add .block-content one level up in your rows into div.container.py-2.row
with this html it works:
<div class="container py-2">
<div class="row justify-content-between align-items-center">
<div class="block-content">
<div
class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item">
...
</div>
</div>
<div class="col-auto">
<div class="row justify-content-between align-items-center">
<div class="col-auto">
<div class="region region-logo">
<div id="block-headerad"
class="block block-block-content block-block-content98569f6a-2644-4a93-a22a-d735717c7cda">
</div>
<div id="block-muse-sitebranding-3" class="block block-system block-system-branding-block">
<a href="/" rel="home" class="site-logo">
<img src="https://cdn.musebycl.io/compact-muse-logo.png" alt="Home">
</a>
</div>
</div>
</div>
<div class="col-auto d-none d-lg-block">
<div class="region region-header-primary-menu">
...
</div>
</div>
</div>
</div>
<div class="col-auto">
<div class="row justify-content-between align-items-center no-gutters">
<div class="col-auto d-none d-lg-block">
<div class="social-menu d-flex align-items-center">
...
</div>
<div class="col-auto">
<div id="user-action-menu" class="user-action-menu d-flex align-items-center">
...
</div>
</div>
<div class="d-lg-none">
...
</div>
</div>
</div>
</div>
</div>
You can create external CSS like
#advertising-nav-bar {
position: fixed;
top: 0px;
}
HTML :
<div id="advertising-nav-bar">
<!--content -->
</div>
You have to give your block-content a width.
Like:
.block-content{
width: 500px;
}
I am practising in Bootstrap 4 and I do not know what rule I have violated for the responsive design. I am looking for a best practice to carry out the image. My idea is to learn.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" />
<body>
<div class="container-fluid h-100" style="border: solid red 1px">
<div class="row h-100 d-flex justify-content-center align-items-center contenedor_centrado">
<div class="col-6">
<div class="row">
<div class="col-12 border">
1
</div>
<div class="col-12 border">
2
</div>
</div>
</div>
<div class="col-6 border">
3
</div>
<div class="row">
<div class="col-6 border">4</div>
<div class="col-6 border">5</div>
</div>
</div>
</div>
</body>
Solution with just classes.
my-auto class to the inner block will place it in the center.
One problem will still be there:
You will have to stretch the outer container using height:100vh; so it's stretched to it's screen size.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" />
<div class="d-flex flex-column" style="height:100vh; border:5px solid red;">
<div class="d-flex flex-column my-auto" style="border: solid blue 1px">
<div class="row">
<div class="col-6">
<div class="row">
<div class="col-12 border">
1
</div>
<div class="col-12 border">
2
</div>
</div>
</div>
<div class="col-6 border">
3
</div>
</div>
<div class="row">
<div class="col-6 border">4</div>
<div class="col-6 border">5</div>
</div>
</div>
</div>
This is an easy way to solve it:
<body>
<div class="h-50">
</div>
<div style="border: solid blue 1px" >
<div class="row">
<div class="col-6">
<div class="row">
<div class="col-12 border">
1
</div>
<div class="col-12 border">
2
</div>
</div>
</div>
<div class="col-6 border">
3
</div>
</div>
<div class="row">
<div class="col-6 border">4</div>
<div class="col-6 border">5</div>
</div>
</div>
</body>
I hope it is usefull.
Here is the simplest Bootstrap way using the flexbox classes...
<div class="container-fluid h-100 d-flex flex-column justify-content-center" style="border: solid red 1px">
<div class="row d-flex justify-content-center contenedor_centrado">
<div class="col-6">
<div class="row">
<div class="col-12 border">
1
</div>
<div class="col-12 border">
2
</div>
</div>
</div>
<div class="col-6 border">
3
</div>
<div class="row w-100">
<div class="col-6 border">4</div>
<div class="col-6 border">5</div>
</div>
</div>
</div>
https://www.codeply.com/go/aZnnbWrMRE
Also see:
Vertical Align Center in Bootstrap 4
Bootstrap 4. Center Vertical and Horizontal Alignment
In the following example is there a bootstrap way of making the div with id "second" fit inside its parent container and not overflow when given h-100 class? A hacky way I used was applying overflow:hidden to the parent container of #second div and it does the job for my specific case but would this be called an elegant solution in this scenario?
<div class="container">
<div class="row">
<div class="col-6 bg-dark">
<div id="first">
<h5 class="text-white">some title</h5>
</div>
<div id="second" class="h-100 bg-success">
</div>
</div>
<div class="col-6 bg-danger">
<img src="http://via.placeholder.com/540x400">
</div>
</div>
</div>
https://www.codeply.com/go/pSVIlOETpB
Sure, just make the containing col-6 display:flex, flex-direction:column by using d-flex flex-column classes on it...
https://www.codeply.com/go/5YiBkLo0qO
<div class="container">
<div class="row">
<div class="col-6 bg-dark d-flex flex-column">
<div id="first">
<h5 class="text-white">some title</h5>
</div>
<div id="second" class="h-100 bg-success">
</div>
</div>
<div class="col-6 bg-danger">
<img src="http://via.placeholder.com/540x400">
</div>
</div>
</div>
I am facing an issue while trying to create a page contain N cards(single or multiple)
while in multiple all cards are as I want them to be, when it is a single card it shrinks and is not presented as I want it to be :
and a single card looks like this:
I am trying to understand what I am doing wrong.
this is the card HTML :
<div class="card text-white bg-danger">
<div class="card-header">
<div class="row">
<div class="col col-xs-3">
<i class="fa fa-euro">{{expenseItem.amount}}</i>
</div>
<div class="col col-xs-9 text-right">
<div class="d-block huge">{{count}}</div>
<div class="d-block">{{label}}</div>
<div class="card-body">
<div class="row">
</div>
</div>
</div>
</div>
</div>
<div class="card-footer">
<span class="float-left">Details </span>
<a href="javascript:void(0)" class="float-left card-inverse">
<span ><i class="fa fa-arrow-circle-left"></i></span>
</a>
</div>
</div>
and it is located inside acomponent that should be a list :
<div class="container">
<div class="row">
<hr>
</div>
<div class="row">
<div class="page-header">
<h1 >Comp header</h1>
<h4> total epenses per month {{expenses.total}}</h4>
<app-pagination [paginationSize]="limit" [total]="total" (requierdPage)="getPage($event)"></app-pagination>
</div>
</div>
<hr>
<!--<div class="row" >
<div class="col-xs-3 col-lg-4" *ngFor="let expense of expensesList" >
<app-expnses-item [expenseItem]="expense"></app-expnses-item>
</div>
</div>-->
<!--<div class="container">
<div class="row">
<div class="card-deck" *ngFor="let expense of expensesList">
<app-expnses-item [expenseItem]="expense"></app-expnses-item>
<!– <div class="card">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">This is a wider
card with supporting text below as a natural lead-in to additional content.
This content is a little bit longer.This is a wider
card with supporting text below as a natural lead-in to additional content.
This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>–>
</div>
</div>
</div>-->
<div class="row" >
<div class="col-sm-6 col-xs-6 col-xl-6 col-md-6 col-lg-6" *ngFor="let expense of expensesList">
<app-expnses-item [expenseItem]="expense"></app-expnses-item>
</div>
</div>
<div class="row add">
<div class="col-xs-1 offset-xs-1 align-self-sm-end">
<i class="fa fa-plus-square-o fa-4x" aria-hidden="true" (click)="Uopen()"></i>
</div>
<app-add-expense (onFormSubmitted)="onDataSubmit($event)"></app-add-expense>
</div>
</div>
what am I missing here?
The .card-deck should be placed directly in container instead of row. Remove the .row as it's flexbox, and should be used only to contain grid columns (col-*) which you're not using for the .card-deck.
<div class="container">
<div class="card-deck">
<div class="card text-white bg-danger">
</div>
<div class="card text-white bg-danger">
</div>
(repeat 1..n cards)
</div>
</div>
https://www.codeply.com/go/Gmch54KdgL