Having an issue with Bootstrap 3.3.7 Column large not behaving as expected, but strangely it works fine when I switch to Bootstrap 4. Can't pinpoint where the problem is originating from. Also, Bootstrap 4 changes the sizes of my text which is why I'm hesitant to upgrade.
All my Bootstrap links are correctly connected in my app without any problems. Need guidance on why Bootstrap 3.3.7 column large isn't functioning properly.
Here is a snippet of my code:
base.html
<html>
{% load static %}
<link rel="stylesheet" href=" {% static 'assets/css/main.css' %} " />
<link rel="stylesheet" href=" {% static 'assets/bootstrap/css/bootstrap.css' %} ">
<link rel="stylesheet" href=" {% static 'assets/bootstrap/css/bootstrap.min.css' %} ">
<link rel="stylesheet" type="text/css" href=" {% static 'assets/css/responsive.css' %} ">
<script src=" {% static 'assets/js/jquery.js' %} "></script>
<script src=" {% static 'assets/js/script.js' %} "></script>
{% block content %}
{% endblock content %}
<div id="footer" class="container-fluid">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
<h3> Get to know us </h3>
<div>
<label> Work with US </label>
<label> Work with US</label>
<label> Work with US </label>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
<h3> Learn with US </h3>
<div>
<label>Work with US </label>
<label> Work with US </label>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
<h3> Work with US </h3>
<div>
<label> work with us </label>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
<h3> Find us </h3>
<img class="img-responsve" src=" {% static 'assets/images/facebook.png' %} ">
<img class="img-responsve" src=" {% static 'assets/images/twitter.png' %} ">
<img class="img-responsve" src=" {% static 'assets/images/instagram.jpg' %} ">
</div>
</div>
<h4 class="text-center"> title Copyright 2017 all rights reserved </h4>
</div>
Below is another page that extends base.html:
{% extends 'index/base.html' %}
{% block content %}
<div class="wrapper">
<div id="top_navbar" class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand"> title</a>
</div>
<div style="margin: 10px;" class="navbar navbar-right">
<button class="btn btn-success"> 4648564864</button>
<button class="btn btn-info"> Signup </button>
<button class="btn btn-primary"> login </button>
</div>
</div>
</div>
<div class="container-fluid">
<div class="col-lg-4">
<div class="row">
<div class="col-lg-6">
<h3 id="test"> Testing </h3>
</div>
<div class="col-lg-6">
<h3 id="test"> Testing </h3>
</div>
</div>
</div>
</div>
</div>
{% endblock content %}
Concerned about Bootstrap 3.3.7 compatibility issues while other Django files function smoothly. Need assistance to resolve this confusion!