Tables – ACF Boot – Bootstrap Material Library with ACF integration.

bc2

Expand

Code Only (Without ACF Integration)

HTML

<!-- BC2 Content Block 2 ---------------------------------------->
<section class="wa_bc2">
	<div class="container">
		<div class="row mt-4">
			<div class="col-12">
				<div class="wa_bc2_wrap">
					<table class="wa_bc2_table table-responsive-md">
						<thead>
							<tr>
								<th scope="col" class="wa_bc2_lc">UNIT TYPE</th>
								<th scope="col"># OF UNITS / %</th>
								<th scope="col">SQUARE FOOTAGE</th>
								<th scope="col">RENT/MONTH</th>
								<th scope="col" class="wa_bc2_rc">RENT/SF</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<th scope="row">2-Bedroom/2-Bath</th>
								<td>135 (90%)</td>
								<td>1,250sf (avg.)</td>
								<td>$1,450</td>
								<td class="wa_bc2_rc">$1,16/sf</td>
							</tr>
							<tr>
								<th class="wa_bc2_last" scope="row">3-Bedroom/2-Bath</th>
								<td class="wa_bc2_last">15 (10%)</td>
								<td class="wa_bc2_last">1,400sf (avg.)</td>
								<td class="wa_bc2_last">$1,525</td>
								<td class="wa_bc2_last wa_bc2_rc">$1,09sf</td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
		</div>
	</div>
</section>
<!-- BC2 END ---------------------------------------->

CSS

/* BC2 Content Block 2 ---------------------------------------*/
.wa_bc2_table{
	background-color: #5F6268;
    color: #FFF;
	margin-bottom: 0;
	text-align: center;
}
.wa_bc2_wrap{
	background-color: #5f6268;
    padding: 5px;
}
.wa_bc2_table thead tr th{
	border: solid 1px #FFF;
    border-top: 0;
	font-size: 1.05em;
    font-weight: bold;
    color: #ffe176;
	padding: 5px;
}
.wa_bc2_table tbody tr th{
	border: solid 1px #FFF;
    border-left: 0;
	padding: 5px;
}
.wa_bc2_table tbody tr td{
	border: solid 1px #FFF;
    border-top: 0;
	padding: 5px;
}
.wa_bc2_table .wa_bc2_rc{
	border-right: 0;
}
.wa_bc2_table .wa_bc2_lc{
	border-left: 0;
}
.wa_bc2_table .wa_bc2_last{
	border-bottom: 0;
}
/* BC2 END ---------------------------------------*/

A0028

Demo

Expand

Code With ACF Integration

HTML

<!-- a0028 -------------------------------------->
<?php if (have_rows('a0028')) : ?>
    <div class="container">
        <div class="row">
            <div class="col-12 A0028-grid">
                <?php while (have_rows('a0028')) : the_row(); ?>
                    <div class="columns-table">
                        <ul class="price">
                            <li class="header" <?php if (get_sub_field('main')=="Yes") echo 'style="background-color:#04AA6D"'?> ><?php echo get_sub_field('header'); ?></li>
                            <li class="grey-color"><?php echo get_sub_field('price'); ?></li>
                            <?php while (have_rows('params')) : the_row(); ?>
                            <li><?php echo get_sub_field('param'); ?></li>
                            <?php endwhile; ?>
                            <li class="grey-color"><a href="<?php echo get_sub_field('button_url'); ?>" class="A0028-button-link"><?php echo get_sub_field('button_text'); ?></a></li>
                        </ul>
                    </div>
                <?php endwhile; ?>
            </div>
        </div>
    </div>
<?php endif; ?>
<!-- a0028 End ----------------------------------->

CSS

/*-- a0028 --------------------------------------*/
.columns-table {
    float: left;
    width: 100%;
    padding: 8px;
}

.price {
    list-style-type: none;
    border: 1px solid #eee;
    margin: 0;
    padding: 0;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

.price:hover {
    box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.2)
}

.price .header {
    background-color: #111;
    color: white;
    font-size: 25px;
}

