HTML layout breaks when font family is changed from “Open Sans” to other fonts
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
1
I have the following code that uses Bootstrap 3. When I am using "Open Sans" as the font the page renders fine. But when I change the font to other fonts (e.g. verdana) the layout breaks.
This is the layout with "Open Sans"
This one is with verdana
One other thing I notice is that if the elements under the first row (Age and Height) are all of the same type (i.e all text boxes or all drop downs) page renders correctly even with verdana.
As far as I can tell the page renders OK with "Open Sans" but breaks with other fonts.
Here the HTML code with verdana font. It works if the font is changed to "Open Sans"
<!DOCTYPE html>
<html lang='en' class=''>
<head>
<meta charset='UTF-8'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
<style >
body {
font-family: verdana;
}
label {
font-weight: normal;
margin-top: 15px;
}
</style>
</head>
<body>
<div class="container">
<form>
<div class="col-xs-6">
<div class="form-group">
<label class="control-label" style="width: 100%;" for="nome">Age</label>
<div class="col-xs-3" style="background-color: yellow;padding-left: 0px;padding-right: 0px;">
<input class="form-control" type="text" size="2" maxlength="2" name="MinAge" >
</div>
<div class="col-xs-2"> to</div>
<div class="col-xs-3" style="background-color: yellow;padding-left: 0px;padding-right: 0px;">
<input class="form-control" type="text" size="2" maxlength="2" name="MaxAge">
</div>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label class="control-label" style="width: 100%;" for="nome">Height</label>
<div class="col-xs-5" style="background-color: yellow;padding-left: 0px;padding-right: 0px;">
<select class="form-control" name="MinHt" size="1">
<option selected value="">Pick One</option>
<option value="54">4ft 6in</option>
</select>
</div>
<div class="col-xs-2">to</div>
<div class="col-xs-5" style="background-color: yellow;padding-left: 0px;padding-right: 0px;">
<select class="form-control" name="MaxHt" size="1">
<option selected value="">Pick One</option>
</select>
</div>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label class="control-label" for="nome">Religion</label>
<select name="Religion" size="1" onchange="populateCastes( 'Religion', 'Language', 'CasteId', this.form, 'M' );" class="form-control">
<option value="">Pick One</option>
<option value="01_H">Hindu</option>
<option value="07_Z">Zorastrian</option>
</select>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label class="control-label" for="nome">Caste</label>
<select class="form-control" name="Caste" id="CasteId" SIZE=1 disabled="true" MULTIPLE onclick="selectBrahmin(this.form);">
<option value="">Pick One
</select>
</div>
</div>
</form>
</div>
<script src='//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>
</body>
</html>
Why does it not work with other fonts?
html css twitter-bootstrap fonts
asked Nov 24 '18 at 2:57
user2125853user2125853
149313
add a comment |
1
I have the following code that uses Bootstrap 3. When I am using "Open Sans" as the font the page renders fine. But when I change the font to other fonts (e.g. verdana) the layout breaks.
This is the layout with "Open Sans"
This one is with verdana
One other thing I notice is that if the elements under the first row (Age and Height) are all of the same type (i.e all text boxes or all drop downs) page renders correctly even with verdana.
As far as I can tell the page renders OK with "Open Sans" but breaks with other fonts.
Here the HTML code with verdana font. It works if the font is changed to "Open Sans"
<!DOCTYPE html>
<html lang='en' class=''>
<head>
<meta charset='UTF-8'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
<style >
body {
font-family: verdana;
}
label {
font-weight: normal;
margin-top: 15px;
}
</style>
</head>
<body>
<div class="container">
<form>
<div class="col-xs-6">
<div class="form-group">
<label class="control-label" style="width: 100%;" for="nome">Age</label>
<div class="col-xs-3" style="background-color: yellow;padding-left: 0px;padding-right: 0px;">
<input class="form-control" type="text" size="2" maxlength="2" name="MinAge" >
</div>
<div class="col-xs-2"> to</div>
<div class="col-xs-3" style="background-color: yellow;padding-left: 0px;padding-right: 0px;">
<input class="form-control" type="text" size="2" maxlength="2" name="MaxAge">
</div>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label class="control-label" style="width: 100%;" for="nome">Height</label>
<div class="col-xs-5" style="background-color: yellow;padding-left: 0px;padding-right: 0px;">
<select class="form-control" name="MinHt" size="1">
<option selected value="">Pick One</option>
<option value="54">4ft 6in</option>
</select>
</div>
<div class="col-xs-2">to</div>
<div class="col-xs-5" style="background-color: yellow;padding-left: 0px;padding-right: 0px;">
<select class="form-control" name="MaxHt" size="1">
<option selected value="">Pick One</option>
</select>
</div>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label class="control-label" for="nome">Religion</label>
<select name="Religion" size="1" onchange="populateCastes( 'Religion', 'Language', 'CasteId', this.form, 'M' );" class="form-control">
<option value="">Pick One</option>
<option value="01_H">Hindu</option>
<option value="07_Z">Zorastrian</option>
</select>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label class="control-label" for="nome">Caste</label>
<select class="form-control" name="Caste" id="CasteId" SIZE=1 disabled="true" MULTIPLE onclick="selectBrahmin(this.form);">
<option value="">Pick One
</select>
</div>
</div>
</form>
</div>
<script src='//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>
</body>
</html>
Why does it not work with other fonts?
html css twitter-bootstrap fonts
asked Nov 24 '18 at 2:57
user2125853user2125853
149313
add a comment |
1
1
1
I have the following code that uses Bootstrap 3. When I am using "Open Sans" as the font the page renders fine. But when I change the font to other fonts (e.g. verdana) the layout breaks.
This is the layout with "Open Sans"
This one is with verdana
One other thing I notice is that if the elements under the first row (Age and Height) are all of the same type (i.e all text boxes or all drop downs) page renders correctly even with verdana.
As far as I can tell the page renders OK with "Open Sans" but breaks with other fonts.
Here the HTML code with verdana font. It works if the font is changed to "Open Sans"
<!DOCTYPE html>
<html lang='en' class=''>
<head>
<meta charset='UTF-8'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
<style >
body {
font-family: verdana;
}
label {
font-weight: normal;
margin-top: 15px;
}
</style>
</head>
<body>
<div class="container">
<form>
<div class="col-xs-6">
<div class="form-group">
<label class="control-label" style="width: 100%;" for="nome">Age</label>
<div class="col-xs-3" style="background-color: yellow;padding-left: 0px;padding-right: 0px;">
<input class="form-control" type="text" size="2" maxlength="2" name="MinAge" >
</div>
<div class="col-xs-2"> to</div>
<div class="col-xs-3" style="background-color: yellow;padding-left: 0px;padding-right: 0px;">
<input class="form-control" type="text" size="2" maxlength="2" name="MaxAge">
</div>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label class="control-label" style="width: 100%;" for="nome">Height</label>
<div class="col-xs-5" style="background-color: yellow;padding-left: 0px;padding-right: 0px;">
<select class="form-control" name="MinHt" size="1">
<option selected value="">Pick One</option>
<option value="54">4ft 6in</option>
</select>
</div>
<div class="col-xs-2">to</div>
<div class="col-xs-5" style="background-color: yellow;padding-left: 0px;padding-right: 0px;">
<select class="form-control" name="MaxHt" size="1">
<option selected value="">Pick One</option>
</select>
</div>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label class="control-label" for="nome">Religion</label>
<select name="Religion" size="1" onchange="populateCastes( 'Religion', 'Language', 'CasteId', this.form, 'M' );" class="form-control">
<option value="">Pick One</option>
<option value="01_H">Hindu</option>
<option value="07_Z">Zorastrian</option>
</select>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label class="control-label" for="nome">Caste</label>
<select class="form-control" name="Caste" id="CasteId" SIZE=1 disabled="true" MULTIPLE onclick="selectBrahmin(this.form);">
<option value="">Pick One
</select>
</div>
</div>
</form>
</div>
<script src='//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>
</body>
</html>
Why does it not work with other fonts?
html css twitter-bootstrap fonts
asked Nov 24 '18 at 2:57
user2125853user2125853
149313
I have the following code that uses Bootstrap 3. When I am using "Open Sans" as the font the page renders fine. But when I change the font to other fonts (e.g. verdana) the layout breaks.
This is the layout with "Open Sans"
This one is with verdana
One other thing I notice is that if the elements under the first row (Age and Height) are all of the same type (i.e all text boxes or all drop downs) page renders correctly even with verdana.
As far as I can tell the page renders OK with "Open Sans" but breaks with other fonts.
Here the HTML code with verdana font. It works if the font is changed to "Open Sans"
<!DOCTYPE html>
<html lang='en' class=''>
<head>
<meta charset='UTF-8'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
<style >
body {
font-family: verdana;
}
label {
font-weight: normal;
margin-top: 15px;
}
</style>
</head>
<body>
<div class="container">
<form>
<div class="col-xs-6">
<div class="form-group">
<label class="control-label" style="width: 100%;" for="nome">Age</label>
<div class="col-xs-3" style="background-color: yellow;padding-left: 0px;padding-right: 0px;">
<input class="form-control" type="text" size="2" maxlength="2" name="MinAge" >
</div>
<div class="col-xs-2"> to</div>
<div class="col-xs-3" style="background-color: yellow;padding-left: 0px;padding-right: 0px;">
<input class="form-control" type="text" size="2" maxlength="2" name="MaxAge">
</div>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label class="control-label" style="width: 100%;" for="nome">Height</label>
<div class="col-xs-5" style="background-color: yellow;padding-left: 0px;padding-right: 0px;">
<select class="form-control" name="MinHt" size="1">
<option selected value="">Pick One</option>
<option value="54">4ft 6in</option>
</select>
</div>
<div class="col-xs-2">to</div>
<div class="col-xs-5" style="background-color: yellow;padding-left: 0px;padding-right: 0px;">
<select class="form-control" name="MaxHt" size="1">
<option selected value="">Pick One</option>
</select>
</div>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label class="control-label" for="nome">Religion</label>
<select name="Religion" size="1" onchange="populateCastes( 'Religion', 'Language', 'CasteId', this.form, 'M' );" class="form-control">
<option value="">Pick One</option>
<option value="01_H">Hindu</option>
<option value="07_Z">Zorastrian</option>
</select>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label class="control-label" for="nome">Caste</label>
<select class="form-control" name="Caste" id="CasteId" SIZE=1 disabled="true" MULTIPLE onclick="selectBrahmin(this.form);">
<option value="">Pick One
</select>
</div>
</div>
</form>
</div>
<script src='//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>
</body>
</html>
Why does it not work with other fonts?
html css twitter-bootstrap fonts
html css twitter-bootstrap fonts
asked Nov 24 '18 at 2:57
user2125853user2125853
149313
asked Nov 24 '18 at 2:57
user2125853user2125853
149313
asked Nov 24 '18 at 2:57
user2125853user2125853
149313
asked Nov 24 '18 at 2:57
user2125853user2125853
149313
asked Nov 24 '18 at 2:57
user2125853user2125853
149313
149313
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
0
This is happening because when you use the grid system in bootstrap the col class must be defined within a row using <div class="row"> as the parent for your columns. Adding the row parent divs will resolve your issue.
See working example below:
/* Ignore this */
.as-console-wrapper {
display: none !important;
}<!DOCTYPE html>
<html lang='en' class=''>
<head>
<meta charset='UTF-8'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
<style>
body {
font-family: verdana;
}
label {
font-weight: normal;
margin-top: 15px;
}
</style>
</head>
<body>
<div class="container">
<form>
<!-- ADD ROW HERE -->
<div class="row">
<div class="col-xs-6">
<div class="form-group">
<label class="control-label" style="width: 100%;" for="nome">Age</label>
<div class="col-xs-3" style="background-color: yellow;padding-left: 0px;padding-right: 0px;">
<input class="form-control" type="text" size="2" maxlength="2" name="MinAge">
</div>
<div class="col-xs-2"> to</div>
<div class="col-xs-3" style="background-color: yellow;padding-left: 0px;padding-right: 0px;">
<input class="form-control" type="text" size="2" maxlength="2" name="MaxAge">
</div>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label class="control-label" style="width: 100%;" for="nome">Height</label>
<div class="col-xs-5" style="background-color: yellow;padding-left: 0px;padding-right: 0px;">
<select class="form-control" name="MinHt" size="1">
<option selected value="">Pick One</option>
<option value="54">4ft 6in</option>
</select>
</div>
<div class="col-xs-2">to</div>
<div class="col-xs-5" style="background-color: yellow;padding-left: 0px;padding-right: 0px;">
<select class="form-control" name="MaxHt" size="1">
<option selected value="">Pick One</option>
</select>
</div>
</div>
</div>
</div>
<!-- ADD ROW HERE -->
<div class="row">
<div class="col-xs-6">
<div class="form-group">
<label class="control-label" for="nome">Religion</label>
<select name="Religion" size="1" onchange="populateCastes( 'Religion', 'Language', 'CasteId', this.form, 'M' );" class="form-control">
<option value="">Pick One</option>
<option value="01_H">Hindu</option>
<option value="07_Z">Zorastrian</option>
</select>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label class="control-label" for="nome">Caste</label>
<select class="form-control" name="Caste" id="CasteId" SIZE=1 disabled="true" MULTIPLE onclick="selectBrahmin(this.form);">
<option value="">Pick One
</select>
</div>
</div>
</div>
</form>
</div>
<script src='//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>
</body>
</html>answered Nov 24 '18 at 3:15
Nick ParsonsNick Parsons
10.5k21028
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53454792%2fhtml-layout-breaks-when-font-family-is-changed-from-open-sans-to-other-fonts%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
This is happening because when you use the grid system in bootstrap the col class must be defined within a row using <div class="row"> as the parent for your columns. Adding the row parent divs will resolve your issue.
See working example below:
/* Ignore this */
.as-console-wrapper {
display: none !important;
}<!DOCTYPE html>
<html lang='en' class=''>
<head>
<meta charset='UTF-8'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
<style>
body {
font-family: verdana;
}
label {
font-weight: normal;
margin-top: 15px;
}
</style>
</head>
<body>
<div class="container">
<form>
<!-- ADD ROW HERE -->
<div class="row">
<div class="col-xs-6">
<div class="form-group">
<label class="control-label" style="width: 100%;" for="nome">Age</label>
<div class="col-xs-3" style="background-color: yellow;padding-left: 0px;padding-right: 0px;">
<input class="form-control" type="text" size="2" maxlength="2" name="MinAge">
</div>
<div class="col-xs-2"> to</div>
<div class="col-xs-3" style="background-color: yellow;padding-left: 0px;padding-right: 0px;">
<input class="form-control" type="text" size="2" maxlength="2" name="MaxAge">
</div>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label class="control-label" style="width: 100%;" for="nome">Height</label>
<div class="col-xs-5" style="background-color: yellow;padding-left: 0px;padding-right: 0px;">
<select class="form-control" name="MinHt" size="1">
<option selected value="">Pick One</option>
<option value="54">4ft 6in</option>
</select>
</div>
<div class="col-xs-2">to</div>
<div class="col-xs-5" style="background-color: yellow;padding-left: 0px;padding-right: 0px;">
<select class="form-control" name="MaxHt" size="1">
<option selected value="">Pick One</option>
</select>
</div>
</div>
</div>
</div>
<!-- ADD ROW HERE -->
<div class="row">
<div class="col-xs-6">
<div class="form-group">
<label class="control-label" for="nome">Religion</label>
<select name="Religion" size="1" onchange="populateCastes( 'Religion', 'Language', 'CasteId', this.form, 'M' );" class="form-control">
<option value="">Pick One</option>
<option value="01_H">Hindu</option>
<option value="07_Z">Zorastrian</option>
</select>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label class="control-label" for="nome">Caste</label>
<select class="form-control" name="Caste" id="CasteId" SIZE=1 disabled="true" MULTIPLE onclick="selectBrahmin(this.form);">
<option value="">Pick One
</select>
</div>
</div>
</div>
</form>
</div>
<script src='//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>
</body>
</html>answered Nov 24 '18 at 3:15
Nick ParsonsNick Parsons
10.5k21028
add a comment |
0
This is happening because when you use the grid system in bootstrap the col class must be defined within a row using <div class="row"> as the parent for your columns. Adding the row parent divs will resolve your issue.
See working example below:
/* Ignore this */
.as-console-wrapper {
display: none !important;
}<!DOCTYPE html>
<html lang='en' class=''>
<head>
<meta charset='UTF-8'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
<style>
body {
font-family: verdana;
}
label {
font-weight: normal;
margin-top: 15px;
}
</style>
</head>
<body>
<div class="container">
<form>
<!-- ADD ROW HERE -->
<div class="row">
<div class="col-xs-6">
<div class="form-group">
<label class="control-label" style="width: 100%;" for="nome">Age</label>
<div class="col-xs-3" style="background-color: yellow;padding-left: 0px;padding-right: 0px;">
<input class="form-control" type="text" size="2" maxlength="2" name="MinAge">
</div>
<div class="col-xs-2"> to</div>
<div class="col-xs-3" style="background-color: yellow;padding-left: 0px;padding-right: 0px;">
<input class="form-control" type="text" size="2" maxlength="2" name="MaxAge">
</div>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label class="control-label" style="width: 100%;" for="nome">Height</label>
<div class="col-xs-5" style="background-color: yellow;padding-left: 0px;padding-right: 0px;">
<select class="form-control" name="MinHt" size="1">
<option selected value="">Pick One</option>
<option value="54">4ft 6in</option>
</select>
</div>
<div class="col-xs-2">to</div>
<div class="col-xs-5" style="background-color: yellow;padding-left: 0px;padding-right: 0px;">
<select class="form-control" name="MaxHt" size="1">
<option selected value="">Pick One</option>
</select>
</div>
</div>
</div>
</div>
<!-- ADD ROW HERE -->
<div class="row">
<div class="col-xs-6">
<div class="form-group">
<label class="control-label" for="nome">Religion</label>
<select name="Religion" size="1" onchange="populateCastes( 'Religion', 'Language', 'CasteId', this.form, 'M' );" class="form-control">
<option value="">Pick One</option>
<option value="01_H">Hindu</option>
<option value="07_Z">Zorastrian</option>
</select>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label class="control-label" for="nome">Caste</label>
<select class="form-control" name="Caste" id="CasteId" SIZE=1 disabled="true" MULTIPLE onclick="selectBrahmin(this.form);">
<option value="">Pick One
</select>
</div>
</div>
</div>
</form>
</div>
<script src='//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>
</body>
</html>answered Nov 24 '18 at 3:15
Nick ParsonsNick Parsons
10.5k21028
add a comment |
0
0
0
This is happening because when you use the grid system in bootstrap the col class must be defined within a row using <div class="row"> as the parent for your columns. Adding the row parent divs will resolve your issue.
See working example below:
/* Ignore this */
.as-console-wrapper {
display: none !important;
}<!DOCTYPE html>
<html lang='en' class=''>
<head>
<meta charset='UTF-8'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
<style>
body {
font-family: verdana;
}
label {
font-weight: normal;
margin-top: 15px;
}
</style>
</head>
<body>
<div class="container">
<form>
<!-- ADD ROW HERE -->
<div class="row">
<div class="col-xs-6">
<div class="form-group">
<label class="control-label" style="width: 100%;" for="nome">Age</label>
<div class="col-xs-3" style="background-color: yellow;padding-left: 0px;padding-right: 0px;">
<input class="form-control" type="text" size="2" maxlength="2" name="MinAge">
</div>
<div class="col-xs-2"> to</div>
<div class="col-xs-3" style="background-color: yellow;padding-left: 0px;padding-right: 0px;">
<input class="form-control" type="text" size="2" maxlength="2" name="MaxAge">
</div>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label class="control-label" style="width: 100%;" for="nome">Height</label>
<div class="col-xs-5" style="background-color: yellow;padding-left: 0px;padding-right: 0px;">
<select class="form-control" name="MinHt" size="1">
<option selected value="">Pick One</option>
<option value="54">4ft 6in</option>
</select>
</div>
<div class="col-xs-2">to</div>
<div class="col-xs-5" style="background-color: yellow;padding-left: 0px;padding-right: 0px;">
<select class="form-control" name="MaxHt" size="1">
<option selected value="">Pick One</option>
</select>
</div>
</div>
</div>
</div>
<!-- ADD ROW HERE -->
<div class="row">
<div class="col-xs-6">
<div class="form-group">
<label class="control-label" for="nome">Religion</label>
<select name="Religion" size="1" onchange="populateCastes( 'Religion', 'Language', 'CasteId', this.form, 'M' );" class="form-control">
<option value="">Pick One</option>
<option value="01_H">Hindu</option>
<option value="07_Z">Zorastrian</option>
</select>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label class="control-label" for="nome">Caste</label>
<select class="form-control" name="Caste" id="CasteId" SIZE=1 disabled="true" MULTIPLE onclick="selectBrahmin(this.form);">
<option value="">Pick One
</select>
</div>
</div>
</div>
</form>
</div>
<script src='//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>
</body>
</html>answered Nov 24 '18 at 3:15
Nick ParsonsNick Parsons
10.5k21028
This is happening because when you use the grid system in bootstrap the col class must be defined within a row using <div class="row"> as the parent for your columns. Adding the row parent divs will resolve your issue.
See working example below:
/* Ignore this */
.as-console-wrapper {
display: none !important;
}<!DOCTYPE html>
<html lang='en' class=''>
<head>
<meta charset='UTF-8'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
<style>
body {
font-family: verdana;
}
label {
font-weight: normal;
margin-top: 15px;
}
</style>
</head>
<body>
<div class="container">
<form>
<!-- ADD ROW HERE -->
<div class="row">
<div class="col-xs-6">
<div class="form-group">
<label class="control-label" style="width: 100%;" for="nome">Age</label>
<div class="col-xs-3" style="background-color: yellow;padding-left: 0px;padding-right: 0px;">
<input class="form-control" type="text" size="2" maxlength="2" name="MinAge">
</div>
<div class="col-xs-2"> to</div>
<div class="col-xs-3" style="background-color: yellow;padding-left: 0px;padding-right: 0px;">
<input class="form-control" type="text" size="2" maxlength="2" name="MaxAge">
</div>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label class="control-label" style="width: 100%;" for="nome">Height</label>
<div class="col-xs-5" style="background-color: yellow;padding-left: 0px;padding-right: 0px;">
<select class="form-control" name="MinHt" size="1">
<option selected value="">Pick One</option>
<option value="54">4ft 6in</option>
</select>
</div>
<div class="col-xs-2">to</div>
<div class="col-xs-5" style="background-color: yellow;padding-left: 0px;padding-right: 0px;">
<select class="form-control" name="MaxHt" size="1">
<option selected value="">Pick One</option>
</select>
</div>
</div>
</div>
</div>
<!-- ADD ROW HERE -->
<div class="row">
<div class="col-xs-6">
<div class="form-group">
<label class="control-label" for="nome">Religion</label>
<select name="Religion" size="1" onchange="populateCastes( 'Religion', 'Language', 'CasteId', this.form, 'M' );" class="form-control">
<option value="">Pick One</option>
<option value="01_H">Hindu</option>
<option value="07_Z">Zorastrian</option>
</select>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label class="control-label" for="nome">Caste</label>
<select class="form-control" name="Caste" id="CasteId" SIZE=1 disabled="true" MULTIPLE onclick="selectBrahmin(this.form);">
<option value="">Pick One
</select>
</div>
</div>
</div>
</form>
</div>
<script src='//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>
</body>
</html>/* Ignore this */
.as-console-wrapper {
display: none !important;
}<!DOCTYPE html>
<html lang='en' class=''>
<head>
<meta charset='UTF-8'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
<style>
body {
font-family: verdana;
}
label {
font-weight: normal;
margin-top: 15px;
}
</style>
</head>
<body>
<div class="container">
<form>
<!-- ADD ROW HERE -->
<div class="row">
<div class="col-xs-6">
<div class="form-group">
<label class="control-label" style="width: 100%;" for="nome">Age</label>
<div class="col-xs-3" style="background-color: yellow;padding-left: 0px;padding-right: 0px;">
<input class="form-control" type="text" size="2" maxlength="2" name="MinAge">
</div>
<div class="col-xs-2"> to</div>
<div class="col-xs-3" style="background-color: yellow;padding-left: 0px;padding-right: 0px;">
<input class="form-control" type="text" size="2" maxlength="2" name="MaxAge">
</div>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label class="control-label" style="width: 100%;" for="nome">Height</label>
<div class="col-xs-5" style="background-color: yellow;padding-left: 0px;padding-right: 0px;">
<select class="form-control" name="MinHt" size="1">
<option selected value="">Pick One</option>
<option value="54">4ft 6in</option>
</select>
</div>
<div class="col-xs-2">to</div>
<div class="col-xs-5" style="background-color: yellow;padding-left: 0px;padding-right: 0px;">
<select class="form-control" name="MaxHt" size="1">
<option selected value="">Pick One</option>
</select>
</div>
</div>
</div>
</div>
<!-- ADD ROW HERE -->
<div class="row">
<div class="col-xs-6">
<div class="form-group">
<label class="control-label" for="nome">Religion</label>
<select name="Religion" size="1" onchange="populateCastes( 'Religion', 'Language', 'CasteId', this.form, 'M' );" class="form-control">
<option value="">Pick One</option>
<option value="01_H">Hindu</option>
<option value="07_Z">Zorastrian</option>
</select>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label class="control-label" for="nome">Caste</label>
<select class="form-control" name="Caste" id="CasteId" SIZE=1 disabled="true" MULTIPLE onclick="selectBrahmin(this.form);">
<option value="">Pick One
</select>
</div>
</div>
</div>
</form>
</div>
<script src='//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>
</body>
</html>/* Ignore this */
.as-console-wrapper {
display: none !important;
}<!DOCTYPE html>
<html lang='en' class=''>
<head>
<meta charset='UTF-8'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
<style>
body {
font-family: verdana;
}
label {
font-weight: normal;
margin-top: 15px;
}
</style>
</head>
<body>
<div class="container">
<form>
<!-- ADD ROW HERE -->
<div class="row">
<div class="col-xs-6">
<div class="form-group">
<label class="control-label" style="width: 100%;" for="nome">Age</label>
<div class="col-xs-3" style="background-color: yellow;padding-left: 0px;padding-right: 0px;">
<input class="form-control" type="text" size="2" maxlength="2" name="MinAge">
</div>
<div class="col-xs-2"> to</div>
<div class="col-xs-3" style="background-color: yellow;padding-left: 0px;padding-right: 0px;">
<input class="form-control" type="text" size="2" maxlength="2" name="MaxAge">
</div>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label class="control-label" style="width: 100%;" for="nome">Height</label>
<div class="col-xs-5" style="background-color: yellow;padding-left: 0px;padding-right: 0px;">
<select class="form-control" name="MinHt" size="1">
<option selected value="">Pick One</option>
<option value="54">4ft 6in</option>
</select>
</div>
<div class="col-xs-2">to</div>
<div class="col-xs-5" style="background-color: yellow;padding-left: 0px;padding-right: 0px;">
<select class="form-control" name="MaxHt" size="1">
<option selected value="">Pick One</option>
</select>
</div>
</div>
</div>
</div>
<!-- ADD ROW HERE -->
<div class="row">
<div class="col-xs-6">
<div class="form-group">
<label class="control-label" for="nome">Religion</label>
<select name="Religion" size="1" onchange="populateCastes( 'Religion', 'Language', 'CasteId', this.form, 'M' );" class="form-control">
<option value="">Pick One</option>
<option value="01_H">Hindu</option>
<option value="07_Z">Zorastrian</option>
</select>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label class="control-label" for="nome">Caste</label>
<select class="form-control" name="Caste" id="CasteId" SIZE=1 disabled="true" MULTIPLE onclick="selectBrahmin(this.form);">
<option value="">Pick One
</select>
</div>
</div>
</div>
</form>
</div>
<script src='//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>
</body>
</html>answered Nov 24 '18 at 3:15
Nick ParsonsNick Parsons
10.5k21028
edited Nov 24 '18 at 3:28
answered Nov 24 '18 at 3:15
Nick ParsonsNick Parsons
10.5k21028
answered Nov 24 '18 at 3:15
Nick ParsonsNick Parsons
10.5k21028
answered Nov 24 '18 at 3:15
Nick ParsonsNick Parsons
10.5k21028
10.5k21028
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53454792%2fhtml-layout-breaks-when-font-family-is-changed-from-open-sans-to-other-fonts%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
