Can't display posts in a grid view

48
May 17, 2018, at 4:30 PM

i'm editing a theme and i cant display posts in a grid view whatever i'm doing i think the problem is in the css but i cant determine where i created a different index but still same problem if anyone can help me find the error, i thought it is because of flex codes but i'm not that professional to know that, also the row code

the css/index.php is

/*! 
Theme Name: WP Bootstrap 4 
Theme URI: https://bootstrap-wp.com 
Author: TwoPoints 
Author URI: 
Description: "WP Bootstrap 4" is a simple & easy to use WordPress theme. It is based on world's most popular framework for responsive websites, Twitter Bootstrap 4. "WP Bootstrap 4" is a perfect combination of Bootstrap 4 and WordPress. It is fast and light-weight with around 20 kb style.css. It is also search engine friendly. It has a built-in slider for featured posts on blog's home page. It supports all major & popular WordPress plugins like Jetpack, Contact Form 7, Elementor, Beaver Builder, SiteOrigin Page Builder etc. Check demo on https://bootstrap-wp.com 
Version: 1.0.7 
License: GNU General Public License v3 or later 
License URI: https://www.gnu.org/licenses/gpl.html 
Text Domain: wp-bootstrap-4 
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, two-columns, left-sidebar, right-sidebar, custom-colors, footer-widgets, full-width-template, rtl-language-support, sticky-post, theme-options, blog 
 
This theme, like WordPress, is licensed under the GPL. 
Use it to make something cool, have fun, and share what you've learned with others. 
 
WP Bootstrap 4 is based on Underscores https://underscores.me/, (C) 2012-2017 Automattic, Inc. 
Underscores is distributed under the terms of the GNU GPL v2 or later. 
*/ 
body { background-color: #f8f9fa; } 
 
hr { background-color: #ccc; border: 0; height: 1px; margin-bottom: 1.5em; } 
 
dt { font-weight: bold; } 
 
dd { margin: 0 1.5em 1.5em; } 
 
img { height: auto; /* Make sure images are scaled correctly. */ max-width: 100%; /* Adhere to container width. */ } 
 
figure { margin: 1em 0; /* Extra wide images within figure tags don't overflow the content area. */ } 
 
table { margin: 0 0 1.5em; width: 100%; } 
 
/* Text meant only for screen readers. */ 
.screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); -webkit-clip-path: inset(50%); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */ } 
 
