Inserting bootstrap.css without affecting or changing my css

Issue

I have created an Image Uploader by using bootstrap of its own, but when I use its bootstrap.css in my page <hr/> tags and other tags css gets affected and doesn’t give proper output as I’ve designed. This is My Form in which I need to apply this Image Uploader. But when I insert or copy this Image Uploader scripts and its css to My Form in Image section. It disturbs my whole css and uses only bootstrap css and submits the form even onclick on clear button. After I mix both My Form & Image Uploader I get this output which is given below with code, snippet and this is the JSFIDDLE. I Please check My Form and the form after I add Image uploader it disturbs my css files and doesn’t even show me preview of Images. I am not sure where am I going wrong.

$("#ImageUploader").submit(function (e) {
    "use strict";

    var fileUpload = $("#file")[0].files,
        fileCount = $("#file")[0].files.length;

    if (parseInt(fileCount) > 5) {
        alert("You can only upload a maximum of 5 files");
        e.preventDefault();
        } else if (parseInt(fileCount) < 2) {
        alert("You need to upload minimum 2 images");
        e.preventDefault();
    } else if (fileCount === 0 || typeof fileUpload === "undefined") {
    alert("No files are selected.");
    e.preventDefault();
    }
});

function deleteAll() {
    "use strict";
    $(".img-preview-area").html("<p>Image Preview...</p>");
    $(":file").filestyle('clear');
}

$("input:file").on('change', function () {
    "use strict";

    if (this.files.length >= 1) {
        $(".img-preview-area").html("");
        $("[id^=previewImg]").remove();
        $.each(this.files, function (i, img) {
            var reader = new FileReader(),
                preview = $("<img class='img-responsive img-thumbnail image-container' />");

            reader.onloadend = function () {
                preview.attr("src", reader.result);
                preview.attr("alt", img.name);
            };

            if (img) {
                reader.readAsDataURL(img);
            } else {
                preview.src = "";
            }

            preview.appendTo(".img-preview-area");
        });
    }
});


function checkedAll(ele) {
    "use strict";
    var arrayOfElements = ele.closest("#colors").getElementsByTagName("input"),
        item,
        i = 0;

    for (i; i < arrayOfElements.length; i = i + 1) {
        item = arrayOfElements[i];
        if (ele !== item && document.contains(item) === true) {
            arrayOfElements[i].checked = ele.checked;
        }
    }
}

function isNumberKey(evt) {
    var charCode = (evt.which) ? evt.which : event.keyCode
    if (charCode > 31 && (charCode < 48 || charCode > 57)) return false;
    return true;
}

function isNumberKeyspecial(evt) {
    var charCode = (evt.which) ? evt.which : event.keyCode
    if (charCode > 31 && (charCode < 48 || charCode > 57)) return false;
    return true;
}


var message = "";

function clickIE() {
    if (document.all) {
        (message);
        return false;
    }
}

function clickNS(e) {
    if (document.layers || (document.getElementById && !document.all)) {
        if (e.which == 2 || e.which == 3) {
            (message);
            return false;
        }
    }
}
if (document.layers) {
    document.captureEvents(Event.MOUSEDOWN);
    document.onmousedown = clickNS;
} else {
    document.onmouseup = clickNS;
    document.oncontextmenu = clickIE;
}

document.oncontextmenu = new Function("return false")


function resetForm() {
    "use strict";
    var arrayOfElements = document.getElementsByTagName("input"),
        item,
        i = 0;

    for (i; i < arrayOfElements.length; i = i + 1) {
        item = arrayOfElements[i].name;
        if (item.match(/qty/gi) !== null) {
            arrayOfElements[i].disabled = true;
        } else {
            arrayOfElements[i].checked = false;
        }
    }

    document.getElementById("masterform").reset();
}

