Site’s Ui breaks due to modified global container and row classes

Plugin is good and works fine but UI breaks the site design due to modified global bootstrap classes like ‘container’ and ‘row’ classes in plugin’s CSS. You must specify these global classes within plugin’s class or id so that it doesn’t affect site’s design.
How can you directly overwrite the bootstrap classes?

.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
}

.header {
text-align: center;
margin-bottom: 40px;
}

h1 {
font-size: 24px;
}

.fcp-btn {
background-color: #004d99;
color: #fff;
text-transform: uppercase;
border-radius: 4px;
font-size: 17px;
padding: 2%;
border: solid 2px #004d99;
}

.hide_result {
display: none;
}

.w-25{width:25%!important}.w-50{width:50%!important}.w-75{width:75%!important}.w-100{width:100%!important}

.form-container {
background-color: #f5f5f5;
padding: 20px;
border-radius: 4px;
}

.row {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin-bottom: 20px;
}

.col {
width: 48%;
box-sizing: border-box;
}

label {
display: block;
margin-bottom: 5px;
}

input[type="text"],
input[type="email"],
select,
textarea {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 14px;
box-sizing: border-box;
}
.fcp-btn {
cursor: pointer;
}

.btn-submit {
background-color: #5cb85c;
color: white;
border: none;
padding: 10px 20px;
border-radius: 4px;
cursor: pointer;
width: 100%;
display: block;
}
.btn-submit:hover {
background-color: #449d44;
}
.column.full {
width: 100%;
}

/* Media query for screen widths less than 768px */
@media (max-width: 768px) {
.row {
flex-direction: column;
}
.col {
width: 100%;
box-sizing: border-box;
}
.column {
width: 100%;
margin-bottom: 20px;
}
}

.fcp-error{display: none;color: red;font-size: 12px;margin: 0px;padding: 0px;width: 100%;}
select {
background-color: #fff;
}

• This topic was modified 7 months, 1 week ago by jeetvashisth.
• This topic was modified 7 months, 1 week ago by jeetvashisth.