I've tried many different ways to have two rows become sticky-top and I just can't seem to have any success with it.
Here is what I currently have:
Default:
Sticky-top:
Problem: How do I make the Junior/Mid/Senior row also be a sticky top but have it below the 'Core Competencies'? When I apply a sticky top to the second row, it displays above.
Correct: Both rows to be sticky-top without overlapping each other.
Please run the below code to view the problem.
.heading {
background-color: #00C6D7;
}
h4, h6 {
margin-bottom: 0px;
}
.container {
box-shadow: 0 1px 3px rgba(77,72,69,0.2), 0 6px 10px rgba(77,72,69,0.15);
}
span {
font-size: smaller;
}
.col-md-3 {
padding-top: .6rem!important;
padding-bottom: .6rem!important;
}
.col-md-2 {
display: flex;
justify-content: center;
align-items: center;
}
.bl {
border-left: 1px solid lightgray;
}
.bb {
border-bottom: 1px solid #00C6D7;
}
.bg-white {
background-color: white;
}
.mainText {
font-style: italic;
color: #00C6D7;
}
.bg-fhdark {
background-color: #5E6A71;
}
.title {
color: #A2AD00;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<div class="py-5">
<div class="container">
<div class="row sticky-top">
<div class="col-md-10 text-white text-left py-2 heading">
<h4 class="text-uppercase font-weight-bold">Core Competencies</h4>
<span class="small">Our goal was to develop a set of core competencies that are consistent across the agency amd reflect growth as a priority.
Some competencies, such as negotiating, listening and interpersonal communication are not included but are considered baseline skills.
The Core Competencies consist of four main areas: Client, Talent, Business Development and Growth, and Finance and Operations.
Each area is outlined at the junior, mid and senior level.
</span>
</div>
<div class="col-md-2 text-center py-2 heading">
<img style="width: inherit" src="" />
</div>
</div>
<div class="row bg-white">
<div class="col-md-3"></div>
<div class="col-md-3 bl">
<h6 class="text-uppercase font-weight-bold title">Junior</h6>
<span>Valued Colleague and Practitioner</span>
</div>
<div class="col-md-3 bl">
<h6 class="text-uppercase font-weight-bold title">Mid</h6>
<span>Trusted Colleague; Proven and Creative Practitioner</span>
</div>
<div class="col-md-3 bl text-left">
<h6 class="text-uppercase font-weight-bold title">Senior</h6>
<span>Trusted Client Advisor and Partner; Proven Agency Leader</span>
</div>
</div>
<div class="row py-1 bg-fhdark">
<div class="col-md-12 text-left text-uppercase font-weight-bold text-white">Client</div>
</div>
<div class="row">
<div class="col-md-3 bb">
<span>Client Focus, Strategic Counsel and Consultancy</span>
</div>
<div class="col-md-3 bl bb">1</div>
<div class="col-md-3 bl bb">1</div>
<div class="col-md-3 bl bb">1</div>
</div>
<div class="row">
<div class="col-md-3 bb">
<span>Integrated Strategy and Account Management</span>
</div>
<div class="col-md-3 bl bb">2</div>
<div class="col-md-3 bl bb">2</div>
<div class="col-md-3 bl bb">2</div>
</div>
<div class="row">
<div class="col-md-3">
<span>Creativity and Innovation</span>
</div>
<div class="col-md-3 bl">3</div>
<div class="col-md-3 bl">3</div>
<div class="col-md-3 bl">3</div>
</div>
<div class="row py-1 bg-fhdark">
<div class="col-md-12 text-left text-uppercase font-weight-bold text-white">Talent</div>
</div>
<div class="row">
<div class="col-md-3 bb">
<span>Manage Full Talent LifeCycle</span>
</div>
<div class="col-md-3 bl bb">4</div>
<div class="col-md-3 bl bb">4</div>
<div class="col-md-3 bl bb">4</div>
</div>
<div class="row">
<div class="col-md-3 bb">
<span>Professional Development/Developing and Empowering</span>
</div>
<div class="col-md-3 bl bb">5</div>
<div class="col-md-3 bl bb">5</div>
<div class="col-md-3 bl bb">5</div>
</div>
<div class="row">
<div class="col-md-3">
<span>Self-Leadership</span>
</div>
<div class="col-md-3 bl">6</div>
<div class="col-md-3 bl">6</div>
<div class="col-md-3 bl">6</div>
</div>
<div class="row py-1 bg-fhdark">
<div class="col-md-12 text-left text-uppercase font-weight-bold text-white">Business Development and Growth</div>
</div>
<div class="row">
<div class="col-md-3 bb">
<span>New Business Strategy</span>
</div>
<div class="col-md-3 bl bb">7</div>
<div class="col-md-3 bl bb">7</div>
<div class="col-md-3 bl bb">7</div>
</div>
<div class="row">
<div class="col-md-3 bb">
<span>Prospecting</span>
</div>
<div class="col-md-3 bl bb">8</div>
<div class="col-md-3 bl bb">8</div>
<div class="col-md-3 bl bb">8</div>
</div>
<div class="row">
<div class="col-md-3 bb">
<span>New Business Pitch Preparation, Participation and Leaderhip</span>
</div>
<div class="col-md-3 bl bb">9</div>
<div class="col-md-3 bl bb">9</div>
<div class="col-md-3 bl bb">9</div>
</div>
<div class="row">
<div class="col-md-3">
<span>Organic Growth</span>
</div>
<div class="col-md-3 bl">10</div>
<div class="col-md-3 bl">10</div>
<div class="col-md-3 bl">10</div>
</div>
<div class="row py-1 bg-fhdark">
<div class="col-md-12 text-left text-uppercase font-weight-bold text-white">Finance and Operations</div>
</div>
<div class="row">
<div class="col-md-3 bb">
<span>Financial Management of Accounts (Account Profitability, Realization, Budgets)</span>
</div>
<div class="col-md-3 bl bb">11</div>
<div class="col-md-3 bl bb">11</div>
<div class="col-md-3 bl bb">11</div>
</div>
<div class="row">
<div class="col-md-3">
<span>Staffing and Resource Planning</span>
</div>
<div class="col-md-3 bl">12</div>
<div class="col-md-3 bl">12</div>
<div class="col-md-3 bl">12</div>
</div>
</div>
</div>
<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>
Couldn't you just put the other div into the sticky element?
like this,
body { background: #f2f2f2; }
.heading {
background-color: #00C6D7;
}
h4, h6 {
margin-bottom: 0px;
}
.container {
box-shadow: 0 1px 3px rgba(77,72,69,0.2), 0 6px 10px rgba(77,72,69,0.15);
}
span {
font-size: smaller;
}
.col-md-3 {
padding-top: .6rem!important;
padding-bottom: .6rem!important;
}
.col-md-2 {
display: flex;
justify-content: center;
align-items: center;
}
.bl {
border-left: 1px solid lightgray;
}
.bb {
border-bottom: 1px solid #00C6D7;
}
.bg-white {
background-color: white;
}
.mainText {
font-style: italic;
color: #00C6D7;
}
.bg-fhdark {
background-color: #5E6A71;
}
.title {
color: #A2AD00;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<div class="py-5">
<div class="container">
<div class="row sticky-top">
<div class="col-md-10 text-white text-left py-2 heading">
<h4 class="text-uppercase font-weight-bold">Core Competencies</h4>
<span class="small">Our goal was to develop a set of core competencies that are consistent across the agency amd reflect growth as a priority.
Some competencies, such as negotiating, listening and interpersonal communication are not included but are considered baseline skills.
The Core Competencies consist of four main areas: Client, Talent, Business Development and Growth, and Finance and Operations.
Each area is outlined at the junior, mid and senior level.
</span>
</div>
<div class="col-md-2 text-center py-2 heading">
<img style="width: inherit" src="" />
</div>
<div class="col-md-12">
<div class="row bg-white">
<div class="col-md-3"></div>
<div class="col-md-3 bl">
<h6 class="text-uppercase font-weight-bold title">Junior</h6>
<span>Valued Colleague and Practitioner</span>
</div>
<div class="col-md-3 bl">
<h6 class="text-uppercase font-weight-bold title">Mid</h6>
<span>Trusted Colleague; Proven and Creative Practitioner</span>
</div>
<div class="col-md-3 bl text-left">
<h6 class="text-uppercase font-weight-bold title">Senior</h6>
<span>Trusted Client Advisor and Partner; Proven Agency Leader</span>
</div>
</div></div>
</div>
<div class="row py-1 bg-fhdark">
<div class="col-md-12 text-left text-uppercase font-weight-bold text-white">Client</div>
</div>
<div class="row">
<div class="col-md-3 bb">
<span>Client Focus, Strategic Counsel and Consultancy</span>
</div>
<div class="col-md-3 bl bb">1</div>
<div class="col-md-3 bl bb">1</div>
<div class="col-md-3 bl bb">1</div>
</div>
<div class="row">
<div class="col-md-3 bb">
<span>Integrated Strategy and Account Management</span>
</div>
<div class="col-md-3 bl bb">2</div>
<div class="col-md-3 bl bb">2</div>
<div class="col-md-3 bl bb">2</div>
</div>
<div class="row">
<div class="col-md-3">
<span>Creativity and Innovation</span>
</div>
<div class="col-md-3 bl">3</div>
<div class="col-md-3 bl">3</div>
<div class="col-md-3 bl">3</div>
</div>
<div class="row py-1 bg-fhdark">
<div class="col-md-12 text-left text-uppercase font-weight-bold text-white">Talent</div>
</div>
<div class="row">
<div class="col-md-3 bb">
<span>Manage Full Talent LifeCycle</span>
</div>
<div class="col-md-3 bl bb">4</div>
<div class="col-md-3 bl bb">4</div>
<div class="col-md-3 bl bb">4</div>
</div>
<div class="row">
<div class="col-md-3 bb">
<span>Professional Development/Developing and Empowering</span>
</div>
<div class="col-md-3 bl bb">5</div>
<div class="col-md-3 bl bb">5</div>
<div class="col-md-3 bl bb">5</div>
</div>
<div class="row">
<div class="col-md-3">
<span>Self-Leadership</span>
</div>
<div class="col-md-3 bl">6</div>
<div class="col-md-3 bl">6</div>
<div class="col-md-3 bl">6</div>
</div>
<div class="row py-1 bg-fhdark">
<div class="col-md-12 text-left text-uppercase font-weight-bold text-white">Business Development and Growth</div>
</div>
<div class="row">
<div class="col-md-3 bb">
<span>New Business Strategy</span>
</div>
<div class="col-md-3 bl bb">7</div>
<div class="col-md-3 bl bb">7</div>
<div class="col-md-3 bl bb">7</div>
</div>
<div class="row">
<div class="col-md-3 bb">
<span>Prospecting</span>
</div>
<div class="col-md-3 bl bb">8</div>
<div class="col-md-3 bl bb">8</div>
<div class="col-md-3 bl bb">8</div>
</div>
<div class="row">
<div class="col-md-3 bb">
<span>New Business Pitch Preparation, Participation and Leaderhip</span>
</div>
<div class="col-md-3 bl bb">9</div>
<div class="col-md-3 bl bb">9</div>
<div class="col-md-3 bl bb">9</div>
</div>
<div class="row">
<div class="col-md-3">
<span>Organic Growth</span>
</div>
<div class="col-md-3 bl">10</div>
<div class="col-md-3 bl">10</div>
<div class="col-md-3 bl">10</div>
</div>
<div class="row py-1 bg-fhdark">
<div class="col-md-12 text-left text-uppercase font-weight-bold text-white">Finance and Operations</div>
</div>
<div class="row">
<div class="col-md-3 bb">
<span>Financial Management of Accounts (Account Profitability, Realization, Budgets)</span>
</div>
<div class="col-md-3 bl bb">11</div>
<div class="col-md-3 bl bb">11</div>
<div class="col-md-3 bl bb">11</div>
</div>
<div class="row">
<div class="col-md-3">
<span>Staffing and Resource Planning</span>
</div>
<div class="col-md-3 bl">12</div>
<div class="col-md-3 bl">12</div>
<div class="col-md-3 bl">12</div>
</div>
</div>
</div>
<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>
Related
I have a 3 row layout and inside of it there are multiple column and row combinations.
I tried this solution, but I couldn't do it to my code. How can I get a Bootstrap column to span multiple rows?
I have problem with 2nd row, I want to align 3rd column.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css">
<div class="past-wrapper">
<div class="row align-items-center">
<div class="col-1 column-aligner">
<div class="column-header text-center">Geçmiş</div>
</div>
<div class="col-4 column-aligner">deneme</div>
<div class="col-3 column-aligner">deneme</div>
<div class="col-3 column-aligner">deneme</div>
</div>
</div>
<div class="today-wrapper">
<div class="row align-items-center">
<div class="col-1 column-aligner">
<div class="column-header text-center">Bugün</div>
</div>
<div class="col-4 column-aligner">deneme</div>
<div class="col-3 defect-wrapper justify-content-center">
<div class="row defect-wrapper-row">
<div class="col-6 defect-col">deneme</div>
<div class="col-6 defect-col">deneme</div>
</div>
</div>
<div class="col-3 column-aligner">deneme</div>
</div>
</div>
<div class="action-wrapper">
<div class="row align-items-center">
<div class="col-1 column-aligner action-notes">
<div class="column-header text-center">Aksiyonlar</div>
</div>
<div class="col-10 column-aligner action-notes">deneme</div>
</div>
</div>
Firstly, rows should always be children of containers. The two have offsetting margins that need to balance. Review the grid docs. I've used the container-fluid class so they're full width.
Then, your columns need to total 12 for a given row (or at least should have the same total for each row). If you can't make that work, consider using Bootstrap's flexbox layout instead of rows and columns.
Also, your nested columns should span the entire row if you want them to stack, meaning you need col-12 instead of col-6 for those.
The only thing remaining is to set heights on the columns, if you actually need them to stretch. That can be done in several ways.
I've added interior divs and some CSS here for demonstration purposes. You wouldn't need those unless you want to apply color as I have.
/* styles for demo only */
.row>div>div:not(.row) {
background: #ddd;
border: 1px dotted #aaa;
}
.today-wrapper>.row {
background: pink;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="container-fluid past-wrapper">
<div class="row align-items-center">
<div class="col-2 column-aligner">
<div class="column-header text-center">Geçmiş</div>
</div>
<div class="col-4 column-aligner">
<div>deneme</div>
</div>
<div class="col-3 column-aligner">
<div>deneme</div>
</div>
<div class="col-3 column-aligner">
<div>deneme</div>
</div>
</div>
</div>
<div class="container-fluid today-wrapper">
<div class="row align-items-center">
<div class="col-2 column-aligner">
<div class="column-header text-center">
Bugün
</div>
</div>
<div class="col-4 column-aligner">
<div>deneme</div>
</div>
<div class="col-3 defect-wrapper justify-content-center">
<div class="row defect-wrapper-row">
<div class="col-12 defect-col">
<div>deneme</div>
</div>
<div class="col-12 defect-col">
<div>deneme</div>
</div>
</div>
</div>
<div class="col-3 column-aligner">
<div>deneme</div>
</div>
</div>
</div>
<div class="container-fluid action-wrapper">
<div class="row align-items-center">
<div class="col-2 column-aligner action-notes">
<div class="column-header text-center">
<div>Aksiyonlar</div>
</div>
</div>
<div class="col-10 column-aligner action-notes">
<div>deneme</div>
</div>
</div>
</div>
the sum of the columns must be 12, if it gives more or less, the layout will be harmed.
I made some adjustments to the columns.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css">
<div class="container-fluid text-center">
<div class="past-wrapper bg-danger">
<div class="row align-items-center">
<div class="col-1 column-aligner">
<div class="column-header">Geçmiş</div>
</div>
<div class="col-4 column-aligner">deneme</div>
<div class="col-3 column-aligner">deneme</div>
<div class="col-4 column-aligner">deneme</div>
</div>
</div>
<div class="today-wrapper bg-warning">
<div class="row align-items-center">
<div class="col-1 column-aligner">
<div class="column-header">Bugün</div>
</div>
<div class="col-4 column-aligner">deneme</div>
<div class="col-3 column-aligner">
<div class="w-100 defect-col">deneme</div>
<div class="w-100 defect-col">deneme</div>
</div>
<div class="col-4 column-aligner">deneme</div>
</div>
</div>
<div class="action-wrapper bg-primary">
<div class="row align-items-center">
<div class="col-1 column-aligner action-notes">
<div class="column-header">Aksiyonlar</div>
</div>
<div class="col-11 column-aligner action-notes">deneme</div>
</div>
</div>
</div>
I'm trying to put extra margin space between columns on my Bootstrap grid layout.
I've tried adding custom CSS class like this
.classWithPad {
margin: 10px;
padding: 10px;
}
but didn't solve my problem, also I've tried adding ml-1 and mr-1 but I didn't get desired. Here is my code:
When I tried to add some extra margin/padding the corresponding column is moved to a new row.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<div class="row mt-4 justify-content-between">
<div class="col-md-4 card border-radius-15 bg-shadow pt-3">
<h5>General Information</h5>
<hr/>
<div class="row">
<div class="col-md-6 pr-0">
paragraphs...
</div>
<div class="col-md-6 pl-0 text-right">
paragraphs...
</div>
</div>
</div>
<div class="col-md-4 card border-radius-15 bg-shadow pt-3">
<h5>Features</h5>
<hr/>
<div class="row">
<div class="col-md-6 pr-0">
</div>
<div class="col-md-6 pl-0 text-right">
</div>
</div>
</div>
<div class="col-md-4 card border-radius-15 bg-shadow pt-3">
<h5>Game Manufacturers</h5>
<hr/>
<div class="row">
<div class="col-md-6 pr-0">
</div>
<div class="col-md-6 pl-0 text-right">
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>
You generally don't want to mix structural and presentation elements. In this case, you've combined columns with cards. Put the cards inside the columns, and if you wanted them full-height you can use h-100 on them.
That, along with the container that should be present around outer rows, and you're all good. If you want more spacing, use px-* classes on the columns.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<div class="container-fluid">
<div class="row mt-4 justify-content-between">
<div class="col-4">
<div class="card h-100 border-radius-15 bg-shadow pt-3">
<h5>General Information</h5>
<hr/>
<div class="row">
<div class="col-md-6 pr-0">
<p>paragraphs...</p>
</div>
<div class="col-md-6 pl-0 text-right">
<p>paragraphs...</p>
</div>
</div>
</div>
</div>
<div class="col-4">
<div class="card h-100 border-radius-15 bg-shadow pt-3">
<h5>Features</h5>
<hr/>
<div class="row">
<div class="col-md-6 pr-0">
<p>paragraphs...</p>
</div>
<div class="col-md-6 pl-0 text-right">
<p>paragraphs...</p>
</div>
</div>
</div>
</div>
<div class="col-4">
<div class="card h-100 border-radius-15 bg-shadow pt-3">
<h5>Game Manufacturers</h5>
<hr/>
<div class="row">
<div class="col-md-6 pr-0">
<p>paragraphs...</p>
</div>
<div class="col-md-6 pl-0 text-right">
<p>paragraphs...</p>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>
In a section of my code I made a row-grid for a part that displays images but when I went to insert and look at the website its not displaying in a row format but in a column and im not sure why. I thought the problem came from it being col-sm-6 but i changed it to col-sm-12 and its still not displaying it. Any reasons why?
.site-main .project-area {
padding: 4rem 0;
}
.site-main .project-area .button-group button {
background: transparent;
border: none;
font: normal 500 16px/130px var(--lato);
text-transform: uppercase;
}
.site-main .project-area .button-group button+button {
padding-left: 3rem;
}
.site-main .project-area .grid .our-project>title h4 {
font: normal 700 25px/12px var(--lato);
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<section class="project-area">
<div class="container">
<div class="project title pb-5">
<h1 class="h1 text-uppercase title-h1"> Recent Projects</h1>
<h1 class="h1 text-uppercase title h1"> Quality Work</h1>
</div>
<div class="div button-group">
<button type="button" class="active">All</button>
<button type="button" data-filter=".cars">Cars</button>
<button type="button" data-filter=".character">Characters</button>
<button type="button">Food</button>
<button type="button">Activities</button>
</div>
<div class="row-grid">
<div class="col-lg-4 col-md-6 col-sm-6 element-item cars">
<div class="our-project">
<div class="img">
<img src="./img/portfolio/car.jpg" alt="car">
</div>
<div class="title py-4">
<h4 class="text-uppercase">minimul design</h4>
<span class="text-secondary">Latest, Popular</span>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-12 element-item character">
<div class="our-project">
<div class="img">
<img src="./img/portfolio/images.jpg" alt="car">
</div>
<div class="title py-4">
<h4 class="text-uppercase">video game character</h4>
<span class="text-secondary">popular, Portfolio</span>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-12 element-item popular">
<div class="our-project">
<div class="img">
<img src="./img/portfolio/ntfs-to-be-professional-gamer-image1.jpg" alt="car">
</div>
<div class="title py-4">
<h4 class="text-uppercase">minimul design</h4>
<span class="text-secondary">Latest, Popular</span>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-12 element-item popular">
<div class="our-project">
<div class="img">
<img src="./img/portfolio/ntfs-to-be-professional-gamer-image1.jpg" alt="car">
</div>
<div class="title py-4">
<h4 class="text-uppercase">minimul design</h4>
<span class="text-secondary">Latest, Popular</span>
</div>
</div>
</div>
</div>
</div>
</section>
Changing the class row-grid to row makes it work. I don't think Bootstrap has a class called row-grid.
If you are trying to fit all the div elements into one row, just replace the col-lg-4 col-md-6 col-sm-6 and the col-lg-4 col-md-6 col-sm-12 with col
I made these vertical tabs using HTML + CSS only (because I'm challenging myself not to use ANY SCRIPTING AT ALL). It works but I can't disable the automatic scrolling when I open a section and click on a different section.
I know it's a natural behavior to jump on a different section when using anchor links, but I want to disable this so it would look like normal vertical tabs with scripts on it.
Here's my CodePen for this.
https://codepen.io/bosskeito/pen/qBXzdpX
I'm working on Drupal CMS with Bootstrap 4.6.1
.cstmTabTargetVertical:not(:target) {
display: none;
}
.cstmTabTargetVertical:target {
display: block;
}
.cstmTabBtn {
border-radius: 0 !important;
}
.cstmTabVertical .cstmTabBtn {
width: 100%;
}
.cstmTabTargetVertical:before {
content: "";
display: block;
height: 100px;
margin: -100px 0 0 0;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.1/css/bootstrap-grid.min.css" integrity="sha512-Xj2sd25G+JgJYwo0cvlGWXoUekbLg5WvW+VbItCMdXrDoZRWcS/d40ieFHu77vP0dF5PK+cX6TIp+DsPfZomhw==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.1/css/bootstrap-reboot.min.css" integrity="sha512-ioOlrrQQ3fZN/A7N2rZVm6JXp/Lg7xtda9OaRKornjBcuTW/UqIhTlPyngcGQGrQTOhJgmSltKM4v3Ne03WPug==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.1/css/bootstrap.min.css" integrity="sha512-T584yQ/tdRR5QwOpfvDfVQUidzfgc2339Lc8uBDtcp/wYu80d7jwBgAxbyMh0a9YM9F8N3tdErpFI8iaGx6x5g==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<div class="dFullWidth">
<div class="row">
<div class="col-lg-12 px-0 dBGLightGray">
<div class="container-fluid px-0">
<div class="dContainer1270">
<div class="row mx-auto cstmMobileNarrow">
<div class="col-md-12 my-3">
<p class="dh2 dFontDarkGray mb-0 pb-4">General Information Sheet 1</p>
</div>
<div class="col-md-2 cstmTabVertical">
<a href="#GSI_2021" class="cstmTabBtn mb-2 animButtonSlide animSlideLeft animHover dButtonWhite">
<p class="dh5 mb-0 dFontOrange animHover">2021</p>
</a>
<a href="#GSI_2020" class="cstmTabBtn mb-2 animButtonSlide animSlideLeft animHover dButtonWhite">
<p class="dh5 mb-0 dFontOrange animHover">2020</p>
</a>
</div>
<div class="col-md-10">
<div class="cstmTabTargetVertical" id="GSI_2021">
<div class="row container-fluid px-3">
<div class="col-lg-12">
<p class="dh2 dFontDarkGray pb-4 mb-0">2021</p>
</div>
<div class="col-md-6">
<div class="row container-fluid px-0">
<div class="col-md-12 py-3 px-0">
<div class="row cstmMobileNarrow">
<div class="col-md">
<p class="m-0 dh5"><a class="dLinkOrange animHover" href="https://www.facebook.com/" target="_blank">placeholder link 1</a></p>
<p class="m-0 dp">November 18, 2021</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="cstmTabTargetVertical" id="GSI_2020">
<div class="row container-fluid px-3">
<div class="col-lg-12">
<p class="dh2 dFontDarkGray pb-4 mb-0">2020</p>
</div>
<div class="col-md-6">
<div class="row container-fluid px-0">
<div class="col-md-12 py-3 px-0">
<div class="row cstmMobileNarrow">
<div class="col-md">
<p class="m-0 dh5"><a class="dLinkOrange animHover" href="https://www.facebook.com/" target="_blank">placeholder link 2</a></p>
<p class="m-0 dp">November 18, 2021</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="dFullWidth">
<div class="row">
<div class="col-lg-12 px-0 dBGLightGray">
<div class="container-fluid px-0">
<div class="dContainer1270 py-5">
<div class="row mx-auto py-5 cstmMobileNarrow">
<div class="col-md-12 my-3">
<p class="dh2 dFontDarkGray mb-0 pb-4">General Information Sheet 2</p>
</div>
<div class="col-md-2 cstmTabVertical">
<a href="#GSA_2021" class="cstmTabBtn mb-2 animButtonSlide animSlideLeft animHover dButtonWhite">
<p class="dh5 mb-0 dFontOrange animHover">2021</p>
</a>
<a href="#GSA_2020" class="cstmTabBtn mb-2 animButtonSlide animSlideLeft animHover dButtonWhite">
<p class="dh5 mb-0 dFontOrange animHover">2020</p>
</a>
</div>
<div class="col-md-10">
<div class="cstmTabTargetVertical" id="GSA_2021">
<div class="row container-fluid px-3">
<div class="col-lg-12">
<p class="dh2 dFontDarkGray pb-4 mb-0">2021</p>
</div>
<div class="col-md-6">
<div class="row container-fluid px-0">
<div class="col-md-12 py-3 px-0">
<div class="row cstmMobileNarrow">
<div class="col-md">
<p class="m-0 dh5"><a class="dLinkOrange animHover" href="https://www.facebook.com/" target="_blank">placeholder link 1</a></p>
<p class="m-0 dp">November 18, 2021</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="cstmTabTargetVertical" id="GSA_2020">
<div class="row container-fluid px-3">
<div class="col-lg-12">
<p class="dh2 dFontDarkGray pb-4 mb-0">2020</p>
</div>
<div class="col-md-6">
<div class="row container-fluid px-0">
<div class="col-md-12 py-3 px-0">
<div class="row cstmMobileNarrow">
<div class="col-md">
<p class="m-0 dh5"><a class="dLinkOrange animHover" href="https://www.facebook.com/" target="_blank">placeholder link 2</a></p>
<p class="m-0 dp">November 18, 2021</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="dFullWidth">
<div class="row">
<div class="col-lg-12 px-0 dBGLightGray">
<div class="container-fluid px-0">
<div class="dContainer1270">
<div class="row mx-auto cstmMobileNarrow">
<div class="col-md-12 my-3">
<p class="dh2 dFontDarkGray mb-0 pb-4">General Information Sheet 3</p>
</div>
<div class="col-md-2 cstmTabVertical">
<a href="#GSB_2021" class="cstmTabBtn mb-2 animButtonSlide animSlideLeft animHover dButtonWhite">
<p class="dh5 mb-0 dFontOrange animHover">2021</p>
</a>
<a href="#GSB_2020" class="cstmTabBtn mb-2 animButtonSlide animSlideLeft animHover dButtonWhite">
<p class="dh5 mb-0 dFontOrange animHover">2020</p>
</a>
</div>
<div class="col-md-10">
<div class="cstmTabTargetVertical" id="GSB_2021">
<div class="row container-fluid px-3">
<div class="col-lg-12">
<p class="dh2 dFontDarkGray pb-4 mb-0">2021</p>
</div>
<div class="col-md-6">
<div class="row container-fluid px-0">
<div class="col-md-12 py-3 px-0">
<div class="row cstmMobileNarrow">
<div class="col-md">
<p class="m-0 dh5"><a class="dLinkOrange animHover" href="https://www.facebook.com/" target="_blank">placeholder link 1</a></p>
<p class="m-0 dp">November 18, 2021</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="cstmTabTargetVertical" id="GSB_2020">
<div class="row container-fluid px-3">
<div class="col-lg-12">
<p class="dh2 dFontDarkGray pb-4 mb-0">2020</p>
</div>
<div class="col-md-6">
<div class="row container-fluid px-0">
<div class="col-md-12 py-3 px-0">
<div class="row cstmMobileNarrow">
<div class="col-md">
<p class="m-0 dh5"><a class="dLinkOrange animHover" href="https://www.facebook.com/" target="_blank">placeholder link 2</a></p>
<p class="m-0 dp">November 18, 2021</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I'm building a complex table and having some issues with responsiveness and being able to align all the columns in a row to have the same height depending on how much content is inside a certain row.
Please run the code in full page (1100px +) since mobile responsiveness is not completed yet
Here is the JSFiddle: http://jsfiddle.net/fLr9th4y/2/ - Please reference to #11 in the table to view an example.
Here is the code:
.heading {
background-color: #00C6D7;
}
.sub-heading {
background-color: white;
border-bottom: 1px solid lightgray;
}
h4, h6 {
margin-bottom: 0px;
}
.container {
box-shadow: 0 1px 3px rgba(77,72,69,0.2), 0 6px 10px rgba(77,72,69,0.15);
}
.row > .col-md-12 > span {
font-size: smaller;
}
.col-md-4 > .row {
padding-top: .6rem!important;
padding-bottom: .6rem!important;
height: 60px;
}
.col-md-3 > .row {
padding-top: .6rem!important;
padding-bottom: .6rem!important;
height: 60px;
}
.col-md-2 {
display: flex;
justify-content: center;
align-items: center;
}
.col-md-9 {
padding: 0px!important;
}
.bl {
border-left: 1px solid lightgray;
}
.bb {
border-bottom: 1px solid #00C6D7;
}
.bg-white {
background-color: white;
}
.mainText {
font-style: italic;
color: #00C6D7;
}
.bg-fhdark {
background-color: #5E6A71;
}
.title {
color: #A2AD00;
}
.blank {
background: transparent!important;
}
.slick-prev, .slick-next {
background: black!important;
}
.r1 {
color: black;
}
/* BootStrap 4 Classes */
.py-5 {
padding-bottom: 3rem!important;
padding-top: 3rem!important;
}
.py-2 {
padding-bottom: .5rem!important;
padding-top: .5rem!important;
}
.text-white {
color: #fff!important;
}
.text-left {
text-align: left!important;
}
.text-uppercase {
text-transform: uppercase!important;
}
.font-weight-bold {
font-weight: 700!important;
}
.small {
font-size: 80%;
font-weight: 400;
}
.row {
display: flex;
flex-wrap: wrap;
}
.row-11 {
height: auto!important;
}
/* ----- */
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css"/>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css"/>
</head>
<body>
<div class="py-5">
<div class="container">
<div class="row">
<div class="col-md-10 text-white text-left py-2 heading">
<h4 class="text-uppercase font-weight-bold">Core Competencies</h4>
<span class="small">Our goal was to develop a set of core competencies that are consistent across the agency amd reflect growth as a priority.
</span>
</div>
<div class="col-md-2 col-md-2 text-center py-2 heading">
<img src="" />
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-3">
<div class="row r1">
<div class="col-md-12">
<span>Test</span>
</div>
</div>
<div class="row py-1 bg-fhdark">
<div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
<span>Client</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>Client Focus, Strategic Counsel and Consultancy</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>Integrated Strategy and Account Management</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>Creativity and Innovation</span>
</div>
</div>
<div class="row py-1 bg-fhdark">
<div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
<span>Talent</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>Manage Full Talent LifeCycle</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>Professional Development/Developing and Empowering</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>Self-Leadership</span>
</div>
</div>
<div class="row py-1 bg-fhdark">
<div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
<span>Business Development and Growth</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>New Business Strategy</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>Prospecting</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>New Business Pitch Preparation, Participation and Leadership</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>Organic Growth</span>
</div>
</div>
<div class="row py-1 bg-fhdark">
<div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
<span>Finance and Operations</span>
</div>
</div>
<div class="row bb row-11">
<div class="col-md-12">
<span>Financial Management of Accounts (Account Profitability, Realization, Budgets) TEST TEST TEST TEST TEST TEST TEST</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>Staffing and Resource Planning</span>
</div>
</div>
</div>
<div class="col-md-9">
<section class="regular slider">
<div class="col-md-4 bl">
<div class="row r1">
<div class="col-md-12">
<h6 class="text-uppercase font-weight-bold title">Junior</h6>
<span>Valued Colleague and Practitioner</span>
</div>
</div>
<div class="row bg-fhdark">
<div class="col-md-12">
<div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
</div>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>1</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>2</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>3</span>
</div>
</div>
<div class="row bg-fhdark">
<div class="col-md-12">
<div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
</div>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>4</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>5</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>6</span>
</div>
</div>
<div class="row bg-fhdark">
<div class="col-md-12">
<div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
</div>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>7</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>8</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>9</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>10</span>
</div>
</div>
<div class="row bg-fhdark">
<div class="col-md-12">
<div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
</div>
</div>
</div>
<div class="row bb row-11">
<div class="col-md-12">
<span>11</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>12</span>
</div>
</div>
</div>
<div class="col-md-4 bl">
<div class="row r1">
<div class="col-md-12">
<h6 class="text-uppercase font-weight-bold title">Mid</h6>
<span>Trusted Colleague; Proven and Creative Practitioner</span>
</div>
</div>
<div class="row bg-fhdark">
<div class="col-md-12">
<div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
</div>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>1</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>2</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>3</span>
</div>
</div>
<div class="row bg-fhdark">
<div class="col-md-12">
<div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
</div>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>4</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>5</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>6</span>
</div>
</div>
<div class="row bg-fhdark">
<div class="col-md-12">
<div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
</div>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>7</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>8</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>9</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>10</span>
</div>
</div>
<div class="row bg-fhdark">
<div class="col-md-12">
<div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
</div>
</div>
</div>
<div class="row bb row-11">
<div class="col-md-12">
<span>11</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>12</span>
</div>
</div>
</div>
<div class="col-md-4 bl">
<div class="row r1">
<div class="col-md-12">
<h6 class="text-uppercase font-weight-bold title">Senior</h6>
<span>Trusted Client Advisor and Partner; Proven Agency Leader</span>
</div>
</div>
<div class="row bg-fhdark">
<div class="col-md-12">
<div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
</div>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>1</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>2</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>3</span>
</div>
</div>
<div class="row bg-fhdark">
<div class="col-md-12">
<div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
</div>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>4</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>5</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>6</span>
</div>
</div>
<div class="row bg-fhdark">
<div class="col-md-12">
<div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
</div>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>7</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>8</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>9</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>10</span>
</div>
</div>
<div class="row bg-fhdark">
<div class="col-md-12">
<div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
</div>
</div>
</div>
<div class="row bb row-11">
<div class="col-md-12">
<span>11</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>12</span>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
</div>
</div>
</div>
<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>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<script type="text/javascript">
$(function() {
$(".regular").slick({
dots: false,
infinite: false,
slidesToShow: 2,
slidesToScroll: 1,
});
});
</script>
</body>
</html>
Just restructure your html. You having the row and inside you need to have your columns (each is col-md-3 if I see it right, but that's not so important). You can also use css-grid for it: https://css-tricks.com/snippets/css/complete-guide-grid/
I believe you are approaching it wrong way. You should refactor your HTML structure base on row instead of column, it will be easier to make it responsive. You should customize slick function to make it work instead of working arround with CSS
.heading {
background-color: #00C6D7;
}
.sub-heading {
background-color: white;
border-bottom: 1px solid lightgray;
}
h4, h6 {
margin-bottom: 0px;
}
.container {
box-shadow: 0 1px 3px rgba(77,72,69,0.2), 0 6px 10px rgba(77,72,69,0.15);
}
.row > .col-md-12 > span {
font-size: smaller;
}
.col-md-4 > .row {
padding-top: .6rem!important;
padding-bottom: .6rem!important;
height: 60px;
}
.col-md-3 > .row {
padding-top: .6rem!important;
padding-bottom: .6rem!important;
height: 60px;
}
.col-md-2 {
display: flex;
justify-content: center;
align-items: center;
}
.col-md-9 {
padding: 0px!important;
}
.bl {
border-left: 1px solid lightgray;
}
.bb {
border-bottom: 1px solid #00C6D7;
}
.bg-white {
background-color: white;
}
.mainText {
font-style: italic;
color: #00C6D7;
}
.bg-fhdark {
background-color: #5E6A71;
}
.title {
color: #A2AD00;
}
.blank {
background: transparent!important;
}
.slick-prev, .slick-next {
background: black!important;
}
.r1 {
color: black;
}
/* BootStrap 4 Classes */
.py-5 {
padding-bottom: 3rem!important;
padding-top: 3rem!important;
}
.py-2 {
padding-bottom: .5rem!important;
padding-top: .5rem!important;
}
.text-white {
color: #fff!important;
}
.text-left {
text-align: left!important;
}
.text-uppercase {
text-transform: uppercase!important;
}
.font-weight-bold {
font-weight: 700!important;
}
.small {
font-size: 80%;
font-weight: 400;
}
.row {
display: flex;
flex-wrap: wrap;
}
.row-11 {
height: auto!important;
}
/* ----- */
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<div class="row bg-fhdark">
<div class="col-sm-4 text-left text-uppercase font-weight-bold text-white">
<span>Finance and Operations</span>
</div>
<div class="col-sm-4"></div>
<div class="col-sm-4"></div>
</div>
<div class="row bb">
<div class="col-sm-4">
<span>Financial Management of Accounts (Account Profitability, Realization, Budgets) TEST TEST TEST TEST TEST
TEST TEST</span>
</div>
<div class="col-sm-4 bl">11</div>
<div class="col-sm-4 bl">12</div>
</div>
<div class="row bb">
<div class="col-sm-4">
<span>Staffing and Resource Planning</span>
</div>
<div class="col-sm-4 bl">12</div>
<div class="col-sm-4 bl">12</div>
</div>