function codename(ele) {
    "use strict";
    document.getElementsByName(ele.name + "qty")[0].disabled = !ele.checked;
}
body {
    background-image: url(../header_bg.jpg);
    background-size: cover;
}
hr {
    border: 0;
    height: 0;
    box-shadow: 0 0 10px 1px black;
}
hr:after {
    content:"\00a0";
}
textarea {
    resize: none;
}
input[type=checkbox] {
    cursor: pointer;
}
input[type=radio] {
    cursor: pointer;
}
b {
    cursor: default;
}
th {
    cursor: default;
}
td {
    cursor: default;
}
input[type=text] {
    cursor: cell;
}
textarea {
    cursor: cell;
}
input[type="reset"] {
    width: 10em;
    height: 2em;
    border: none;
    background: transparent;
    font-weight: bold;
    cursor: pointer;
}
input[disabled] {
    background: transparent;
    border: none;
    cursor: default;
}
input:disabled::-webkit-input-placeholder {
    /* WebKit browsers */
    color: #fff;
}
input:disabled:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    color: #fff;
}
input:disabled::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: #fff;
}
input:disabled:-ms-input-placeholder {
    /* Internet Explorer 10+ */
    color: #fff;
}
#back {
    width:28em;
    height:2em;
    border:none;
    background: transparent;
    font-weight:bold;
    cursor:pointer;
}
#view {
    width:10em;
    height:2em;
    border:none;
    background: transparent;
    font-weight:bold;
    cursor:pointer;
}
#toptable {
    box-shadow: 20px 20px 10px #000000;
    background-color: white;
}
.col-centered {
    float: none;
    margin: 0 auto;
}
.pad-top {
    padding-top: 15vh;
}
.image-container {
    padding-right: 5px;
}
img {
    max-height: 150px;
}
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://markusslima.github.io/bootstrap-filestyle/js/bootstrap-filestyle.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>
<body>
<b>
    Welcome : Username
</b>

<hr></hr>
<hr></hr>
<br/>

<h2><center>Bangles</center></h2>

<table border="2" id="toptable" align="center">
    <tr>
        <th>
            <input type="button" value="View Products" name="view_products" id="view" onclick="location.href='addBangles.php'">
        </th>
        <th></th>
        <th></th>
        <th></th>
        <th>
            <input type="button" value="Go Back To The HomePage Of This Website" name="back" id="back" onclick="location.href='home.php'">
        </th>
    </tr>
