How to center a pagination bar created with vue? - html

I found the following pagination implemented with vue. I would like to centre the pagination bar horizontally. I have tried different approaches (adding class="text-center" and style="text-align: center !important;" to both the nav and v-pagination tags) but none of them worked. Any ideas how I could fix that?
The code from the codepen:
<!doctype html>
<html lang="en">
<head>
<title>vue-plain-pagination</title>
<link href='https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css' rel="stylesheet">
</head>
<body>
<div id="app" class="container my-4">
<h1 class="mb-4">vue-plain-pagination</h1>
<p class="text-success">Current page: <strong>{{ currentPage }}</strong></p>
<nav class="mb-4">
<v-pagination
v-model="currentPage"
:page-count="totalPageCount"
:classes="bootstrapPaginationClasses"
:labels="customLabels"
></v-pagination>
</nav>
<nav class="mb-4">
<v-pagination
v-model="currentPage"
:page-count="totalPageCount"
:classes="bootstrapPaginationClasses"
></v-pagination>
</nav>
<nav class="mb-4">
<v-pagination
v-model="currentPage"
:page-count="totalPageCount"
:classes="bootstrapPaginationClasses"
:labels="{first: false, prev: false, next: false, last: false}"
></v-pagination>
</nav>
</div>
<script src='https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/vue#2.x/dist/vue.js'></script>
<script src='https://unpkg.com/vue-plain-pagination#0.2.1/dist/vue-plain-pagination.umd.min.js'></script>
<script>
new Vue({
components: {
vPagination: window['vue-plain-pagination']
},
data: {
currentPage: 5,
totalPageCount: 9,
bootstrapPaginationClasses: { // http://getbootstrap.com/docs/4.1/components/pagination/
ul: 'pagination',
li: 'page-item',
liActive: 'active',
liDisable: 'disabled',
button: 'page-link'
},
customLabels: {
first: false,
prev: 'Previous',
next: 'Next',
last: false
}
}
}).$mount('#app')
</script>
</body>
</html>


Using flexbox, add this style to your '.pagination' class:
.pagination {
display: flex;
justify-content: center;
}


<!doctype html>
<html lang="en">
<head>
<title>vue-plain-pagination</title>
<link href='https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css' rel="stylesheet">
</head>
<body>
<div id="app" class="container my-4">
<div class="row text-center">
<div class="col">
<h1 class="mb-4">vue-plain-pagination</h1>
<p class="text-success">Current page: <strong>{{ currentPage }}</strong></p>
<nav class="mb-4 d-flex justify-content-center">
<v-pagination
v-model="currentPage"
:page-count="totalPageCount"
:classes="bootstrapPaginationClasses"
:labels="customLabels"
></v-pagination>
</nav>
<nav class="mb-4 d-flex justify-content-center">
<v-pagination
v-model="currentPage"
:page-count="totalPageCount"
:classes="bootstrapPaginationClasses"
></v-pagination>
</nav>
<nav class="mb-4 d-flex justify-content-center">
<v-pagination
v-model="currentPage"
:page-count="totalPageCount"
:classes="bootstrapPaginationClasses"
:labels="{first: false, prev: false, next: false, last: false}"
></v-pagination>
</nav>
</div>
</div>
</div>
<script src='https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/vue#2.x/dist/vue.js'></script>
<script src='https://unpkg.com/vue-plain-pagination#0.2.1/dist/vue-plain-pagination.umd.min.js'></script>
<script>
new Vue({
components: {
vPagination: window['vue-plain-pagination']
},
data: {
currentPage: 5,
totalPageCount: 9,
bootstrapPaginationClasses: { // http://getbootstrap.com/docs/4.1/components/pagination/
ul: 'pagination',
li: 'page-item',
liActive: 'active',
liDisable: 'disabled',
button: 'page-link'
},
customLabels: {
first: false,
prev: 'Previous',
next: 'Next',
last: false
}
}
}).$mount('#app')
</script>
</body>
</html>
Wrap your main div within .container > .row > .col
Containers provide a means to center and horizontally pad your site’s
contents. Use .container for a responsive pixel width or
.container-fluid for width: 100% across all viewport and device
sizes.
Rows are wrappers for columns. Each column has horizontal padding
(called a gutter) for controlling the space between them. This padding is then counteracted on the rows with negative margins. This way, all the content in your columns is visually aligned down the left side.
In a grid layout, content must be placed within columns and only
columns may be immediate children of rows.
Bootstrap has also some builtin classes to make the div centered horizontally and vertically. I have used .d-flex .justify-content-center to the div that I wanted to be centered aligned. Also, I have used .text-center on row to center the texts.
hope it'll help
-Flex https://getbootstrap.com/docs/4.3/utilities/flex/