.price li {
    border-bottom: 1px solid #eee;
    padding: 20px;
    text-align: center;
}

.price .grey-color {
    background-color: #eee;
    font-size: 20px;
}

.A0028-button-link {
    background-color: #04AA6D;
    border: none;
    color: white !important;
    padding: 10px 25px;
    text-align: center;
    text-decoration: none;
    font-size: 18px;
}

.A0028-grid{
	display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

@media only screen and (max-width: 1000px) {
.A0028-grid{
    grid-template-columns: 1fr 1fr;
}
}

@media only screen and (max-width: 768px) {
.A0028-grid{
    grid-template-columns: 1fr;
}
}

@media only screen and (max-width: 600px) {
    .columns {
        width: 100%;
    }
}

/*-- a0028 END --------------------------------------*/

Code Only (Without ACF Integration)

HTML

<!-- a0028 -------------------------------------->
<div class="container">
    <div class="row">
        <div class="col-12 A0028-grid">

            <div class="columns-table">
                <ul class="price">
                    <li class="header">Basic</li>
                    <li class="grey-color">$ 9.99 / year</li>
                    <li>10GB Storage</li>
                    <li>10 Emails</li>
                    <li>10 Domains</li>
                    <li>1GB Bandwidth</li>
                    <li class="grey-color"><a href="#" class="A0028-button-link">Sign Up</a></li>
                </ul>
            </div>

            <div class="columns-table">
                <ul class="price">
                    <li class="header" style="background-color:#04AA6D">Pro</li>
                    <li class="grey-color">$ 24.99 / year</li>
                    <li>25GB Storage</li>
                    <li>25 Emails</li>
                    <li>25 Domains</li>
                    <li>2GB Bandwidth</li>
                    <li class="grey-color"><a href="#" class="A0028-button-link">Sign Up</a></li>
                </ul>
            </div>

            <div class="columns-table">
                <ul class="price">
                    <li class="header">Premium</li>
                    <li class="grey-color">$ 49.99 / year</li>
                    <li>50GB Storage</li>
                    <li>50 Emails</li>
                    <li>50 Domains</li>
                    <li>5GB Bandwidth</li>
                    <li class="grey-color"><a href="#" class="A0028-button-link">Sign Up</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>
<!-- a0028 End ----------------------------------->

CSS

/*-- a0028 --------------------------------------*/
.columns-table {
    float: left;
    width: 100%;
    padding: 8px;
}

.price {
    list-style-type: none;
    border: 1px solid #eee;
    margin: 0;
    padding: 0;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

.price:hover {
    box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.2)
}

.price .header {
    background-color: #111;
    color: white;
    font-size: 25px;
}

.price li {
    border-bottom: 1px solid #eee;
    padding: 20px;
    text-align: center;
}

.price .grey-color {
    background-color: #eee;
    font-size: 20px;
}

.A0028-button-link {
    background-color: #04AA6D;
    border: none;
    color: white !important;
    padding: 10px 25px;
    text-align: center;
    text-decoration: none;
    font-size: 18px;
}

.A0028-grid{
	display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

@media only screen and (max-width: 1000px) {
.A0028-grid{
    grid-template-columns: 1fr 1fr;
}
}

@media only screen and (max-width: 768px) {
.A0028-grid{
    grid-template-columns: 1fr;
}
}

@media only screen and (max-width: 600px) {
    .columns {
        width: 100%;
    }
}

/*-- a0028 END --------------------------------------*/

A0157

Expand

Code With ACF Integration

HTML

    <!-- a0157 ------------------------------------------>
<?php if ( have_rows( 'a0157' ) ) : ?>
    <?php while ( have_rows( 'a0157' ) ) : the_row();?>
<section id="a0157">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <h2><?php echo get_sub_field('header'); ?></h2>
                <div class="a0157-grd">
        <?php while ( have_rows( 'items' ) ) : the_row();?>
                    <div class="a0157-item">
                        <div class="a0157-blk"><?php echo get_sub_field('tiitle'); ?></div>
                        <div class="a0157-orange"><?php echo get_sub_field('price'); ?> <span class="a0157-orange-mnth"> / month</span></div>
                        <div class="a0157-description"><?php echo get_sub_field('description'); ?></div>
                        <a href="<?php echo get_sub_field('button_url'); ?>" class="a0157-btn" ><?php echo get_sub_field('button_text'); ?></a>
                    </div>
        <?php endwhile; ?>
                </div>

                <div class="a0157-cust-item">
                    <div class="a0157-blk"><?php echo get_sub_field('custom_title'); ?></div>
                    <div class="a0157-cust-description"><?php echo get_sub_field('custom_description'); ?></div>
                    <a href="tel:<?php echo get_sub_field('phone'); ?>" class="a0157-phone" ><?php echo get_sub_field('phone'); ?></a>
                </div>
            </div>
        </div>
    </div>
</section>
    <?php endwhile; ?>
<?php endif; ?>
    <!-- a0157 End -------------------------------------->

CSS

/* A0157 --------------------------------------------------------------*/
#a0157 {
    background: #F4F4F4;
    border-top: 2px solid #A7A8AC;
    border-bottom: 1px solid #A7A8AC;
    padding-top: 45px;
    padding-bottom: 50px;
}

#a0157 h2{
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 700;
    font-size: 48px;
    line-height: 65px;
    text-align: center;
    color: #2E2E2E;
}