</table>
<br/><br/>
<form action="" method="POST" enctype="multipart/form-data" id="masterform" name="masterform">
    <table border="2" style="box-shadow: 20px 20px 10px #000000; background-color: white;" align="center">
        <tr>
            <th>
                <p align="Left">
                    Name : <sup><font color="red">*</font></sup>
                </p>
            </th>
            <th></th>
            <th></th>
            <th></th>
            <td>
                <input type="text" name="product_name" placeholder="Product Name" size="59" title="Enter the name of the product">
            </td>
        </tr>
        <tr>
            <th>
                <p align="Left">Description : <sup><font color="red">*</font></sup>
                </p>
            </th>
            <th></th>
            <th></th>
            <th></th>
            <td>
                <table border="0">
                    <textarea name="product_desc" placeholder="Product Description" maxlength="300" rows="6" cols="61" title="Enter the Description of the product"></textarea>
            </td>
            </table>
        </tr>
        <tr>
            <th>
                <p align="Left">Size &amp; Weight<sup><font color="red">*</font></sup>
                </p>
            </th>
            <th></th>
            <th></th>
            <th></th>
            <th>
                <table border="1">
                    <td title="Size 2.2">
                        <label>
                            <input type="checkbox" name="twopointtwosize" value="2.2size" title="Size 2.2" onClick="codename(this)">2.2
                            <br>
                            <input name="twopointtwosizeqty" type="text" disabled onKeyPress="return isNumberKey(event)" size="2" placeholder="QTY" maxlength="5">
                        </label>
                    </td>
                    <td title="Size 2.4">
                        <label>
                            <input type="checkbox" name="twopointfoursize" value="2.4size" title="Size 2.4" onClick="codename(this)">2.4
                            <br>
                            <input type="text" size="2" name="twopointfoursizeqty" placeholder="QTY" onKeyPress="return isNumberKey(event)" maxlength="5" disabled>
                        </label>
                    </td>
                    <td title="Size 2.6">
                        <label>
                            <input type="checkbox" name="twopointsixsize" value="2.6size" title="Size 2.6" onClick="codename(this)">2.6
                            <br>
                            <input type="text" size="2" name="twopointsixsizeqty" placeholder="QTY" onKeyPress="return isNumberKey(event)" disabled maxlength="5">
                        </label>
                    </td>
                    <td title="Size 2.8">
                        <label>
                            <input type="checkbox" name="twopointeightsize" value="2.8size" title="Size 2.8" onClick="codename(this)">2.8
                            <br>
                            <input type="text" size="2" name="twopointeightsizeqty" placeholder="QTY" onKeyPress="return isNumberKey(event)" disabled maxlength="5">
                        </label>
                    </td>
                    <td title="Size 2.10">
                        <label>
                            <input type="checkbox" name="twopointtensize" value="2.10size" title="Size 2.10" onClick="codename(this)">2.10
                            <br>
                            <input type="text" size="3" name="twopointtensizeqty" placeholder="QTY" onKeyPress="return isNumberKey(event)" disabled maxlength="5">
                        </label>
                    </td>
                    <td style="border-style: none;">
                        <input type="text" placeholder="Weight" name="weight" size="8" maxlength="8" title="Enter the weight in Grams" onKeyPress="return isNumberKey(event)" style="height: 45px;">
                    </td>
            </th>
            </table>
        </tr>
        <tr>
            <th>
                <p align="Left">Color : <sup><font color="red">*</font></sup>
                </p>
            </th>
            <th></th>
            <th></th>
            <th></th>
            <td id="colors">
                <table>
                    <td title="White Colour" style="border-style: groove; box-shadow: 5px 5px 2px #3B3131;">
                        <label>
                            <input type="checkbox" name="White" title="White Colour" value="white"><b title="White Colour">White</b>

                        </label>
                    </td>
                    <td title="White/Red Colour" style="border-style: groove; box-shadow: 5px 5px 2px #3B3131;">
                        <label>
                            <input type="checkbox" name="White_Red" title="White/Red Colour" value="w/r"><b title="White/Red Colour">W/R</b>

                        </label>
                    </td>
                    <td title="White/Green Colour" style="border-style: groove; box-shadow: 5px 5px 2px #3B3131;">
                        <label>
                            <input type="checkbox" name="White_Green" title="White/Green Colour" value="w/g"><b title="White/Green Colour">W/G</b>

                        </label>
                    </td>
                    <td title="White/Blue Colour" style="border-style: groove; box-shadow: 5px 5px 2px #3B3131;">
                        <label>
                            <input type="checkbox" name="White_Blue" title="White/Blue Colour" value="w/b"><b title="White/Blue Colour">W/B</b>

                        </label>
                    </td>
        </tr>
        <tr>
            <td title="Red Colour" style="border-style: groove; box-shadow: 5px 5px 2px #3B3131;">
                <label>
                    <input type="checkbox" name="Red" title="Red Colour" value="red"><b title="Red Colour">Red</b>

                </label>
            </td>
            <td title="Red/Green Colour" style="border-style: groove; box-shadow: 5px 5px 2px #3B3131;">
                <label>
                    <input type="checkbox" name="Red_Green" title="Red/Green Colour" value="r/g"><b title="Red/Green Colour">R/G</b>

                </label>
            </td>
            <td title="Red/Blue Colour" style="border-style: groove; box-shadow: 5px 5px 2px #3B3131;">
                <label>
                    <input type="checkbox" name="Red_Blue" title="Red/Blue Colour" value="r/b"><b title="Red/Blue Colour">R/B</b>

                </label>
            </td>
        </tr>
        <tr>
            <td title="Green Colour" style="border-style: groove; box-shadow: 5px 5px 2px #3B3131;">
                <label>
                    <input type="checkbox" name="Green" title="Green Colour" value="green"><b title="Green Colour">Green</b>

                </label>
            </td>
            <td title="Green/Blue Colour" style="border-style: groove; box-shadow: 5px 5px 2px #3B3131;">
                <label>
                    <input type="checkbox" name="Green_Blue" title="Green/Blue Colour" value="g/b"><b title="Green/Blue Colour">G/B</b>

                </label>
            </td>
            <tr>
                <td title="Blue Colour" style="border-style: groove; box-shadow: 5px 5px 2px #3B3131;">
                    <label>
                        <input type="checkbox" name="Blue" title="Blue Colour" value="blue"><b title="Blue Colour">Blue</b>

                    </label>
                </td>
                <tr>
                    <td title="Multi Colour" style="border-style: groove; box-shadow: 5px 5px 2px #3B3131;">
                        <label>
                            <input type="checkbox" name="multicolor" title="Multi Colour" value="multicolor"><b title="Multi Colour">MultiColour</b>

                        </label>
                    </td>
                    <td title="Select All" align="right" style="border-style: none;">
                        <input type="checkbox" name="checkall" title="Select All" onclick='checkedAll(this);'>
                    </td>
                    <td style="border-style: none;">	<b title="Select All">All</b>

                    </td>
                    </table>
                    </td>
                </tr>
            </tr>
            <tr>
                <th>
                    <p align="Left">Price : <sup><font color="red">*</font></sup>
                    </p>
                </th>
                <th></th>
                <th></th>
                <th></th>
                <td>
                    <table border="1">
                        <td>
                            <input type="text" name="product_price" placeholder="Original" size="21" title="Enter The Original Price Of The Product" onkeypress="return isNumberKey(event)">
                            <td>
                                <input type="text" name="product_special_price" placeholder="Special" size="21" title="Enter The Special Price Of The Product (not necessary)" onkeypress="return isNumberKeyspecial(event)">
                            </td>
                        </td>
            </tr>
            </table>
            <tr>
                <th title="Special Price Validity Dates;(note it is valid only if entered special price)">
                    <p align="Left">Special Date : <sup><font color="red">*</font></sup>

                    </p>
                </th>
                <th></th>
                <th></th>
                <th></th>
                <td title="Special Price Validity Dates;(note it is valid only if entered special price)">
                    <table border="0">
                        <tr>
                            <th title="Special Price Validity Starting Date">Start Date:</th>
                            <td>
                                <input type="date" name="startingdate" min="2015-02-01">
                                <br>
                            </td>
                        </tr>
                        <tr>
                            <th title="Special Price Validity Ending Date">End Date:</th>
                            <td>
                                <input type="date" name="endingdate" min="2015-02-01">
                                <br>
                            </td>
                        </tr>
                        <tr>
                            <th>	<font color="white" size="0">Hello</font>

                            </th>
                        </tr>
                        <tr>
                            <th>	<font color="white" size="0">Hello</font>

                            </th>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr>
                <th title="Status(Should the Product be visible to the customers)">
                    <p align="Left">Status : <sup><font color="red">*</font></sup>

                    </p>
                </th>
                <th></th>
                <th></th>
                <th></th>
                <th>
                    <label>Enable :
                        <input type="radio" name="status" value="enable" title="Enable The Status">
                    </label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <label>Disable :
                        <input type="radio" name="status" value="disable" title="Disable The Status">
                    </label>
                </th>
            </tr>
            <tr>
                <th title="Tax Class(which type of tax should be applied on the product)">
                    <p align="Left">Tax Class : <sup><font color="red">*</font></sup>
                     </p>
                </th>
                <th></th>
                <th></th>
                <th></th>
                <th>
                    <label>Taxable :
                        <input type="radio" name="tax" value="taxable" title="Taxable Goods">
                    </label>&nbsp;&nbsp;&nbsp;
                    <label>Shipping :
                        <input type="radio" name="tax" value="shipping" title="Shipping">
                    </label>&nbsp;&nbsp;&nbsp
                    <label>None :
                        <input type="radio" name="tax" value="None" title="None from both on the left">
                    </label>
                </th>
            </tr>
            <tr>
                <th title="Upload mages of your product">
                    <p align="Left">Images : <sup><font color="red">*</font></sup>
                     </p>
                </th>
                <th></th>
                <th></th>
                <th></th>
                <th>
                    <div class="container pad-top">
                        <div class="row">
                            <div class="panel">
                                <div class="panel-body img-preview-area">
                                    <p>Image Preview...</p>
                                </div>
                                <div class="panel-footer">
                                    <button class="btn btn-warning" onClick="deleteAll()"><i class='glyphicon glyphicon-remove'></i>&nbsp;Clear</button>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-4 col-centered">
                                <input type="file" id="file" class="filestyle" name="files[]" multiple="multiple" accept="image/*">
                            </div>
                        </div>
                    </div>
                </th>
            </tr>
            <tr></tr>
            <tr></tr>
            <tr></tr>
            <tr></tr>
            <tr>
                <th>
                    <input type="reset" name="reset" value="Reset" onclick="resetForm();" title="Reset All The Details">
                </th>
                <th></th>
                <th></th>
                <th></th>
                <th>
                    <input type="submit" name="submit" value="Add Product" title="Add Product To The Inventory" id="upload" class="upload" style="	width: 33em;height: 2em;
							border:none;
							background: transparent;
							font-weight:bold;
							cursor:pointer;">
                </th>
            </tr>
        </table>
    </form>
</body>

Solution

As mentioned by sanjeev, first thing is to link the bootstrap.css file BEFORE your custom CSS file. If some of Bootstrap’s styling is effecting your styling, then give your elements classes and style them more specifically.

I notice your CSS is targeting plain elements like td, so give the td‘s, tr‘s classes and target them in your CSS like td.classname {properties}.

Alternatively, give the parent table / div a class and specify the elements as children of the parent, i.e. table.classname tr {properties}.

Answered By – David Wilkinson

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published