Mixing
Reducing the width of a column and understanding css used
I am looking at a react code with material UI and trying to understand
the className used like below.
Can you explain these two lines please? I thought you can only have a maximum of 12 columns.
<div className="col-xs-12 col-sm-6 col-md-6 col-lg-6 ">
<div className="col-xs-12 col-sm-12 col-md-12 col-lg-12">
I want to reduce the width of the Invoice covered and Reason for credit
which means reducing the width of the column. How can I achieve this?
<div className="row customer-form-layout">
<div className="col-xs-12 col-sm-6 col-md-6 col-lg-6 ">
<div className="customer-form-details">
<span>{this.props.customer.CustomerName}</span><br/>
<span>Customer #: <b>{this.props.customer.biCustomerNumber }</b></span>
</div>
<div className="covered-section">
<div className="row">
<div className="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<FormControl className="form-control">
<InputLabel htmlFor="invoice-number01" shrink>Invoice
Covered*</InputLabel>
<Select
value=''
inputProps={{
name: 'Test-number02',
id: 'Test-number02',
}}
>
<MenuItem value='1234567890'>1234567890</MenuItem>
<MenuItem value='2345678901'>2345678901</MenuItem>
</Select>
</FormControl>
</div>
</div>
</div>
<FormControl fullWidth className="form-control">
<InputLabel htmlFor="reason-field-value" shrink>Reason for Credit
</InputLabel>
<TextField
id="reason-field-value"
multiline
rows="8"
margin="normal"
/>
</FormControl>
</div>
twitter-bootstrap-3 material-ui
edited Jan 2 at 16:05
dschu
2,39821936
asked Jan 2 at 16:00
user2320476user2320476
50011440
add a comment |
I am looking at a react code with material UI and trying to understand
the className used like below.
Can you explain these two lines please? I thought you can only have a maximum of 12 columns.
<div className="col-xs-12 col-sm-6 col-md-6 col-lg-6 ">
<div className="col-xs-12 col-sm-12 col-md-12 col-lg-12">
I want to reduce the width of the Invoice covered and Reason for credit
which means reducing the width of the column. How can I achieve this?
<div className="row customer-form-layout">
<div className="col-xs-12 col-sm-6 col-md-6 col-lg-6 ">
<div className="customer-form-details">
<span>{this.props.customer.CustomerName}</span><br/>
<span>Customer #: <b>{this.props.customer.biCustomerNumber }</b></span>
</div>
<div className="covered-section">
<div className="row">
<div className="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<FormControl className="form-control">
<InputLabel htmlFor="invoice-number01" shrink>Invoice
Covered*</InputLabel>
<Select
value=''
inputProps={{
name: 'Test-number02',
id: 'Test-number02',
}}
>
<MenuItem value='1234567890'>1234567890</MenuItem>
<MenuItem value='2345678901'>2345678901</MenuItem>
</Select>
</FormControl>
</div>
</div>
</div>
<FormControl fullWidth className="form-control">
<InputLabel htmlFor="reason-field-value" shrink>Reason for Credit
</InputLabel>
<TextField
id="reason-field-value"
multiline
rows="8"
margin="normal"
/>
</FormControl>
</div>
twitter-bootstrap-3 material-ui
edited Jan 2 at 16:05
dschu
2,39821936
asked Jan 2 at 16:00
user2320476user2320476
50011440
First of all, your component contains way too much information. Try to split your code into smaller components, that are easier to maintain. (For example, extract the details into it's own component). Regarding the cols: You can define different width for each viewport.col-xs-12 col-sm-6= 12 cols in viewportxs, 6 cols in viewportsm
– dschu
Jan 2 at 16:10
add a comment |
I am looking at a react code with material UI and trying to understand
the className used like below.
Can you explain these two lines please? I thought you can only have a maximum of 12 columns.
<div className="col-xs-12 col-sm-6 col-md-6 col-lg-6 ">
<div className="col-xs-12 col-sm-12 col-md-12 col-lg-12">
I want to reduce the width of the Invoice covered and Reason for credit
which means reducing the width of the column. How can I achieve this?
<div className="row customer-form-layout">
<div className="col-xs-12 col-sm-6 col-md-6 col-lg-6 ">
<div className="customer-form-details">
<span>{this.props.customer.CustomerName}</span><br/>
<span>Customer #: <b>{this.props.customer.biCustomerNumber }</b></span>
</div>
<div className="covered-section">
<div className="row">
<div className="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<FormControl className="form-control">
<InputLabel htmlFor="invoice-number01" shrink>Invoice
Covered*</InputLabel>
<Select
value=''
inputProps={{
name: 'Test-number02',
id: 'Test-number02',
}}
>
<MenuItem value='1234567890'>1234567890</MenuItem>
<MenuItem value='2345678901'>2345678901</MenuItem>
</Select>
</FormControl>
</div>
</div>
</div>
<FormControl fullWidth className="form-control">
<InputLabel htmlFor="reason-field-value" shrink>Reason for Credit
</InputLabel>
<TextField
id="reason-field-value"
multiline
rows="8"
margin="normal"
/>
</FormControl>
</div>
twitter-bootstrap-3 material-ui
edited Jan 2 at 16:05
dschu
2,39821936
asked Jan 2 at 16:00
user2320476user2320476
50011440
I am looking at a react code with material UI and trying to understand
the className used like below.
Can you explain these two lines please? I thought you can only have a maximum of 12 columns.
<div className="col-xs-12 col-sm-6 col-md-6 col-lg-6 ">
<div className="col-xs-12 col-sm-12 col-md-12 col-lg-12">
I want to reduce the width of the Invoice covered and Reason for credit
which means reducing the width of the column. How can I achieve this?
<div className="row customer-form-layout">
<div className="col-xs-12 col-sm-6 col-md-6 col-lg-6 ">
<div className="customer-form-details">
<span>{this.props.customer.CustomerName}</span><br/>
<span>Customer #: <b>{this.props.customer.biCustomerNumber }</b></span>
</div>
<div className="covered-section">
<div className="row">
<div className="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<FormControl className="form-control">
<InputLabel htmlFor="invoice-number01" shrink>Invoice
Covered*</InputLabel>
<Select
value=''
inputProps={{
name: 'Test-number02',
id: 'Test-number02',
}}
>
<MenuItem value='1234567890'>1234567890</MenuItem>
<MenuItem value='2345678901'>2345678901</MenuItem>
</Select>
</FormControl>
</div>
</div>
</div>
<FormControl fullWidth className="form-control">
<InputLabel htmlFor="reason-field-value" shrink>Reason for Credit
</InputLabel>
<TextField
id="reason-field-value"
multiline
rows="8"
margin="normal"
/>
</FormControl>
</div>
twitter-bootstrap-3 material-ui
twitter-bootstrap-3 material-ui
edited Jan 2 at 16:05
dschu
2,39821936
asked Jan 2 at 16:00
user2320476user2320476
50011440
edited Jan 2 at 16:05
dschu
2,39821936
asked Jan 2 at 16:00
user2320476user2320476
50011440
edited Jan 2 at 16:05
dschu
2,39821936
edited Jan 2 at 16:05
dschu
2,39821936
edited Jan 2 at 16:05
dschu
2,39821936
2,39821936
asked Jan 2 at 16:00
user2320476user2320476
50011440
asked Jan 2 at 16:00
user2320476user2320476
50011440
asked Jan 2 at 16:00
user2320476user2320476
50011440
50011440
First of all, your component contains way too much information. Try to split your code into smaller components, that are easier to maintain. (For example, extract the details into it's own component). Regarding the cols: You can define different width for each viewport.col-xs-12 col-sm-6= 12 cols in viewportxs, 6 cols in viewportsm
– dschu
Jan 2 at 16:10
add a comment |
First of all, your component contains way too much information. Try to split your code into smaller components, that are easier to maintain. (For example, extract the details into it's own component). Regarding the cols: You can define different width for each viewport.col-xs-12 col-sm-6= 12 cols in viewportxs, 6 cols in viewportsm
– dschu
Jan 2 at 16:10
First of all, your component contains way too much information. Try to split your code into smaller components, that are easier to maintain. (For example, extract the details into it's own component). Regarding the cols: You can define different width for each viewport.
col-xs-12 col-sm-6 = 12 cols in viewport xs, 6 cols in viewport sm– dschu
Jan 2 at 16:10
First of all, your component contains way too much information. Try to split your code into smaller components, that are easier to maintain. (For example, extract the details into it's own component). Regarding the cols: You can define different width for each viewport.
col-xs-12 col-sm-6 = 12 cols in viewport xs, 6 cols in viewport sm– dschu
Jan 2 at 16:10
add a comment |
1 Answer
1
active
oldest
votes
For bootstrap 3, a col-xs-12 class means, below xs (<768px), the element will take 12 columns.
While col-sm-6, means above sm (≥768px), it will take up 6 columns.
Therefore, this div
<div className="col-xs-12 col-sm-6 col-md-6 col-lg-6 ">
will take full width below 768px. However, when it reaches 768px and above, it will take 50% width.
Which also means, it is completely equivalent to this:
<div className="col-xs-12 col-sm-6">
Reference: https://getbootstrap.com/docs/3.4/css/#grid-options
answered Jan 2 at 16:45
Liren YeoLiren Yeo
1,1701520
Great. How do I now reduce the width of this column?
– user2320476
Jan 2 at 17:04
A full 12-columns width would be the width of.covered-sectiondiv. Adjust the width of that class. Unless you can actually provide me with the CSS, or else I can't actually provide the exact solution.
– Liren Yeo
Jan 2 at 17:22
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
});
}
});
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%2f54009408%2freducing-the-width-of-a-column-and-understanding-css-used%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
For bootstrap 3, a col-xs-12 class means, below xs (<768px), the element will take 12 columns.
While col-sm-6, means above sm (≥768px), it will take up 6 columns.
Therefore, this div
<div className="col-xs-12 col-sm-6 col-md-6 col-lg-6 ">
will take full width below 768px. However, when it reaches 768px and above, it will take 50% width.
Which also means, it is completely equivalent to this:
<div className="col-xs-12 col-sm-6">
Reference: https://getbootstrap.com/docs/3.4/css/#grid-options
answered Jan 2 at 16:45
Liren YeoLiren Yeo
1,1701520
Great. How do I now reduce the width of this column?
– user2320476
Jan 2 at 17:04
A full 12-columns width would be the width of.covered-sectiondiv. Adjust the width of that class. Unless you can actually provide me with the CSS, or else I can't actually provide the exact solution.
– Liren Yeo
Jan 2 at 17:22
add a comment |
For bootstrap 3, a col-xs-12 class means, below xs (<768px), the element will take 12 columns.
While col-sm-6, means above sm (≥768px), it will take up 6 columns.
Therefore, this div
<div className="col-xs-12 col-sm-6 col-md-6 col-lg-6 ">
will take full width below 768px. However, when it reaches 768px and above, it will take 50% width.
Which also means, it is completely equivalent to this:
<div className="col-xs-12 col-sm-6">
Reference: https://getbootstrap.com/docs/3.4/css/#grid-options
answered Jan 2 at 16:45
Liren YeoLiren Yeo
1,1701520
Great. How do I now reduce the width of this column?
– user2320476
Jan 2 at 17:04
A full 12-columns width would be the width of.covered-sectiondiv. Adjust the width of that class. Unless you can actually provide me with the CSS, or else I can't actually provide the exact solution.
– Liren Yeo
Jan 2 at 17:22
add a comment |
For bootstrap 3, a col-xs-12 class means, below xs (<768px), the element will take 12 columns.
While col-sm-6, means above sm (≥768px), it will take up 6 columns.
Therefore, this div
<div className="col-xs-12 col-sm-6 col-md-6 col-lg-6 ">
will take full width below 768px. However, when it reaches 768px and above, it will take 50% width.
Which also means, it is completely equivalent to this:
<div className="col-xs-12 col-sm-6">
Reference: https://getbootstrap.com/docs/3.4/css/#grid-options
answered Jan 2 at 16:45
Liren YeoLiren Yeo
1,1701520
For bootstrap 3, a col-xs-12 class means, below xs (<768px), the element will take 12 columns.
While col-sm-6, means above sm (≥768px), it will take up 6 columns.
Therefore, this div
<div className="col-xs-12 col-sm-6 col-md-6 col-lg-6 ">
will take full width below 768px. However, when it reaches 768px and above, it will take 50% width.
Which also means, it is completely equivalent to this:
<div className="col-xs-12 col-sm-6">
Reference: https://getbootstrap.com/docs/3.4/css/#grid-options
answered Jan 2 at 16:45
Liren YeoLiren Yeo
1,1701520
edited Jan 2 at 16:50
answered Jan 2 at 16:45
Liren YeoLiren Yeo
1,1701520
answered Jan 2 at 16:45
Liren YeoLiren Yeo
1,1701520
answered Jan 2 at 16:45
Liren YeoLiren Yeo
1,1701520
1,1701520
Great. How do I now reduce the width of this column?
– user2320476
Jan 2 at 17:04
A full 12-columns width would be the width of.covered-sectiondiv. Adjust the width of that class. Unless you can actually provide me with the CSS, or else I can't actually provide the exact solution.
– Liren Yeo
Jan 2 at 17:22
add a comment |
Great. How do I now reduce the width of this column?
– user2320476
Jan 2 at 17:04
A full 12-columns width would be the width of.covered-sectiondiv. Adjust the width of that class. Unless you can actually provide me with the CSS, or else I can't actually provide the exact solution.
– Liren Yeo
Jan 2 at 17:22
Great. How do I now reduce the width of this column?
– user2320476
Jan 2 at 17:04
Great. How do I now reduce the width of this column?
– user2320476
Jan 2 at 17:04
A full 12-columns width would be the width of
.covered-section div. Adjust the width of that class. Unless you can actually provide me with the CSS, or else I can't actually provide the exact solution.– Liren Yeo
Jan 2 at 17:22
A full 12-columns width would be the width of
.covered-section div. Adjust the width of that class. Unless you can actually provide me with the CSS, or else I can't actually provide the exact solution.– Liren Yeo
Jan 2 at 17:22
add a comment |
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.
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%2f54009408%2freducing-the-width-of-a-column-and-understanding-css-used%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
First of all, your component contains way too much information. Try to split your code into smaller components, that are easier to maintain. (For example, extract the details into it's own component). Regarding the cols: You can define different width for each viewport.
col-xs-12 col-sm-6= 12 cols in viewportxs, 6 cols in viewportsm– dschu
Jan 2 at 16:10