Bootstrap toggle style wont load

Im trying to implement bootstrap toggle on my site. It loads the toggle but not the style enter image description here

I am using a free theme i found online. Here is my header:

 <!-- Bootstrap Core CSS -->
    <link href="<?php echo base_url('/assets/css/bootstrap.css'); ?>" rel="stylesheet">
        <!-- Bootstrap Toggle -->
    <link href="<?php echo base_url('/assets/css/bootstrap-toggle.css'); ?>" rel="stylesheet">
        

    <!-- Animation library for notifications   -->
    <link href="<?php echo base_url('assets/css/animate.min.css'); ?>" rel="stylesheet"/>

    <!-- Custom CSS -->
    <link href="<?php echo base_url('assets/css/navigation.css'); ?>" rel="stylesheet">
        
        <link href="http://ift.tt/17yMsUd" rel="stylesheet" >
        <link href="http://ift.tt/2kxN7QX" rel="stylesheet">
        
        <!--     Fonts and icons     -->
    <link href="http://ift.tt/1CSZshK" rel="stylesheet">
    <link href='http://ift.tt/1gUD8an' rel='stylesheet' type='text/css'>
    <link href="<?php echo base_url('assets/css/pe-icon-7-stroke.css'); ?>" rel="stylesheet" />

My footer:

<!-- jQuery -->
    <script src="<?php echo base_url('js/jquery.js'); ?>"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="<?php echo base_url('js/bootstrap.min.js'); ?>"></script>

    <!-- Menu Toggle Script -->
    <script>
    $("#menu-toggle").click(function(e) {
        e.preventDefault();
        $("#wrapper").toggleClass("toggled");
    });
    </script>

        <!--   Core JS Files   -->
    <script src="<?php echo base_url('assets/js/jquery-3.1.1.min.js'); ?>" type="text/javascript"></script>

        <!--  Checkbox, Radio & Switch Plugins -->

        <script src="<?php echo base_url('assets/js/bootstrap-toggle.js'); ?>" type="text/javascript"></script>

        <!--  Charts Plugin -->
        <script src="<?php echo base_url('assets/js/chartist.min.js'); ?>"></script>

    <!--  Notifications Plugin    -->
    <script src="<?php echo base_url('assets/js/bootstrap-notify.js'); ?>"></script>


    <!-- Light Bootstrap Table Core javascript and methods for Demo purpose -->
        <script src="<?php echo base_url('assets/js/light-bootstrap-dashboard.js'); ?>"></script>

And my code to load the toggle switch:

<div class="content">
        
                <div class="card">
                <div class="header">
                                <h4 class="title">Edit Profile</h4>
                            </div>
                            <div class="content">
                                <form>
                                    <div class="row">
                                        <div class="col-md-5">
                                            <div class="form-group">
                                                <label>Type</label>
                                                                                                        <div class="test">
                                                                                                                <input type="checkbox" checked data-toggle="toggle" data-size="small" data-onstyle="success">
                                                                                                        </div>
                                                                                        </div>
                                        </div>
                                        <div class="col-md-3">
                                            <div class="form-group">
                                                <label>Username</label>
                                                <input type="text" class="form-control" placeholder="Username" value="michael23">
                                            </div>
                                        </div>........................

Can someone please support me with what I am doing wrong? Thanks