Adventure - Tour and Travel Agency Template

Summary

Alerts
Buttons
Card
Social Icons
Form
Grid System
Accordions

Alerts

Holy guacamole! You should check in on some of those fields below.


<div class="alert alert-primary alert-dismissible fade show" role="alert">
    <strong>Holy guacamole!</strong> You should check in on some of those fields below.
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
    </button>
</div>
<div class="alert alert-secondary alert-dismissible fade show" role="alert">
    <strong>Holy guacamole!</strong> You should check in on some of those fields below.
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
    </button>
</div>
<div class="alert alert-success alert-dismissible fade show" role="alert">
    <strong>Holy guacamole!</strong> You should check in on some of those fields below.
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
    </button>
</div>
<div class="alert alert-danger alert-dismissible fade show" role="alert">
    <strong>Holy guacamole!</strong> You should check in on some of those fields below.
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
    </button>
</div>
<div class="alert alert-warning alert-dismissible fade show" role="alert">
    <strong>Holy guacamole!</strong> You should check in on some of those fields below.
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
    </button>
</div>
<div class="alert alert-info alert-dismissible fade show" role="alert">
    <strong>Holy guacamole!</strong> You should check in on some of those fields below.
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
    </button>
</div>
<div class="alert alert-light alert-dismissible fade show" role="alert">
    <strong>Holy guacamole!</strong> You should check in on some of those fields below.
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
    </button>
</div>
<div class="alert alert-dark alert-dismissible fade show" role="alert">
    <strong>Holy guacamole!</strong> You should check in on some of those fields below.
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
    </button>
</div>

Buttons

Button White Button

Copy

copy


<a class="butn white" href="#"><span class="alt-font">Button White</span></a>
<a class="butn" href="#"><span class="alt-font">Button</span></a>

Card

Bali

Indonesia

549$

Lorem ipsum dolor sit amet, elit consectetur adipiscing elit. Nunc ut efficitur ante. Donec dapibu.

Details

6 Aug 2019

By Admin WordPress

Master These Awesome New Skills in May 2019

Copy

copy


<div class="row">
    <div class="col-md-6">
        <div class="card package">
            <img src="img/content/package-1.jpg" class="card-img-top" alt="" />
            <div class="card-body padding-30px-all">
                <div class="margin-20px-bottom border-bottom d-flex padding-15px-bottom justify-content-between align-items-center">
                    <div>
                        <h5 class="no-margin-bottom font-size22">Bali</h5>
                        <span class="letter-spacing-2"><span class="ti-location-pin"></span> Indonesia</span>
                    </div>
                    <div>
                        <span class="font-size30 text-dark">549$</span>
                    </div>
                </div>
                <p class="margin-30px-bottom">Lorem ipsum dolor sit amet, elit consectetur adipiscing elit. Nunc ut efficitur ante. Donec dapibu.</p>
                <a href="tour-detail.html" class="butn">Details</a>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="blog-block1 card border-0">
            <div class="img">
                <a href="#"><span>6 Aug</span> 2019</a>
                <img src="img/blog/blog-4.jpg" class="card-img-top" alt="">
            </div>
            <div class="bg-light-gray padding-40px-tb padding-30px-lr card-body">
                <div class="margin-30px-bottom font-size13">
                    <a href="#" class="margin-15px-right"><i class="ti-user margin-5px-right"></i>By Admin</a>
                    <a href="#"><i class="ti-tag margin-5px-right"></i>WordPress</a>
                </div>

                <h5 class="font-size20"><a href="#" class="text-extra-dark-gray">Master These Awesome New Skills in May 2019</a></h5>

                <a href="#" class="text-theme-color">Read More</a>
            </div>
        </div>
    </div>
</div>

Copy

copy


<ul class="social-icon-style no-margin">
    <li>
        <a href="javascript:void(0)"><i class="fab fa-facebook-f"></i></a>
    </li>
    <li>
        <a href="javascript:void(0)"><i class="fab fa-twitter"></i></a>
    </li>
    <li>
        <a href="javascript:void(0)"><i class="fab fa-instagram"></i></a>
    </li>
    <li>
        <a href="javascript:void(0)"><i class="fab fa-linkedin-in"></i></a>
    </li>
