How may I align the items of these differet divs?
I'm trying to align the header of each column to the items of the divs below, could you please help me to aligns these?
row-header-course with course-name
row-header-progress with course-progress
row-header-remaining with course-remaining
row-header-timestamp with course-timestamp
All aligned left.
Here is my code:
<div class="row historico">
<div class="row row-header col-md-12">
<div class="row-header-course col-md-4">Curso</div>
<div class="row-header-progress col-md-2">Progresso</div>
<div class="row-header-remaining col-md-2">Faltam</div>
<div class="row-header-timestamp col-md-2">Visto por último</div>
<div class="row-header-remove col-md-2">Remover</div>
</div>
<div class="row-history col-md-12">
<div class="course-row row">
<div class="course-name col-md-4">
<i class="fa fa-caret-right" aria-hidden="true"></i>
Curso Teste 4
</div>
<div class="course-progress col-md-2">
<div class="course-progress-bar-wrapper col-md-8">
<div class="course-progress-bar" style="width: 100%;"> </div>
</div>
<div class="course-progress-percent col-md-4">100%</div>
</div>
<div class="course-remaining col-md-2">Completo</div>
<div class="course-timestamp col-md-2">20 horas atrás</div>
<div class="course-remove col-md-2"><i class="fa fa-times" aria-hidden="true"></i></div>
</div> <!-- .course-row -->
<div class="unit-row">
<div class="row single-unit">
<div class="unit-name col-md-4">
<i class="fa fa-angle-double-right" aria-hidden="true"></i>
Curso Teste 4 - Unidade 2
</div>
<div class="unit-nbsp col-md-4"> </div>
<div class="unit-timestamp col-md-2">20 horas atrás</div>
<div class="unit-remove col-md-2"><i class="fa fa-times" aria-hidden="true"></i></div>
</div>
</div> <!-- .unit-row -->
</div> <!-- .row-history -->
</div>
EDIT:
This is how it's now:
This is how I want to be:
Here is the code structure you need to fallow. let me know if this did't help you. I have done for only 2 columns right now
and here is working js fiddel link : https://jsfiddle.net/tdxje0su/1/
<div class="row row-header col-md-12">
<div class="row-header-course col-md-6">
<div class="col-md-12">
Curso
</div>
<div class="course-name col-md-12">
<i class="fa fa-caret-right" aria-hidden="true"></i>
Curso Teste 4
</div>
</div>
<div class="row-header-progress col-md-2">
<div class="col-md-12">
Progresso
</div>
<div class="course-progress col-md-12">
<div class="row">
<div class="course-progress-percent col-md-12">100%</div>
</div>
</div>
</div>
<div class="row-header-remaining col-md-2">
<div class="col-md-12">
Faltam
</div>
<div class="course-remaining col-md-12">Completo</div>
</div>
<div class="row-header-timestamp col-md-2">
<div class="col-md-12">
Visto por último
</div>
<div class="course-timestamp col-md-12">19 horas atrás</div>
</div>
</div>
</div> <!-- .historico -->
Got it with:
.course-progress, .course-remaining, .course-timestamp, .course-remove, .unit-nbsp, .unit-timestamp, .unit-remove {
padding: 0 !important;
}
Related
I am using an HTML template that has 3 blocks in the footer that are divs with classes: col-md-6 col-lg-4. Using CSS I would like to remove the second one that is selected from the class filter since the template plugin does not allow me to add JavaScript.
Please see HTML below.
<div class="row">
<div class="col-md-6 col-lg-4">
<div class="iq-fancy-box-04">
<div class="iq-icon">
<i aria-hidden="true" class="ion-ios-location-outline"></i>
</div>
<div class="fancy-content">
<h5>Address</h5>
<span>#################</span>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="iq-fancy-box-04">
<div class="iq-icon">
<i aria-hidden="true" class="ion-ios-telephone-outline"></i>
</div>
<div class="fancy-content">
<h5>Phone</h5>
<span class="lead"></span>
<p></p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="iq-fancy-box-04">
<div class="iq-icon">
<i aria-hidden="true" class="ion-ios-email-outline"></i>
</div>
<div class="fancy-content">
<h5>Email</h5>
<span>########</span>
<p></p>
</div>
</div>
</div>
</div>
Simply add .col-md-6.col-lg-4:nth-child(2) { display: none; } to your CSS and you`re fine:
.col-md-6.col-lg-4:nth-child(2) {
display: none;
}
<div class="row">
<div class="col-md-6 col-lg-4">
<div class="iq-fancy-box-04">
<div class="iq-icon">
<i aria-hidden="true" class="ion-ios-location-outline"></i>
</div>
<div class="fancy-content">
<h5>Address</h5>
<span>#################</span>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="iq-fancy-box-04">
<div class="iq-icon">
<i aria-hidden="true" class="ion-ios-telephone-outline"></i>
</div>
<div class="fancy-content">
<h5>Phone</h5>
<span class="lead"></span>
<p></p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="iq-fancy-box-04">
<div class="iq-icon">
<i aria-hidden="true" class="ion-ios-email-outline"></i>
</div>
<div class="fancy-content">
<h5>Email</h5>
<span>########</span>
<p></p>
</div>
</div>
</div>
</div>
:nth-child(n) can be used to select the nth element of a specific class or tag. n declares the order of the element. So .someClass:nth-child(5) means that you apply a rule for the 5th element of class someClass.
use CSS:
:nth-child(2) {
display:none;
}
I'm trying to center two columns in a row in Bootstrap and no matter what offset or centering, they won't stay on same line in center of full-width column on md size or above
Tried col-md-6 offset and adding row-center and column-center classes, nothing has worked
Here's the full footer code - I want the email and tel to be on one line on larger screens and the two social icons alongside each other on the next row. It wraps nicely to display on mobile, just the larger screens I need some help with.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<footer class="container-fluid footer-container">
<div id="footer" class="row">
<div class="col-md-12">
<div id="action" class="row">
<div class="col-md-12">
<btn class="footer-button">
BOOK NOW!</h5>
</btn>
</div>
</div>
<div id="contact-methods" class="row">
<div class="col-md-6">
<a class="send-email" href="mailto:bookings#samanthaharris.ca" target="-blank"><i class="fas fa-envelope-square" aria-hidden="true"></i>
<h5>Email Samantha</h5></a>
</div>
<div class="col-md-6">
<a class="call" href="tel:905-749-5700"><i class="fas fa-mobile-alt" aria-hidden="true"></i><h5>905-749-5700</h5></a>
</div>
</div>
<div class="row row-center">
<div class="col-md-6 col-center"><a class="insta" href="https://www.instagram.com" target="-blank"><i class="fab fa-instagram" aria-hidden="true"></i></a>
</div>
<div class="col-md-6 col-center"><a class="facebook" href="https://www.facebook.com" target="-blank"><i class="fab fa-facebook-square" aria-hidden="true"></i></a>
</div>
</div>
</div>
</div>
</footer>
Add the 'text-center' class to your rows.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet"/>
<div id="footer" class="row">
<div class="col-md-12">
<div id="action" class="row text-center">
<div class="col-md-12">
<btn class="footer-button">
BOOK NOW!</h5>
</btn>
</div>
</div>
<div id="contact-methods" class="row text-center">
<div class="col-md-6">
<a class="send-email" href="mailto:bookings#samanthaharris.ca" target="-blank"><i class="fas fa-envelope-square" aria-hidden="true"></i>
<h5>Email Samantha</h5>
</a>
</div>
<div class="col-md-6">
<a class="call" href="tel:905-749-5700"><i class="fas fa-mobile-alt" aria-hidden="true"></i>
<h5>905-749-5700</h5>
</a>
</div>
</div>
<div class="row text-center">
<div class="col-md-6 col-center"><a class="insta" href="https://www.instagram.com" target="-blank"><i class="fab fa-instagram" aria-hidden="true"></i>
</a></div>
<div class="col-md-6 col-center"><a class="facebook" href="https://www.facebook.com" target="-blank"><i class="fab fa-facebook-square" aria-hidden="true"></i></a>
</div>
</div>
</div>
</div>
According to docs try this way:
<div class="row justify-content-center">
<div class="col-*"></div>
<div class="col-*"></div>
</div>
I have a dashboard with a side-menu that I want to be fixed to the left. I tried doing a fixed position in css, but then all the divs get distorted and moved out of place. I then tried using bootstrap sticky-left, and it simply didn't work. I want for the left menu to stay fixed while the charts being scrollable.
CODE:
<div class="row head">
<div class="col-sm-2 sticky-left" id="side-bar">
<div id="side-nav">
<!--GREETING-->
<div class="row greeting">
<div class="col-sm-3" style="font-size: 2.6rem;">
<i class="far fa-user"></i>
</div>
<div class="col-sm-9">
<p>Hi Olivia!<br>School of UFeis</p>
</div>
</div>
<!--LABEL-->
<div class="row label">
<div class="col-sm-12">
<p>Menu</p>
</div>
</div>
<ul id="side-menu">
<button>
<div class="row">
<div class="col-sm-1">
<i class="fas fa-desktop"></i>
</div>
<div class="col-sm-8">
Dashboard
</div>
</div>
</button>
<!---CHARTS BY YEAR--->
<li class="parent">
<button>
<div class="row">
<div class="col-sm-1">
<i class="far fa-calendar-alt" style="margin-right: .8rem;"></i>
</div>
<div class="col-sm-8">
Year
</div>
<div class="col-sm-1">
<i class="fas fa-chevron-down"></i>
</div>
</div>
</button>
<ul class="sub-nav">
<li><button id=1>2019</button></li>
<li><button id=2>2018</button></li>
<li><button id=3>2017</button></li>
</ul>
</li>
<!-- CHARTS BY TEACHER -->
<li class="parent">
<button>
<div class="row">
<div class="col-sm-1">
<i class="fas fa-chalkboard-teacher"></i>
</div>
<div class="col-sm-8">
Teacher
</div>
<div class="col-sm-1">
<i class="fas fa-chevron-down"></i>
</div>
</div>
</button>
<ul class="sub-nav">
<li><button id=12>Ms. Lee</button></li>
<li><button id=13>Mr. Rogers</button></li>
<li><button id=6>Mr. Yang</button></li>
<li><button id=7>Ms. Mary</button></li>
</ul>
</li>
</ul>
</div>
</div>
<!---CHARTS-->
<div class="col-sm-10 chart_container">
<div class="row rankings">
<div class="col-sm-12">
<div class="row _chart">
<div id="lvl_chart">Please enter at least 3 markcards to see this chart.
</div>
</div>
</div>
</div>
<!--RECALLED CHART-->
<div class="row recalled">
<div class="col-sm-11 container-fluid topChart">
<div class="row _chart" >
<div id="bar_chart">Students need to enter at least 3 markcards to see this chart.</div>
</div>
</div>
</div>
<!--AGE CHART-->
<div class="row">
<div class="col-sm-11 bottomCharts">
<div class="row">
<div class="col-sm-6 age_chart">
<div class="row _chart">
<div id="pie_chart" style="">Students need to enter at least 3 markcards to see this chart.</div>
</div>
</div>
<!--GENDER CHART-->
<div class="col-sm-6 gender_chart">
<div class="row _chart">
<div id="donut_chart" >
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I hope you are looking for sticky-top sidebar.
.chart_container {
height: 500vh
}
ul {
list-style: none;
padding: 0
}
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container-fluid">
<div class="row head">
<div class="col-sm-3 " id="side-bar">
<div id="side-nav" class="sticky-top text-center">
<!--GREETING-->
<div class="row greeting">
<div class="col-sm-3" style="font-size: 2.6rem;">
<i class="far fa-user"></i>
</div>
<div class="col-sm-9">
<p>Hi Olivia!<br>School of UFeis</p>
</div>
</div>
<!--LABEL-->
<div class="row label">
<div class="col-sm-12">
<p>Menu</p>
</div>
</div>
<ul id="side-menu">
<button>
<div class="row">
<div class="col-sm-1">
<i class="fas fa-desktop"></i>
</div>
<div class="col-sm-8">
Dashboard
</div>
</div>
</button>
<!---CHARTS BY YEAR--->
<li class="parent">
<button>
<div class="row">
<div class="col-sm-1">
<i class="far fa-calendar-alt" style="margin-right: .8rem;"></i>
</div>
<div class="col-sm-8">
Year
</div>
<div class="col-sm-1">
<i class="fas fa-chevron-down"></i>
</div>
</div>
</button>
<ul class="sub-nav">
<li><button id=1>2019</button></li>
<li><button id=2>2018</button></li>
<li><button id=3>2017</button></li>
</ul>
</li>
<!-- CHARTS BY TEACHER -->
<li class="parent">
<button>
<div class="row">
<div class="col-sm-1">
<i class="fas fa-chalkboard-teacher"></i>
</div>
<div class="col-sm-8">
Teacher
</div>
<div class="col-sm-1">
<i class="fas fa-chevron-down"></i>
</div>
</div>
</button>
<ul class="sub-nav">
<li><button id=12>Ms. Lee</button></li>
<li><button id=13>Mr. Rogers</button></li>
<li><button id=6>Mr. Yang</button></li>
<li><button id=7>Ms. Mary</button></li>
</ul>
</li>
</ul>
</div>
</div>
<!---CHARTS-->
<div class="col-sm-9 chart_container">
<div class="row rankings">
<div class="col-sm-12">
<div class="row _chart">
<div id="lvl_chart">Please enter at least 3 markcards to see this chart.
</div>
</div>
</div>
</div>
<!--RECALLED CHART-->
<div class="row recalled">
<div class="col-sm-11 container-fluid topChart">
<div class="row _chart">
<div id="bar_chart">Students need to enter at least 3 markcards to see this chart.</div>
</div>
</div>
</div>
<!--AGE CHART-->
<div class="row">
<div class="col-sm-11 bottomCharts">
<div class="row">
<div class="col-sm-6 age_chart">
<div class="row _chart">
<div id="pie_chart" style="">Students need to enter at least 3 markcards to see this chart.</div>
</div>
</div>
<!--GENDER CHART-->
<div class="col-sm-6 gender_chart">
<div class="row _chart">
<div id="donut_chart">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
i have 3 div. In PC, i want to show it same the picture. But when responsive, i want to show with order 1 -> 2 -> 3. How can i do it, please me
<div class="row">
<div class="col-md-6 col-sm-12">
<div class="portlet yellow-crusta box">
<div class="portlet-title">
<div class="caption">
<i class="fa fa-cogs"></i>1
</div>
</div>
<div class="portlet-body">
</div>
</div>
<div class="portlet yellow-crusta box">
<div class="portlet-title">
<div class="caption">
<i class="fa fa-cogs"></i>3
</div>
</div>
<div class="portlet-body">
</div>
</div>
</div>
<div class="col-md-6 col-sm-12">
<div class="portlet blue-hoki box">
<div class="portlet-title">
<div class="caption">
<i class="fa fa-cogs"></i>2</div>
</div>
<div class="portlet-body">
</div>
</div>
</div>
</div>
Use bootstrap classes properly.
<div class="row">
<div class="col-md-6 col-sm-12">
<div class="portlet yellow-crusta box">
<div class="portlet-title">
<div class="caption">
<i class="fa fa-cogs"></i>1
</div>
</div>
<div class="portlet-body">
</div>
</div>
</div>
<div class="col-md-6 col-sm-12">
<div class="portlet blue-hoki box">
<div class="portlet-title">
<div class="caption">
<i class="fa fa-cogs"></i>2</div>
</div>
<div class="portlet-body">
</div>
</div>
</div>
<div class="col-md-6 col-sm-12">
<div class="portlet yellow-crusta box">
<div class="portlet-title">
<div class="caption">
<i class="fa fa-cogs"></i>3
</div>
</div>
<div class="portlet-body">
</div>
</div>
</div>
</div>
I have three cols. The middle one contains a decimal number which could be in this formats:
XX.XX km
XXX.XX km
XXXX.XX km
So there could be two to four numbers before the dot and there are always two numbers after the dot.
My problem is if the number is more then two numbers befor the dot the unitary after the decimal number shifts. Then it is not in the alignment with the one under it.
This screenshot shows what I mean.
Is it possible to fix the middle col width so the unitary alignment is correct?
Also the unitary could be align-right?
This is the part of my code:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-xs-6">
<div>
<div class="row overall">
<div class="col-sm-12 reducedMarginRight reducedMarginLeft">
<h4 class="font">Overall</h4>
<hr>
</div>
</div>
<div class="row vcenter">
<div class="col-sm-3">
<span class="align-middle">
<i class="glyphicon glyphicon-road glyphSize"></i>
</span>
</div>
<div class="col-sm-5">
<div class="values font align-middle" id="overall_distance">
</div>
</div>
<div class="col-sm-4">
<div class="values font text-right" id="distanceFormat">
km
</div>
</div>
</div>
<div class="row vcenter">
<div class="col-sm-3">
<span>
<i class="glyphicon glyphicon-time glyphSize"></i>
</span>
</div>
<div class="col-sm-5">
<div class="values font" id="overall_time">
</div>
</div>
<div class="col-sm-4">
<div class="values font text-right">
h
</div>
</div>
</div>
</div>
</div>
If I understand your question correctly, Just add text-right class in your value column
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-xs-6">
<div class="row overall">
<div class="col-xs-12 reducedMarginRight reducedMarginLeft">
<h4 class="font">Overall</h4>
<hr>
</div>
</div>
<div class="row vcenter">
<div class="col-xs-3">
<span class="align-middle">
<i class="glyphicon glyphicon-road glyphSize"></i>
</span>
</div>
<div class="col-xs-5 text-right">
<div class="values font align-middle" id="overall_distance">690.05
</div>
</div>
<div class="col-xs-4">
<div class="values font text-right" id="distanceFormat">
km
</div>
</div>
</div>
<div class="row vcenter">
<div class="col-xs-3">
<span>
<i class="glyphicon glyphicon-time glyphSize"></i>
</span>
</div>
<div class="col-xs-5 text-right">
<div class="values font" id="overall_time">07:20
</div>
</div>
<div class="col-xs-4">
<div class="values font text-right">
h
</div>
</div>
</div>
</div>
</div>