.a0157-grd {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px , 1fr));
    grid-gap: 25px;
    margin-top: 30px;
    margin-bottom: 25px;
}

.a0157-item {
    background: #FFFFFF;
    box-shadow: 0px 0px 30px rgb(0 0 0 / 15%);
    border-radius: 5px;
    position: relative;
    padding-bottom: 70px;
}

.a0157-cust-item {
    background: #FFFFFF;
    box-shadow: 0px 0px 30px rgb(0 0 0 / 15%);
    border-radius: 5px;
    position: relative;
    padding-bottom: 20px;
}

.a0157-phone{
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 700;
    font-size: 48px;
    line-height: 65px;
    text-align: center;
    color: #CE8B3D !important;
    width: 100%;
    display: block;
    padding: 0px 20px;
}

.a0157-blk{
    background: #2E2E2E;
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 700;
    font-size: 32px;
    line-height: 44px;
    text-align: center;
    color: #FFFFFF;
    padding: 12px;
}

.a0157-orange {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 700;
    font-size: 48px;
    line-height: 65px;
    text-align: center;
    color: #FFFFFF;
    background: #CE8B3D;
}

.a0157-orange-mnth {
    font-size: 28px;
    line-height: 28px;
}

.a0157-description {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: normal;
    font-size: 20px;
    line-height: 150%;
    color: #2E2E2E;
    padding: 17px 20px;
}

.a0157-cust-description {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: normal;
    font-size: 20px;
    line-height: 150%;
    color: #2E2E2E;
    padding: 0px 20px;
    padding-top: 30px;
}

.a0157-description ul{
    padding-left: 20px;
}

.a0157-btn {
    background: #CE8B3D;
    border-radius: 5px;
    position: absolute;
    bottom: 30px;
    width: 90%;
    margin: 0px 5%;
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 27px;
    text-align: center;
    color: #FFFFFF !important;
    padding: 7px;
}

@media (max-width: 992px) {
    #a0157 h2 {
        font-size: 38px;
        line-height: 45px;
    }
    .a0157-orange {
        font-size: 38px;
        line-height: 65px;
    }

}

@media (max-width: 768px) {
    #a0157 h2 {
        font-size: 30px;
        line-height: 40px;
    }
    .a0157-orange {
        font-size: 35px;
        line-height: 65px;
    }

    #a0157 {
        padding-top: 25px;
        padding-bottom: 40px;
    }

    .a0157-phone {
        font-size: 38px;
        line-height: 55px;
    }

}
/* A0157 End ----------------------------------------------------------*/

A0158

Expand

To view please

Login

or

Join now!

A0196

Expand

To view please

Login

or

Join now!