</ul>

Forms

Copy

copy


<form>
    <div class="row">
        <div class="form-group col-md-6 margin-30px-bottom">
            <input type="text" class="form-control no-margin-bottom padding-15px-tb" name="exampleInputName" id="exampleInputName" placeholder="Your Name">
        </div>
        <div class="form-group col-md-6 margin-30px-bottom">
            <input type="text" class="form-control no-margin-bottom padding-15px-tb" name="exampleInputName" id="exampleInputName" placeholder="Email">
        </div>
        <div class="form-group col-md-12 margin-30px-bottom">
            <input type="text" class="form-control no-margin-bottom padding-15px-tb" name="exampleInputName" id="exampleInputName" placeholder="Subject Title">
        </div>
        <div class="form-group col-md-12 margin-20px-bottom">
            <textarea class="form-control" id="exampleFormControlTextarea1" rows="7" placeholder="Message"></textarea>
        </div>
        <div class="col-md-12">
            <button type="submit" class="butn"><span>submit message</span></button>
        </div>
    </div>
</form>

Grid System

.col-md-1

Copy

copy


<div class="row">
    <div class="col-md-1 bg-light-gray border margin-15px-bottom padding-10px-tb text-center">.col-md-1
    </div>
    <div class="col-md-1 bg-light-gray border margin-15px-bottom padding-10px-tb text-center">.col-md-1
    </div>
    <div class="col-md-1 bg-light-gray border margin-15px-bottom padding-10px-tb text-center">.col-md-1
    </div>
    <div class="col-md-1 bg-light-gray border margin-15px-bottom padding-10px-tb text-center">.col-md-1
    </div>
    <div class="col-md-1 bg-light-gray border margin-15px-bottom padding-10px-tb text-center">.col-md-1
    </div>
    <div class="col-md-1 bg-light-gray border margin-15px-bottom padding-10px-tb text-center">.col-md-1
    </div>
    <div class="col-md-1 bg-light-gray border margin-15px-bottom padding-10px-tb text-center">.col-md-1
    </div>
    <div class="col-md-1 bg-light-gray border margin-15px-bottom padding-10px-tb text-center">.col-md-1
    </div>
    <div class="col-md-1 bg-light-gray border margin-15px-bottom padding-10px-tb text-center">.col-md-1
    </div>
    <div class="col-md-1 bg-light-gray border margin-15px-bottom padding-10px-tb text-center">.col-md-1
    </div>
    <div class="col-md-1 bg-light-gray border margin-15px-bottom padding-10px-tb text-center">.col-md-1
    </div>
    <div class="col-md-1 bg-light-gray border margin-15px-bottom padding-10px-tb text-center">.col-md-1
    </div>
</div>

.col-md-2

Copy

copy


<div class="row">
    <div class="col-md-2 bg-light-gray border margin-15px-bottom padding-10px-tb text-center">.col-md-2
    </div>
    <div class="col-md-2 bg-light-gray border margin-15px-bottom padding-10px-tb text-center">.col-md-2
    </div>
    <div class="col-md-2 bg-light-gray border margin-15px-bottom padding-10px-tb text-center">.col-md-2
    </div>
    <div class="col-md-2 bg-light-gray border margin-15px-bottom padding-10px-tb text-center">.col-md-2
    </div>
    <div class="col-md-2 bg-light-gray border margin-15px-bottom padding-10px-tb text-center">.col-md-2
    </div>
    <div class="col-md-2 bg-light-gray border margin-15px-bottom padding-10px-tb text-center">.col-md-2
    </div>
</div>

.col-md-3

Copy

copy


<div class="row">
    <div class="col-md-3 bg-light-gray border margin-15px-bottom padding-10px-tb text-center">.col-md-3
    </div>
    <div class="col-md-3 bg-light-gray border margin-15px-bottom padding-10px-tb text-center">.col-md-3
    </div>
    <div class="col-md-3 bg-light-gray border margin-15px-bottom padding-10px-tb text-center">.col-md-3
    </div>
    <div class="col-md-3 bg-light-gray border margin-15px-bottom padding-10px-tb text-center">.col-md-3
    </div>
