I have the following code:
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label>Score Content:</label><label id="lbl_lblcontent"></label>
</div>
</div>
</div>
How do I put some padding between the 2 labels using bootstrap. Note that lbl_lblcontent is dynamically created.
In css you could something like this to add 10px padding to the right of only the first label...
.form-group label:first-child {
padding-right: 10px;
}
This is pretty archaic but you can simply add nbsp;'s if you do not want to go the CSS route.
Code:
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label>Score Content:</label> <label id="lbl_lblcontent"></label>
</div>
</div>
</div>
I need to specify that what I want (<b>19</b>, etc) is simultaneously
within class="elem" and class="main" (descending CSS combinator- space)
direct children (CSS > immediate child combinator) of class="numbers" > class="numbers_wrapper" > class="container cleared"
What is the correct way how can I combine all those 5 conditions?
I need to extract this info
<b>19</b>
<b>12</b>
<b>14</b>
<b>23</b>
<b>10</b>
from this pattern in the middle of a web page :
<div class="elem">
<div class="main">
<div class="draw_date" title="08.04.2018 21:00">08.04.2018 21:00</div>
<div class="draw">
8277
</div>
<div class="numbers">
<div class="numbers_wrapper">
<div class="container cleared">
<b>19</b>
<b>12</b>
<b>14</b>
<b>23</b>
<b>10</b>
<b class="extra">02</b>
</div>
</div>
<div class="controls">
<a class="no_visited iconic nonunderline" title="Проверить билет"
href="/5x36plus/check_bulletin">⚲</a>
</div>
</div>
<div class="prize ">
<div class="jackpot_wrapper">
<span></span>
<span>3000000
</span>
</div>
<div class="jackpot_wrapper">
<span></span>
<span>3437960
</span>
</div>
</div>
</div>
Is my guess how to do it right?
div.elem > div.main div.numbers > div.numbers_wrapper > div.container.cleared b
P.S. I am using Jsoup web scraping lib for java (like here in the middle), it grabs info from web page if I correctly specify target CSS selectors combination.
Yes, It's absolutely right. But as far as you've defined your class name differently you can also simply describe your css as .cleared b{}.
div.elem > div.main div.numbers > div.numbers_wrapper > div.container.cleared b{color: red;}
<div class="elem">
<div class="main">
<div class="draw_date" title="08.04.2018 21:00">08.04.2018 21:00</div>
<div class="draw">
8277
</div>
<div class="numbers">
<div class="numbers_wrapper">
<div class="container cleared">
<b>19</b>
<b>12</b>
<b>14</b>
<b>23</b>
<b>10</b>
<b class="extra">02</b>
</div>
</div>
<div class="controls">
<a class="no_visited iconic nonunderline" title="Проверить билет"
href="/5x36plus/check_bulletin">⚲</a>
</div>
</div>
<div class="prize ">
<div class="jackpot_wrapper">
<span></span>
<span>3000000
</span>
</div>
<div class="jackpot_wrapper">
<span></span>
<span>3437960
</span>
</div>
</div>
</div>
I understand that bootstrap .form-horizontal is the standard, and causes .form-group to behave like a row.
This means that <div class="row"> is not needed, but what is the downside to building my layout like this:
<div class="row">
<div class="col-md-6">
<div class="form-group">
<!--Content-->
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<!--Content-->
</div>
</div>
</div>
<div class="row">
<!--More Content-->
</div>
In this case (without a .form-xx modifier class as an ancestor), .form-group does nothing but add space at the bottom. From BS's CSS:
.form-group {
margin-bottom: 15px;
}
You can simply add that class to the row instead to achieve the same result, like:
<div class="row form-group">
<div class="col-md-6">
<!--Content-->
</div>
<div class="col-md-6">
<!--Content-->
</div>
</div>
CODE:
<div class="AllDiv">
<div class="LeftDiv">
<div class="LeftDiv2"> </div>
<div class="Photo"></div>
</div>
<div class="News">
.....
</div>
</div>
<div class="AllDiv">
<div class="LeftDiv">
<div class="LeftDiv2"> </div>
<div class="Photo"></div>
</div>
<div class="News">
.....
</div>
</div>
<div class="AllDiv">
<div class="LeftDiv">
<div class="LeftDiv2"> </div>
<div class="Photo"></div>
</div>
<div class="News">
.....
</div>
</div>
I would like make that last div, LeftDiv, get CSS display:none.
For it I use code: div.AllDiv .LeftDiv .LeftDiv2:last-child{display:none;}, but it is not working.
Also i try use i usediv.AllDiv:last-child div.LeftDiv .LeftDiv2{display:none;}, but it not work too.
Tell me please where error and how write it correctly?
LeftDiv2 is the first child if it's parent element, not the last child. However, you don't need the last child class at all. just remove :last-child. If you really wanted to select it using the pseudo class you would want :first-child in your current markup.
How to center a row (12 column) in Bootstrap 3 ?
I do not want to use the offset
I am using this way but not worked.
.col-centered{
float: none;
margin: 0 auto;
}
<div class="row" style="max-width: 300px;">
<div class="col-md-12 col-xs-12 col-centered">
<div class="input-group">
<div class="input-group-btn">
<button id="ItemForSearch" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
All Items
<span class="caret"></span>
</button>
<ul id="NormalSearch" class="dropdown-menu customize-dropdown-menu">
<li> Test 1 </li>
<li> Test 2 </li>
<li> Test 3 </li>
<li> Test 4 </li>
</ul>
</div>
<!-- /btn-group -->
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
</div>
</div>
Is there any solution to this? I have not an idea for this work.
Why not using the grid system?
The bootstrap grid system consist of 12 columns, so if you use the "Medium" columns it will have a 970px width size.
Then you can divide it to 3 columns (12/3=4) so use 3 divs with "col-md-4" class:
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
Each one will have 323px max width size.
Keep the first and the last empty and use the middle one to get your content centerd:
<div class="col-md-4"></div>
<div class="col-md-4">
<p>Centered content.</p>
</div>
<div class="col-md-4"></div>
What you are doing is not working, because you apply the margin: auto to the full-width column.
Wrap it in a div and center that one. E.g:
<div class="i-am-centered">
<div class="row">...</div>
</div>
.
.i-am-centered { margin: auto; max-width: 300px;}
http://www.bootply.com/93751
Its a cleaner solution anyway, as it is more expressive and as you usually don't want to mess with the grid.
I know this question was specifically targeted at Bootstrap 3, but in case Bootstrap 4 users stumble upon this question, here is how i centered rows in v4:
<div class="container">
<div class="row justify-content-center">
...
More related to this topic can be found on bootstrap site.
Instead of
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
You could just use
<div class="col-md-4 col-md-offset-4"></div>
As long as you don't want anything in columns 1 & 3 this is a more elegant solution. The offset "adds" 4 columns in front, leaving you with 4 "spare" after.
PS I realise that the initial question specifies no offsets but at least one previous answer uses a CSS hack that is unnecessary if you use offsets. So for completeness' sake I think this is valid.
you can use grid system without adding empty columns
<div class="col-xs-2 center-block" style="float:none"> ... </div>
change col-xs-2 to suit your layout.
check preview: http://jsfiddle.net/rashivkp/h4869dja/
We can also use col-md-offset like this, it would save us from an extra divs code. So instead of three divs we can do by using only one div:
<div class="col-md-4 col-md-offset-4">Centered content</div>
Simply use text-center class
<div class="row">
<div class="col-md-12">
<h3 class="text-center">Here Comes your Text</h3>
</div>
</div>
Add this to your css:
.row-centered {
text-align:center;
}
.col-centered {
display:inline-block;
float:none;
/* reset the text-align */
text-align:left;
/* inline-block space fix */
margin-right:-4px;
}
Then, in your HTML code:
<div class=" row row-centered">
<div class="col-*-* col-centered>
Your content
</div>
</div>
this peace of code can help you
<div class="row" style="display: flex; justify-content: center;"></div>
Try this, it works!
<div class="row">
<div class="center">
<div class="col-xs-12 col-sm-4">
<p>hi 1!</div>
</div>
<div class="col-xs-12 col-sm-4">
<p>hi 2!</div>
</div>
<div class="col-xs-12 col-sm-4">
<p>hi 3!</div>
</div>
</div>
</div>
Then, in css define the width of center div and center in a document:
.center {
margin: 0 auto;
width: 80%;
}
I use text-align-center in a row like this
<div class="row tac">
<h1>Centered content</h1>
</div>
<style>
.tac { text-align: center}
</style>
I use this peace of code and I have successeful
<div class="row center-block">
<div style="margin: 0 auto;width: 90%;">
<div class="col-md-12" style="top:10px;">
</div>
<div class="col-md-12" style="top:10px;">
</div>
</div>
Instead of trying to center div's, just add this to your local css.
.col-md-offset-15 {
margin-left: 12.4999999%;
}
which is roughly offset-1 and half of offset-1. (8.333% + 4.166%) = 12.4999%
This worked for me.