Related

I'm using AOS library to give animation but it is not working on some div

This is my html header
<link href="https://unpkg.com/aos#2.3.1/dist/aos.css" rel="stylesheet">
this is my html
<div class="row justify-content-center aos-animate" >
<div class="col-lg-6 text-center heading-section mb-5" data-aos="fade-up" >
<h2 class="text-black mb-5">PHOTO GALLERY</h2>
</div>
</div>
This is my JS
<script src="https://unpkg.com/aos#2.3.1/dist/aos.js"></script>
<script>
AOS.init({
duration:1000,
offset:5,
delay:10,
});
AOS.refresh();
</script>
I tried to give animation to a photo gallery with 10 images and it is not working can any one give me the solution.

I faced a similar issue.
Try triggering AOS.refresh() on scroll, see if that helps. This worked for me:
let scrollRef = 0;
$(window).on("resize scroll", function () {
// increase value up to 10, then refresh AOS
scrollRef <= 10 ? scrollRef++ : AOS.refresh();
});

How to compare two classes with jquery?

I want to compare two classes if they're equal to display the content. I have three btns with three different classes and three other divs with three similar classes to buttons. I want to check if Over the button is equal to over the div,then i want to show the element inside over the div, and hide the other elements,and when i click on the under the button i want to do the same, I have tried with Jquery to compare to first get the class name from the button and get the class name from the div and compare them to each other and then give the active class to the one that i want to show it but it seems that i have something wrong
var className = $(this).attr('class');
var tabContent = $('.tab-content').hasClass(className);
var classNameBtnsName = $(this).hasClass(className);
$('button').click(function () {
if (tabContent === classNameBtnsName) {
$('.tab-content').addClass("active-content");
} else {
$('.tab-content').removeClass("active-content");
}
})
.active-content h1{
display:block;
}
h1{
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="btns-container">
<button class="over">Over</button>
<button class="under">Under</button>
<button class="other">Other</button>
</div>
<div class="tab-content over active-content">
<h1 >Show Over elements</h1>
</div>
<div class="tab-content under">
<h1>Show Under elements</h1>
</div>
<div class="tab-content other">
<h1>Show Other Elements</h1>
</div>

I wouldn't use the class of the buttons to specify which content to toggle. It is better to use a data attribute for that to prevent future developments that add more classes to bug your functionality. Then you can use this data attribute for toggling by removing the active class from all and then adding the class to the element belonging to the clicked button.
$('button.togglebutton').on('click', (e) => {
$('.tab-content').removeClass('active-content');
$('.tab-content.' + $(e.currentTarget).data('active-content')).addClass('active-content');
});
.active-content h1 {
display: block;
}
h1 {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="btns-container">
<button data-active-content="over" class="togglebutton">Over</button>
<button data-active-content="under" class="togglebutton">Under</button>
<button data-active-content="other" class="togglebutton">Other</button>
</div>
<div class="tab-content over active-content">
<h1>Show Over elements</h1>
</div>
<div class="tab-content under">
<h1>Show Under elements</h1>
</div>
<div class="tab-content other">
<h1>Show Other Elements</h1>
</div>

Inside the click handler callback function, remove the active-content class from all .tab-content elements first, and then add it to the one that also has the button's class.
$('.btns-container button').on('click', function() {
$('.tab-content').removeClass('active-content');
$('.tab-content.' + this.className).addClass('active-content');
});
.active-content h1{
display:block;
}
h1{
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="btns-container">
<button class="over">Over</button>
<button class="under">Under</button>
<button class="other">Other</button>
</div>
<div class="tab-content over active-content">
<h1 >Show Over elements</h1>
</div>
<div class="tab-content under">
<h1>Show Under elements</h1>
</div>
<div class="tab-content other">
<h1>Show Other Elements</h1>
</div>

Assuming .tab-content is hidden by default, you can try something like this:
$('button').click(function() {
// Get class from clicked button
var btnClass = $(this).attr('class');
$('.tab-content').each(function() {
// If tab-content has same class as button, show this
if ($(this).hasClass(btnClass)) {
$(this).show();
} else {
$(this).hide();
}
});
});

Make second card in card-columns fill all remaining width

I am new to Bootstrap (and web development in general) and I am trying to achieve the following effect:
Part of my code is:
<div id="content" class="p-4">
<div class="container-fluid">
<div class="card-columns">
<div class="card">
<div class="card-body">
<h5 class="card-title">Dashboard</h5>
<h6 class="card-subtitle mb-2 text-muted">Check your app stats by country</h6>
<select id="country-select" class="form-control form-select form-select-lg mb-3" aria-label=".form-select-lg example">
<option selected>Select a country</option>
</select>
</div>
</div>
<div class="card">
<div class="card-body">
<h5 class="card-title">Chart</h5>
<h6 class="card-subtitle mb-2 text-muted">Check your app stats by country</h6>
<canvas id="myChart" width="400" height="400"></canvas>
<script>
<!-- CHART CODE AVAILABLE ON JSFIDDLE -->
</script>
</div>
</div>
</div>
</div>
</div>
My Bootstrap version is 4.6 and the full code is available on JSFiddle

Your problem was using class card-columns, which strictly divides your cards into three columns, the column-count: 3 rule.
Flex will be preferable for your task. Instead of class card-columns, I have specified flexibility classes. Here:
<div class="d-flex align-items-sm-baseline">
Also, for indentation, I used the gap rule, adding this selector to the css.
For the second div with class card, I added the flex-sm-grow-1 class to allow this div to take up all of the free space.
.container-fluid > .d-flex.align-items-sm-baseline {
gap: 20px;
}
#media (max-width: 767px) {
.container-fluid > .d-flex.align-items-sm-baseline {
flex-direction: column !important;
align-items: stretch !important;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<title>Android Rank Checker</title>
<!-- Bootstrap CSS CDN -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous" />
<!-- Our Custom CSS -->
<link rel="stylesheet" href="style.css" />
<!-- Font Awesome JS -->
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js" integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ" crossorigin="anonymous"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js" integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY" crossorigin="anonymous"></script>
<!-- chart.js CDN -->
<script src="https://cdn.jsdelivr.net/npm/chart.js#2.9.4/dist/Chart.min.js" integrity="sha256-t9UJPrESBeG2ojKTIcFLPGF7nHi2vEc7f5A2KpH/UBU=" crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar navbar-default bg-dark navbar-dark">
<div id="sidebarCollapse">
<i class="fas fa-bars"></i>
Android Rank Checker
</div>
</nav>
<div class="wrapper">
<!-- Page Content -->
<div id="content" class="p-4">
<div class="container-fluid">
<div class="d-flex align-items-sm-baseline">
<div class="card">
<div class="card-body">
<h5 class="card-title">Dashboard</h5>
<h6 class="card-subtitle mb-2 text-muted">Check your app stats by country</h6>
<select id="country-select" class="form-control form-select form-select-lg mb-3" aria-label=".form-select-lg example">
<option selected>Select a country</option>
</select>
</div>
</div>
<div class="card flex-sm-grow-1">
<div class="card-body">
<h5 class="card-title">Chart</h5>
<h6 class="card-subtitle mb-2 text-muted">Check your app stats by country</h6>
<canvas id="myChart" width="" height=""></canvas>
<script>
var ctx = document.getElementById("myChart").getContext("2d");
var myChart = new Chart(ctx, {
type: "bar",
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [
{
label: "# of Votes",
data: [12, 19, 3, 5, 2, 3],
backgroundColor: ["rgba(255, 99, 132, 0.2)", "rgba(54, 162, 235, 0.2)", "rgba(255, 206, 86, 0.2)", "rgba(75, 192, 192, 0.2)", "rgba(153, 102, 255, 0.2)", "rgba(255, 159, 64, 0.2)"],
borderColor: ["rgba(255, 99, 132, 1)", "rgba(54, 162, 235, 1)", "rgba(255, 206, 86, 1)", "rgba(75, 192, 192, 1)", "rgba(153, 102, 255, 1)", "rgba(255, 159, 64, 1)"],
borderWidth: 1,
},
],
},
options: {
scales: {
yAxes: [
{
ticks: {
beginAtZero: true,
},
},
],
},
},
});
</script>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- jQuery CDN - Slim version (=without AJAX) -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
<script src="sidebar.js"></script>
<script src="app.js"></script>
</body>
</html>

You should have 2 columns, you have 3.
#media (min-width: 576px)
.card-columns {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
-webkit-column-gap: 1.25rem;
-moz-column-gap: 1.25rem;
column-gap: 1.25rem;
orphans: 1;
widows: 1;
}

I would use Bootstraps grid system.
Solution: https://jsfiddle.net/b459x1uy/2/
<div class="row">
<div class="col-4">
// Dashboard card
</div>
<div class="col">
// Chart card
</div>
</div>
Wrap your cards with columns. In this example first column (.col-4) takes 12/4 of the width, second column (.col) takes all the available space on that row.
Using Bootstrap columns gives you also control about the responsive layout in one go. I would not write extra CSS to size your columns without considering Bootstraps grid system first.

Cant style Bootstrap and normal elements

I can not seem to style my website... for example the <pre> tags.
Nothing I do works. I am trying to style the whois results, I've tried wrapping it in a div and styling that, styling the pre tags only, styling everything. I just can't seem to get it working. I am hoping I am missing something stupid. You can see from the CSS I have tried numerous combinations (tried deleting them all just having pre ect)
Nav bar:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="javascript.js"></script>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title>CWCS Domain Checker Tool</title>
</head>
<body>
<!--- This Keeps the navbar from staying right near top -->
<div class="header">
</div>
<!---- Nav bar, Using bootstrap ----->
<nav class="navbar navbar">
<div class="container-fluid">
<div class="navbar-header">
<div class="nav-bar-logo">
<img src="images/cwcs-logo.png">
</div>
</div>
<div class="nav-list-container">
<ul class="nav navbar-nav">
<li>Domain Diagnostics</li>
<li><a id="sd" href="#">Server Diagnostics</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Second Line Tools
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a id="dc" href="#">Daily Checklist</a></li>
<li><a id="bt" href="#">Backup Tracker</a></li>
<li><a id="tl" href="#">Task List</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<!------- End of nav bar ---->
Main page -
<?php
## Includes nav bar
include('navbar.php');
include('phpfiles/domainclass.php');
if (isset($_GET['userInput']))
{
$domainName = $_GET['userInput'];
}
?>
<!---- The input form ---->
<form class="form">
<div class="domainquery">
<div class="input-group">
<input id="domainName" name="userInput" class="form-control input-md" type="text" placeholder="example.com" value="<?php if (isset($domainName)) echo $domainName ?>" autocomplete="off" autofocus>
<div class="input-group-btn">
<button type="submit" class="btn btn-primary btn-md">Query Domain</button>
</div>
</div>
</div>
</form>
<!---- End of input form --->
<!---- start of content --->
<div class ="container-fluid">
<!----- Check of the variable has been set before showing --->
<?php
##checks if the variable name $domainName is set, before loading everything below
if (isset($domainName)):
?>
<div class="container-fluid">
<div class="row">
<div class="col-lg-6 col-md-5 col-sm-12 col-xs-12">
<h3>DNS Records </h3>
<div class="dnscontain">
<script>
// Loads the return vaue of the call into the "dnscontain" div.
$(".dnscontain").load("ajaxhandler.php",
{ // ajax call to pass variable to ajax handler, which then decides what to do with it
d: "<?php echo $domainName ?>",
q: 'dns'
});
</script>
</div>
<h3>SSL Result</h3>
<h3>NMAP Result</h3>
<div class="nmapcontain">
<script>
// Loads the return vaue of the call into the "dnscontain" div.
$(".nmapcontain").load("ajaxhandler.php",
{ // ajax call to pass variable to ajax handler, which then decides what to do with it
d: "<?php echo $domainName ?>",
q: 'nmap'
});
</script>
</div>
<h3>PING Result</h3>
<div class="pingcontain">
<script>
// Loads the return vaue of the call into the "dnscontain" div.
$(".pingcontain").load("ajaxhandler.php",
{ // ajax call to pass variable to ajax handler, which then decides what to do with it
d: "<?php echo $domainName ?>",
q: 'ping'
});
</script>
</div>
<!--- Closing div tag for left column -->
</div>
<!--- starting right column -->
<div class="col-lg-6 col-md-5 col-sm-12 col-xs-12">
<h3>WHOIS Result</h3>
<div class="whoiscontain">
<script>
// Loads the return vaue of the call into the "whoiscontain" div.
$(".whoiscontain").load("ajaxhandler.php",
{ // ajax call to pass variable to ajax handler, which then decides what to do with it
d: "<?php echo $domainName ?>",
q: 'whois'
});
</script>
<!--Whoiscontain div end -->
</div>
<!--- right column div end -->
</div>
<!--- closing div tag for 1st row --->
</div>
</div>
<!---- ends the check on if the variable is set -->
<?php
###End the "IF" check
endif
?>
<!---- Closing div tag for container-fluid --->
</div>
</body>
</html>
Ajax return page --
<?php
include 'domainclass.php';
$result = domain::getWhois($domainName);
?>
<pre class="whois"> <?php echo $result ?> </pre>;
Style sheet
.header
{
margin:1%;
}
.domainquery
{
margin-bottom:3%;
padding:40px 50px;
}
.nav-bar-logo
{
margin-right:20px;
padding-right:20px;
}
.table
{
font-size:5px;
}
pre .whois
{
white-space:pre-wrap;
background-color:black;
color:white;
word-wrap: break-word;
}
.whoiscontain
{
white-space:pre-wrap;
background-color:black;
width:100%;
color:white;
word-wrap: break-word;
}
pre
{
white-space:pre-wrap;
background-color:black;
color:white;
word-wrap: break-word;
}
HTML output of page as requested (ignore style sheeting being above the bootstrap stylesheet, was trying something.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="javascript.js"></script>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title>CWCS Domain Checker Tool</title>
</head>
<body>
<!--- This Keeps the navbar from staying right near top -->
<div class="header">
</div>
<!---- Nav bar, Using bootstrap ----->
<nav class="navbar navbar">
<div class="container-fluid">
<div class="navbar-header">
<div class="nav-bar-logo">
<img src="images/cwcs-logo.png">
</div>
</div>
<div class="nav-list-container">
<ul class="nav navbar-nav">
<li>Domain Diagnostics</li>
<li><a id="sd" href="#">Server Diagnostics</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Second Line Tools
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a id="dc" href="#">Daily Checklist</a></li>
<li><a id="bt" href="#">Backup Tracker</a></li>
<li><a id="tl" href="#">Task List</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<!------- End of nav bar ---->
<!---- The input form ---->
<form class="form">
<div class="domainquery">
<div class="input-group">
<input id="domainName" name="userInput" class="form-control input-md" type="text" placeholder="example.com" value="lomcn.org" autocomplete="off" autofocus>
<div class="input-group-btn">
<button type="submit" class="btn btn-primary btn-md">Query Domain</button>
</div>
</div>
</div>
</form>
<!---- End of input form --->
<!---- start of content --->
<div class ="container-fluid">
<!----- Check of the variable has been set before showing --->
<div class="container-fluid">
<div class="row">
<div class="col-lg-6 col-md-5 col-sm-12 col-xs-12">
<h3>DNS Records </h3>
<div class="dnscontain">
<script>
// Loads the return vaue of the call into the "dnscontain" div.
$(".dnscontain").load("ajaxhandler.php",
{ // ajax call to pass variable to ajax handler, which then decides what to do with it
d: "lomcn.org",
q: 'dns'
});
</script>
</div>
<h3>SSL Result</h3>
<h3>NMAP Result</h3>
<div class="nmapcontain">
<script>
// Loads the return vaue of the call into the "dnscontain" div.
$(".nmapcontain").load("ajaxhandler.php",
{ // ajax call to pass variable to ajax handler, which then decides what to do with it
d: "lomcn.org",
q: 'nmap'
});
</script>
</div>
<h3>PING Result</h3>
<div class="pingcontain">
<script>
// Loads the return vaue of the call into the "dnscontain" div.
$(".pingcontain").load("ajaxhandler.php",
{ // ajax call to pass variable to ajax handler, which then decides what to do with it
d: "lomcn.org",
q: 'ping'
});
</script>
</div>
<h3>Tracert Result</h3>
<div class="tracecontain">
<script>
// Loads the return vaue of the call into the "dnscontain" div.
$(".tracecontain").load("ajaxhandler.php",
{ // ajax call to pass variable to ajax handler, which then decides what to do with it
d: "lomcn.org",
q: 'trace'
});
</script>
</div>
<!--- Closing div tag for left column -->
</div>
<!--- starting right column -->
<div class="col-lg-6 col-md-5 col-sm-12 col-xs-12">
<h3>WHOIS Result</h3>
<div class="whoiscontain">
<script>
// Loads the return vaue of the call into the "whoiscontain" div.
$(".whoiscontain").load("ajaxhandler.php",
{ // ajax call to pass variable to ajax handler, which then decides what to do with it
d: "lomcn.org",
q: 'whois'
});
</script>
<!--Whoiscontain div end -->
</div>
<!--- right column div end -->
</div>
<!--- closing div tag for 1st row --->
</div>
</div>
<!---- ends the check on if the variable is set -->
<!---- Closing div tag for container-fluid --->
</div>
</body>
</html>

to style bootstrap you can over ride bootstrap styles or make your own new styles.
They recommend not editing the bootstrap .CSS directly so updates to bootstrap will not change your design.
You are correct to place your own style sheet call below the bootstrap call, so yours will override.
Even though your styles will over ride you might not be able to over ride a bootstrap rule that has the !important tag. You can either use the bootstrap classes and ID's in your stylesheet and make new rules, using your own !Important to force them through if necessary, or add additional classes for your styles:
a bit of code
was `<div class="col-md-12">`
make `<div class="col-md-12 myCol">`
and then make rules on your stylesheet for
.myCol{
these styles should persist
}

Matching "last-line" of a dd in bootstrap

I have a inline ul inside a dd element, which shows like this,
Now I'm trying to match the "second" line with selectors, is that even possible?
Items on each line varies (depends on the screen size) so I can't just match them when I print them in PHP.
Why I'm doing this:
I have a margin-bottom defined for all li, I'm trying to remove that for items in the "last-line", otherwise there would be extra margins.
Attached a minimal example:
<html>
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-3 col-xs-3">
<dl>
<dt>Title:</dt>
<dd>
<ul class="list-inline">
<li>Item</li><li>Item</li>
<li>Item</li><li>Item</li>
<li>Item</li><li>Item</li>
<li>Item</li><li>Item</li>
<li>Item</li><li>Item</li>
<li>Item</li><li>Item</li>
</ul>
</dd>
</dl>
</div>
</div>
</div>
</body>
</html>

You can't match on a "last line", even more so in this case because it is dynamic. But you could apply a negative margin-bottom to the ul to cancel out the li margins:
.container {
background-color:#ccc;
}
.container ul {
margin-bottom:-50px;
}
.container ul li {
margin-bottom:50px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-3 col-xs-3">
<dl>
<dt>Title:</dt>
<dd>
<ul class="list-inline">
<li>Item</li><li>Item</li>
<li>Item</li><li>Item</li>
<li>Item</li><li>Item</li>
<li>Item</li><li>Item</li>
<li>Item</li><li>Item</li>
<li>Item</li><li>Item</li>
</ul>
</dd>
</dl>
</div>
</div>
</div>
<div>Some other content</div>

Its possible with javascript/jQuery. you said you want it based on screen size so you have to call function every time the screen changes.
The way i see it done is:
get the screen size and start looping the li elements by saving their widths in temporary variable, when this variable value becomes higher than the screen size, break and apply to next li the margin.
EDIT:
Noticed the responsive classes on div, so for this way - just take the div's width and not the screen size.
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-3 col-xs-3">
<dl>
<dt>Title:</dt>
<dd>
<ul id="li_container" class="list-inline">
<li>Item</li><li>Item</li>
<li>Item</li><li>Item</li>
<li>Item</li><li>Item</li>
<li>Item</li><li>Item</li>
<li>Item</li><li>Item</li>
<li>Item</li><li>Item</li>
</ul>
</dd>
</dl>
</div>
</div>
</div>
for start add id to the ul "li_container"
then with jQuery :
function fix_margins(){
$("#li_container li").css("margin-bottom","your_default_margin_goes_here"); // reset margins
var container_width = $("#li_container").outerWidth();
var temp_width = 0;
var i=1;
$.each($("#li_container li"),function(){
temp_width += $(this).outerWidth();
if(temp_width > container_width)
{
$("#li_container li:nth-child("+(i)+") ").nextAll().css("margin-bottom","0"); // remove bottom margins for all in second row
return false;
}else {i++;}
});
}
$(document).ready(function(){
fix_margins();
$( window ).resize(function() {
fix_margins();
});
});