</div>

.col-md-4

Copy

copy


<div class="row">
    <div class="col-md-4 bg-light-gray border margin-15px-bottom padding-10px-tb text-center">.col-md-4
    </div>
    <div class="col-md-4 bg-light-gray border margin-15px-bottom padding-10px-tb text-center">.col-md-4
    </div>
    <div class="col-md-4 bg-light-gray border margin-15px-bottom padding-10px-tb text-center">.col-md-4
    </div>
</div>

.col-md-5

.col-md-2

Copy

copy


<div class="row">
    <div class="col-md-5 bg-light-gray border margin-15px-bottom padding-10px-tb text-center">.col-md-5
    </div>
    <div class="col-md-5 bg-light-gray border margin-15px-bottom padding-10px-tb text-center">.col-md-5
    </div>
    <div class="col-md-2 bg-light-gray border margin-15px-bottom padding-10px-tb text-center">.col-md-2
    </div>
</div>

.col-md-6

Copy

copy


<div class="row">
    <div class="col-md-6 bg-light-gray border margin-15px-bottom padding-10px-tb text-center">.col-md-6
    </div>
    <div class="col-md-6 bg-light-gray border margin-15px-bottom padding-10px-tb text-center">.col-md-6
    </div>
</div>

.col-md-1

.col-md-11

Copy

copy


<div class="row">
    <div class="col-md-1 bg-light-gray border margin-15px-bottom padding-10px-tb text-center">.col-md-1
    </div>
    <div class="col-md-11 bg-light-gray border margin-15px-bottom padding-10px-tb text-center">.col-md-11
    </div>
</div>

.col-md-2

.col-md-10

Copy

copy


<div class="row">
    <div class="col-md-2 bg-light-gray border margin-15px-bottom padding-10px-tb text-center">.col-md-2
    </div>
    <div class="col-md-10 bg-light-gray border margin-15px-bottom padding-10px-tb text-center">.col-md-10
    </div>
</div>

.col-md-3

.col-md-9

Copy

copy


<div class="row">
    <div class="col-md-3 bg-light-gray border margin-15px-bottom padding-10px-tb text-center">.col-md-3
    </div>
    <div class="col-md-9 bg-light-gray border margin-15px-bottom padding-10px-tb text-center">.col-md-9
    </div>
</div>

.col-md-4

.col-md-8

Copy

copy


<div class="row">
    <div class="col-md-4 bg-light-gray border margin-15px-bottom padding-10px-tb text-center">.col-md-4
    </div>
    <div class="col-md-8 bg-light-gray border margin-15px-bottom padding-10px-tb text-center">.col-md-8
    </div>
</div>

.col-md-5

.col-md-7

Copy

copy


<div class="row">
    <div class="col-md-5 bg-light-gray border margin-15px-bottom padding-10px-tb text-center">.col-md-5
    </div>
    <div class="col-md-7 bg-light-gray border margin-15px-bottom padding-10px-tb text-center">.col-md-7
    </div>
</div>

Accordions

When an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution.

Copy

copy


<div class="accordion" id="accordionOne">
    <div class="card">
        <div class="card-header" id="headingOne">
            <h2 class="mb-0">
                                    <button class="btn btn-link mb-0 text-dark" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                      How much does it price to do a personal trip?
                                    </button>
                                  </h2>
        </div>

        <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionOne">
            <div class="card-body line-height-lg">
                When an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
            </div>
        </div>
    </div>
    <div class="card">
        <div class="card-header" id="headingTwo">
            <h2 class="mb-0">
                                    <button class="btn btn-link mb-0 collapsed text-dark" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                                      Do I have to make a booking?
                                    </button>
                                  </h2>
        </div>
        <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionOne">
            <div class="card-body line-height-lg">
                It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution.
            </div>
        </div>
    </div>
</div>

Elements

Summary

Alerts

Buttons

Card

Bali

Master These Awesome New Skills in May 2019

Social Icons

Forms

Grid System

Accordions

How much does it price to do a personal trip?

Do I have to make a booking?