.screen-reader-text:focus { background-color: #f1f1f1; border-radius: 3px; -webkit-box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); clip: auto !important; -webkit-clip-path: none; clip-path: none; color: #21759b; display: block; font-size: 14px; font-size: 0.875rem; font-weight: bold; height: auto; left: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000; /* Above WP toolbar. */ } 
 
/* Do not show the outline on the skip link target. */ 
#content[tabindex="-1"]:focus { outline: 0; } 
 
.alignleft { display: inline; float: left; margin-right: 1.5em; } 
 
.alignright { display: inline; float: right; margin-left: 1.5em; } 
 
.aligncenter { clear: both; display: block; margin-left: auto; margin-right: auto; } 
 
.clear:before, .clear:after, .entry-content:before, .entry-content:after, .comment-content:before, .comment-content:after, .site-header:before, .site-header:after, .site-content:before, .site-content:after, .site-footer:before, .site-footer:after { content: ""; display: table; table-layout: fixed; } 
 
.clear:after, .entry-content:after, .comment-content:after, .site-header:after, .site-content:after, .site-footer:after { clear: both; } 
 
.widget { margin: 0 0 1.5em; /* Make sure select elements fit in widgets. */ } 
 
.widget select { max-width: 100%; } 
 
.sticky { display: block; } 
 
.hentry { margin: 0 0 1.5em; } 
 
.updated:not(.published) { display: none; } 
 
.page-content, .entry-content, .entry-summary { margin: 1.5em 0 0; } 
 
.page-links { clear: both; margin: 0 0 1.5em; } 
 
.comment-content a { word-wrap: break-word; } 
 
.bypostauthor { display: block; } 
 
/* Globally hidden elements when Infinite Scroll is supported and in use. */ 
.infinite-scroll .posts-navigation, .infinite-scroll.neverending .site-footer { /* Theme Footer (when set to scrolling) */ display: none; } 
 
/* When Infinite Scroll has reached its end we need to re-display elements that were hidden (via .neverending) before. */ 
.infinity-end.neverending .site-footer { display: block; } 
 
.page-content .wp-smiley, .entry-content .wp-smiley, .comment-content .wp-smiley { border: none; margin-bottom: 0; margin-top: 0; padding: 0; } 
 
/* Make sure embeds and iframes fit their containers. */ 
embed, iframe, object { max-width: 100%; } 
 
/* Make sure logo link wraps around logo image. */ 
.custom-logo-link { display: inline-block; } 
 
.wp-caption { margin-bottom: 1.5em; max-width: 100%; } 
 
.wp-caption img[class*="wp-image-"] { display: block; margin-left: auto; margin-right: auto; } 
 
.wp-caption .wp-caption-text { margin: 0.8075em 0; } 
 
.wp-caption-text { text-align: center; } 
 
.gallery { margin-bottom: 1.5em; } 
 
.gallery-item { display: inline-block; text-align: center; vertical-align: top; width: 100%; } 
 
.gallery-columns-2 .gallery-item { max-width: 50%; } 
 
.gallery-columns-3 .gallery-item { max-width: 33.33%; } 
 
.gallery-columns-4 .gallery-item { max-width: 25%; } 
 
.gallery-columns-5 .gallery-item { max-width: 20%; } 
 
.gallery-columns-6 .gallery-item { max-width: 16.66%; } 
 
.gallery-columns-7 .gallery-item { max-width: 14.28%; } 
 
.gallery-columns-8 .gallery-item { max-width: 12.5%; } 
 
.gallery-columns-9 .gallery-item { max-width: 11.11%; } 
 
.gallery-caption { display: block; } 
 
/*-------------------------------------------------------------- 
# Custom 
--------------------------------------------------------------*/ 
body { -ms-word-wrap: break-word; word-wrap: break-word; -webkit-font-smoothing: auto; text-rendering: optimizeLegibility !important; -moz-osx-font-smoothing: grayscale; font-smoothing: auto; } 
 
a, button, input { -webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } 
 
blockquote { font-size: 1.25rem; padding: 1.25rem 1.75rem; } 
 
table { width: 100%; max-width: 100%; margin-bottom: 1rem; background-color: transparent; } 
 
table th, table td { padding: 0.75rem; vertical-align: top; border-top: 1px solid #dee2e6; } 
 
table thead th { vertical-align: bottom; border-bottom: 2px solid #dee2e6; } 
 
table tbody + tbody { border-top: 2px solid #dee2e6; } 
 
table table { background-color: #fff; } 
 
figcaption { padding-top: 0; padding-bottom: .75rem; color: #6c757d; text-align: left; } 
 
input[type="button"], input[type="reset"], input[type="submit"] { display: inline-block; font-weight: 400; text-align: center; white-space: nowrap; vertical-align: middle; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; border: 1px solid transparent; line-height: 1.5; border-radius: 0.25rem; -webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; -o-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; padding: 0.5rem 1.25rem; color: #fff; background-color: #007bff; border-color: #007bff; } 
 
input[type="button"]:active, input[type="button"]:hover, input[type="reset"]:active, input[type="reset"]:hover, input[type="submit"]:active, input[type="submit"]:hover { color: #fff; background-color: #0062cc; border-color: #005cbf; cursor: pointer; } 
 
input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="number"], input[type="tel"], input[type="range"], input[type="date"], input[type="month"], input[type="week"], input[type="time"], input[type="datetime"], input[type="datetime-local"], input[type="color"], textarea { display: block; width: 100%; padding: 0.375rem 0.75rem; font-size: 1rem; line-height: 1.5; color: #495057; background-color: #fff; background-clip: padding-box; border: 1px solid #ced4da; border-radius: 0.25rem; -webkit-transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; -o-transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; } 
 
input[type="text"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="number"]:focus, input[type="tel"]:focus, input[type="range"]:focus, input[type="date"]:focus, input[type="month"]:focus, input[type="week"]:focus, input[type="time"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="color"]:focus, textarea:focus { color: #495057; background-color: #fff; border-color: #80bdff; outline: 0; -webkit-box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); } 
 
input[type="text"]:-webkit-input-placeholder, input[type="text"]:-moz-placeholder, input[type="text"]:-ms-input-placeholder, input[type="email"]:-webkit-input-placeholder, input[type="email"]:-moz-placeholder, input[type="email"]:-ms-input-placeholder, input[type="url"]:-webkit-input-placeholder, input[type="url"]:-moz-placeholder, input[type="url"]:-ms-input-placeholder, input[type="password"]:-webkit-input-placeholder, input[type="password"]:-moz-placeholder, input[type="password"]:-ms-input-placeholder, input[type="search"]:-webkit-input-placeholder, input[type="search"]:-moz-placeholder, input[type="search"]:-ms-input-placeholder, input[type="number"]:-webkit-input-placeholder, input[type="number"]:-moz-placeholder, input[type="number"]:-ms-input-placeholder, input[type="tel"]:-webkit-input-placeholder, input[type="tel"]:-moz-placeholder, input[type="tel"]:-ms-input-placeholder, input[type="range"]:-webkit-input-placeholder, input[type="range"]:-moz-placeholder, input[type="range"]:-ms-input-placeholder, input[type="date"]:-webkit-input-placeholder, input[type="date"]:-moz-placeholder, input[type="date"]:-ms-input-placeholder, input[type="month"]:-webkit-input-placeholder, input[type="month"]:-moz-placeholder, input[type="month"]:-ms-input-placeholder, input[type="week"]:-webkit-input-placeholder, input[type="week"]:-moz-placeholder, input[type="week"]:-ms-input-placeholder, input[type="time"]:-webkit-input-placeholder, input[type="time"]:-moz-placeholder, input[type="time"]:-ms-input-placeholder, input[type="datetime"]:-webkit-input-placeholder, input[type="datetime"]:-moz-placeholder, input[type="datetime"]:-ms-input-placeholder, input[type="datetime-local"]:-webkit-input-placeholder, input[type="datetime-local"]:-moz-placeholder, input[type="datetime-local"]:-ms-input-placeholder, input[type="color"]:-webkit-input-placeholder, input[type="color"]:-moz-placeholder, input[type="color"]:-ms-input-placeholder, textarea:-webkit-input-placeholder, textarea:-moz-placeholder, textarea:-ms-input-placeholder { color: #6c757d; opacity: 1; } 
 
select { height: calc(2.25rem + 2px); display: block; width: 100%; padding: .375rem .75rem; font-size: 1rem; line-height: 1.5; color: #495057; background-color: #fff; background-clip: padding-box; border: 1px solid #ced4da; border-radius: .25rem; -webkit-transition: border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out; transition: border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out; -o-transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out; transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out; transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out,-webkit-box-shadow .15s ease-in-out; } 
 
blockquote { font-style: italic; font-size: 1.15rem; border-left: 3px solid rgba(33, 37, 41, 0.25); padding: 0.5rem 1.75rem; background: rgba(33, 37, 41, 0.05); } 
 
blockquote p { font-size: 1.15rem; } 
 
blockquote p:last-child { margin-bottom: 0; } 
 
.navbar-dark .navbar-nav .dropdown-menu a { display: block; width: 100%; padding: .25rem 1.5rem; clear: both; font-weight: 400; color: #212529; text-align: inherit; white-space: nowrap; background-color: transparent; border: 0; } 
 
.site-footer { padding-top: 3rem; padding-bottom: 3rem; } 
 
.comment-navigation .nav-next, .posts-navigation .nav-next, .post-navigation .nav-next { float: right; text-align: right; width: 50%; } 
 
.comment-navigation .nav-previous, .posts-navigation .nav-previous, .post-navigation .nav-previous { float: left; text-align: left; width: 50%; } 
 
.post-thumbnail { margin-top: 1.5em; display: inline-block; } 
 
.card-title.entry-title { margin-bottom: .25rem; } 
 
.entry-meta { font-size: .9rem; } 
 
.entry-footer { font-size: .9rem; margin-top: 1rem; } 
 
.comments-link { float: right; margin: 4px 0px 4px 10px; font-size: 90%; padding-top: 0.2em; } 
 
.cat-links .badge, .tags-links .badge { font-size: 90%; font-weight: normal; border: 1px solid rgba(0, 0, 0, 0.125); margin: 4px 10px 4px 0; padding: 0.4em .9em; } 
 
.cat-links a, .tags-links a { color: #6c757d; } 
 
.cat-links a:hover, .tags-links a:hover { text-decoration: none; color: #212529; } 
 
.entry-meta a, .comments-link a, .edit-link a { color: #6c757d; } 
 
.entry-meta a:hover, .comments-link a:hover, .edit-link a:hover { text-decoration: none; color: #007bff; } 
 
.entry-title a:hover { color: #007bff !important; } 
 
.content-area.wp-bp-404 .card-body { padding: 2.5rem 4rem; } 
 
.sidebar-1-area .widget, .footer-widgets .widget { margin-bottom: 0; padding: 2rem; } 
 
.sidebar-1-area .widget ul, .footer-widgets .widget ul { padding-left: 20px; color: #6c757d; margin-bottom: 0; } 
 
.sidebar-1-area .widget ul li, .footer-widgets .widget ul li { padding-top: 3px; padding-bottom: 3px; list-style: square; } 
 
.sidebar-1-area .widget ul li:last-child, .footer-widgets .widget ul li:last-child { padding-bottom: 0; margin-bottom: 0; } 
 
.sidebar-1-area .widget ul li a, .footer-widgets .widget ul li a { color: #6c757d; } 
 
.sidebar-1-area .widget ul li a:hover, .footer-widgets .widget ul li a:hover { color: #212529; text-decoration: none; } 
 
.footer-widgets .widget { padding: 0.5rem; } 
 
#wp-calendar #next { text-align: right; } 
 
#wp-calendar #prev a, #wp-calendar #next a { color: #6c757d; } 
 
#wp-calendar #prev a:hover, #wp-calendar #next a:hover { color: #212529; text-decoration: none; } 
 
#calendar_wrap table th, #calendar_wrap table td { padding: .25rem; } 
 
.hentry.card .card-body { padding: 1.5rem; } 
 
select { height: calc(2.25rem + 2px); display: block; width: 100%; padding: .375rem .75rem; font-size: 1rem; line-height: 1.5; color: #495057; background-color: #fff; background-clip: padding-box; border: 1px solid #ced4da; border-radius: .25rem; -webkit-transition: border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out; transition: border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out; -o-transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out; transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out; transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out,-webkit-box-shadow .15s ease-in-out; } 
 
.entry-title a:hover { text-decoration: none; } 
 
.mt-3r { margin-top: 3rem; } 
 
.wp-bs-4-jumbotron { margin-bottom: 0; } 
 
.wp-bs-4-jumbotron .jumbotron-heading { font-weight: 600; } 
 
.wp-bs-4-jumbotron .container { max-width: 40rem; } 
 
.comments-area { clear: both; -ms-word-wrap: break-word; word-wrap: break-word; overflow-wrap: break-word; word-break: break-word; } 
 
.comments-area .media-body { overflow: auto; } 
 
.comments-area .comment-list { list-style: none; padding-left: 0; } 
 
.comments-area .comment-list > li { border-bottom: 1px solid #dee2e6 !important; padding: 2.5rem 4rem; } 
 
.comments-area .comment-list ul.children { list-style: none; padding-left: 2rem; } 
 
.comments-area .comment-list ul.children li { padding: 2.5rem 0 0; } 
 
.comments-area .comment-list .comment-respond { padding: 2.5rem 4rem; } 
 
.comments-area .comments-title { padding: 2.5rem 4rem; border-bottom: 1px solid #dee2e6 !important; } 
 
.comments-area .comment-navigation { padding: 1rem 4rem 0; border-bottom: 1px solid #dee2e6 !important; } 
 
.comments-area .wb-comment-form { padding: 2.5rem 4rem; } 
 
.comments-area .wb-cancel-reply { margin-left: 2rem; } 
 
.comments-area .logged-in-as { padding-left: 15px; font-size: .9rem; } 
 
.comments-area .logged-in-as a { color: #6c757d; } 
 
.comments-area .logged-in-as a:hover { color: #212529; text-decoration: none; } 
 
.comments-area .wb-comment-notes { font-size: .9rem; } 
 
.comments-area .no-comments { padding: 1rem 4rem; } 
 
.comments-area small { font-size: .9rem; } 
 
.comments-area p { -ms-word-wrap: break-word; word-wrap: break-word; overflow-wrap: break-word; word-break: break-word; } 
 
.comments-area .comment-reply-link, .comments-area .comment-edit-link { margin-right: 1rem; color: #6c757d; } 
 
.comments-area .comment-reply-link:hover, .comments-area .comment-edit-link:hover { color: #212529; text-decoration: none; } 
 
.comments-area .comment-author a:hover { text-decoration: none; color: #212529; } 
 
.wp-bp-sticky { position: absolute; top: 0; right: 1rem; } 
 
.single .post-navigation .nav-links a { color: #6c757d; margin-bottom: 2rem; display: inline-block; } 
 
.single .post-navigation .nav-links a:hover { color: #212529; text-decoration: none; } 
 
.navbar { padding: 1rem; } 
 
#wp-bp-posts-slider { border: 1px solid rgba(0, 0, 0, 0.125); } 
 
#wp-bp-posts-slider .carousel-item img { width: auto; height: 400px; -o-object-fit: cover; object-fit: cover; } 
 
#wp-bp-posts-slider .carousel-caption { background: rgba(0, 0, 0, 0.4); width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0; padding: 2rem 4rem; } 
 
#wp-bp-posts-slider .carousel-control-prev, #wp-bp-posts-slider .carousel-control-next { width: 10%; } 
 
.custom-logo-link { margin-right: 1rem; } 
 
.site-title a, .navbar-dark .navbar-brand, .site-description { color: #fff; margin-bottom: 0; } 
 
.navbar-brand { font-size: 1.5rem; } 
 
.navbar-dark .navbar-nav .nav-link { color: #fff; opacity: 0.5; } 
 
.navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .nav-link:focus { color: #fff; opacity: 0.75; } 
 
.navbar-dark .navbar-nav .show > .nav-link, .navbar-dark .navbar-nav .active > .nav-link, .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .nav-link.active { color: #fff; opacity: 1; } 
 
.navbar-dark .navbar-brand:hover, .navbar-dark .navbar-brand:focus { color: #fff; } 
 
.navbar-dark .navbar-nav .dropdown-menu .active > .nav-link { color: #212529; } 
 
.navbar-dark .navbar-nav .dropdown-menu .nav-link:hover, .navbar-dark .navbar-nav .dropdown-menu .nav-link:focus { color: #212529; } 
 
.page-template-full-width .site-footer.mt-4, .wb-bp-front-page .site-footer.mt-4 { margin-top: 0 !important; } 
 
.wb-hide-mobile-sidebar .wp-bp-sidebar-width { display: none; } 
 
.navbar-toggler { background-color: #343a40; } 
 
.site-header { border-bottom: 1px solid rgba(0, 0, 0, 0.125); } 
 
body.custom-background .wp-bp-main-content .col-md-8 { background: #f8f9fa; padding: 2rem; border: 1px solid rgba(0, 0, 0, 0.125); } 
 
.site-footer a:hover { text-decoration: none; } 
 
.admin-bar .site-header.sticky-top { top: 32px; } 
 
.wb-bp-front-page .site-header { border-bottom: 0; } 
 
.wb-bp-front-page .wp-bs-4-jumbotron { padding: 0; background-size: cover; background-position: center; background-color: #343a40; border-radius: 0; } 
 
.wb-bp-front-page .wp-bs-4-jumbotron .wp-bp-jumbo-overlay { padding: 10rem 2rem; /* background: rgba(#212529, 0.7); */ } 
 
.wb-bp-front-page .wp-bs-4-jumbotron .wp-bp-jumbo-overlay .lead { opacity: .75; } 
 
.wb-bp-front-page .wp-bs-4-jumbotron .wp-bp-jumbo-overlay .jumbotron-heading { font-weight: 600; font-size: 3rem; margin-bottom: 1rem; } 
 
.wb-bp-front-page .wp-bp-services-section { padding: 4rem 0; } 
 
.wb-bp-front-page .wp-bp-main-content { padding: 4rem 0; } 
 
.wb-bp-front-page .wp-bp-main-content p { font-size: 1.25rem; font-weight: 300; } 
 
.wb-bp-front-page .wp-bp-main-content blockquote { font-size: 1.35rem; } 
 
.wb-bp-front-page .wp-bp-main-content blockquote p { font-size: 1.35rem; } 
 
.wb-bp-front-page .wp-bp-main-content .post-thumbnail { margin-bottom: 1rem; margin-top: 0.5rem; } 
 
.wb-bp-front-page .wp-bp-feat-card-img { -o-object-fit: cover; object-fit: cover; height: 200px; width: 100%; } 
 
.wp-caption .wp-caption-text { font-size: 0.95rem; } 
 
/*-------------------------------------------------------------- 
# Media Queries 
--------------------------------------------------------------*/ 
@media (min-width: 768px) { .hentry.card .card-body { padding: 2.5rem 4rem; } 
  .wb-hide-mobile-sidebar .wp-bp-sidebar-width { display: block; } }
<?php if ( get_theme_mod( 'blog_display_cover_section', 1 ) ) : ?> 
	<?php if( get_theme_mod( 'blog_cover_title' ) || get_theme_mod( 'blog_cover_lead' ) || get_theme_mod( 'blog_cover_btn_text' ) ) : ?> 
		<section class="jumbotron bg-white text-center wp-bs-4-jumbotron border-bottom"> 
			<div class="container"> 
 
				<h1 class="jumbotron-heading"><?php echo wp_kses_post( get_theme_mod( 'blog_cover_title' ) ); ?></h1> 
				<p class="lead text-muted"><?php echo wp_kses_post( get_theme_mod( 'blog_cover_lead' ) ); ?></p> 
				<?php if( get_theme_mod( 'blog_cover_btn_text' ) ) : ?><a href="<?php echo esc_url( get_theme_mod( 'blog_cover_btn_link' ) ); ?>" class="btn btn-primary"><?php echo esc_html( get_theme_mod( 'blog_cover_btn_text' ) ); ?></a><?php endif; ?> 
			</div> 
			<!-- /.container --> 
		</section> 
		<!-- /.jumbotron text-center --> 
	<?php endif; ?> 
<?php endif; ?> 
	<section class="wp-bp-main-content"> 
	<div class="container"> 
            <div class="row justify-content-center"> 
                <div class="col-md-4"> 
				<div id="primary" class="content-area"> 
					<main id="main"> 
                  
					<?php 
					if ( have_posts() ) : 
 
						if ( is_home() && ! is_front_page() ) : ?> 
							<header> 
								<h1 class="page-title screen-reader-text"><?php single_post_title(); ?></h1> 
							</header> 
 
						<?php 
						endif; 
 
						if( get_theme_mod( 'blog_display_posts_slider', '1' ) && is_home() && !is_paged() ) { 
							get_template_part( 'template-parts/posts-slider' ); 
						} 
						/* Start the Loop */ 
						while ( have_posts() ) : the_post(); 
 
							// Include the Post-Format-specific template for the content. 
							get_template_part( 'template-parts/content', get_post_format() ); 
						endwhile; 
 
						the_posts_navigation( array( 
							'next_text' => esc_html__( 'Newer Posts', 'wp-bootstrap-4' ), 
							'prev_text' => esc_html__( 'Older Posts', 'wp-bootstrap-4' ), 
						) ); 
 
					else : 
 
						get_template_part( 'template-parts/content', 'none' ); 
 
					endif; ?> 
                   
					</main><!-- #main --> 
				</div><!-- #primary --> 
			</div> 
			<!-- /.col-md-8 --> 
		</div> 
		<!-- /.row --> 
	</div> 
	<!-- /.container --> 
	</section> 
<?php

READ ALSO
Using @font-face with webpack and vue.js

Using @font-face with webpack and vue.js

Having some trouble understanding webpack, and getting some simple stuff working

138
Wordpress menu on iPhone 6s is wrong for RTL language

Wordpress menu on iPhone 6s is wrong for RTL language

Here is my WordPress website that I am working on:

76
how to specify grid-template with jss

how to specify grid-template with jss

Take a look at this example from css-tricks:

53
Javascript: Why do my Variables dont work, called from an external script? [on hold]

Javascript: Why do my Variables dont work, called from an external script? [on hold]

I've tried to put my Script (Some Modal Boxes and Text with getElementsById and CSS in an other external CSS File) into an external script File but i cannot call the functions correct, when they are called from an external Script FileAlso when i try to change...

76