I've declared three div elements on a page and want to re-position the last div element so that it is one character closer to the second div on the same line.
What I have tried is editing the col values on the third div to be lower values, which I believed would push the div closer to the second div:
class="col-xs-2 col-sm-2 col-md-1"
But this doesn't seem to have any effect on the position of the third column.
Question:
How can I re-position the 3rd div element to move in closer to the 2nd div "Course Code:"?
I also tried increasing the col values of the 3rd div which puts the text onto a new line. Which is not the required positioning:
class="col-xs-7 col-sm-7 col-md-6 nwrp"
The three div controls as defined as follows in my asp page:
<div class="row mrgn">
<div class="col-xs-8 col-sm-8 col-md-5"><h5><strong>Course Name:</strong></h5></div>
<div class="col-xs-3 col-sm-3 col-md-2 nwrp"><h5><strong>Course Code:</strong></h5></div>
<div runat="server" id="OfferStatusTitle" class="col-xs-3 col-sm-3 col-md-2 nwrp"><h5><strong>Offer Status:</strong></h5></div>
<div class="col-xs-1 col-sm-1 col-md-3"></div>
</div>
And this is what the three columns look like at present:
Every column in bootstrap have 15px padding on left and right. You can remove that to make content look more close on left side.
And you can't have more than 12 column in same row.
And if you want you can make more precise add new div inside second div and in that div you will have 12 columns so you can specify more precisely.
<div class="col-xs-8 col-sm-8 col-md-5"><h5><strong>Course Name:</strong></h5></div>
<div class="col-xs-3 col-sm-3 col-md-2 ">
<div class='row'>
<div class='col-xs-6 nwrp'>
<h5><strong>Course Code:</strong></h5>
</div>
<div runat="server" id="OfferStatusTitle" class="col-xs-6 nwrp"><h5><strong>Offer Status:</strong></h5>
</div>
</div>
</div>
<div class="col-xs-1 col-sm-1 col-md-3"></div>
It is true that you can have 12 column in one row but inside any div tag you can have another 12 columns. And use row class for first inner class else there will be 30px padding on left and right for first and last div tag respectively.
row has -15px margin on left and right.
Actually you need to increase the third column width means split the column values as below:
<div class="row">
<div class="col-md-12 ">
<div class="col-md-3">Course Name:</div>
<div class="col-md-2">Course Code:</div>
<div class="col-md-7">Offer Status:</div></div>
</div>
Refer this link you can find more option.
Related
I'm having issue with my labels overlapping within my div row
My bootstrap looks as follows
<div class="col-xs-12 col-md-12 col-lg-12">
<div class="row">
<div class="col-xs-12 col-md-12 col-lg-2 ">
<div class='card'>
<div class='card-block'
<div class="row text-nowrap">
<label class="control-label col-xs-12 col-md-12 col-lg-6" for="FinalMonthEnd">Final Month End:</label>
<kendo-dropdownlist class="col-xs-11 col-md-11 col-lg-5" id="FinalMonthEnd">
</kendo-dropdownlist>
</div>
</div>
</div>
<div class="col-xs-12 col-md-12 col-lg-10 ">
<kendo-grid [kendoGridBinding]='grid' >
</kendo-grid>
</div>
</div>
</div>
I had to add this to my css as the label text is large so when it gets resized the text will go to the next line one letter at a time.
.text-nowrap {
white-space: nowrap;
}
When the page is resized down before it gets to the col-md threshold the two start merging together and overlapping each other and looks terrible. How can I prevent this so that each stay separate?
(1) <div class='card-block' is missing a >.
(2) Try applying form-group class instead of row to parent div of label and kendo-dropdownlist.
(3) Try adding form-control class to kendo-dropdownlist.
(4) Class prefix col-xs is dropped in Bootstrap v4.0 and is no more recognizable. You should use col- instead (although it will not make difference to your code, just mentioned it for info).
Hope this can help with some direction.
I'm trying to follow the guide here: http://getbootstrap.com/css/
and I just can't seem to understand what the "row" class is doing. I was trying some of the examples in the guide such as:
<div class="row">
<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
I tried it with the row div and without it, and I was trying to place everything inside a container, and there was no difference at all, they all looked the same.
Could anyone explain what the meaning of the "row" class is ?
In Bootstrap, the "row" class is used mainly to hold columns in it. Bootstrap divides each row into a grid of 12 virtual columns. In the following example, the col-md-6 div will have the width of 6/12 of the "row"s div, meaning 50%. The col-md-4 will hold 33.3%, and the col-md-2 will hold the remaining 16.66%.
<div class="row">
<div class="col-md-6"></div>
<div class="col-md-4"></div>
<div class="col-md-2"></div>
</div>
I like to think of the row as a container that can contain X many columns equal to 12. You would use the row class to separate different stacked element (columns).
The columns as you defined them col-xs-12 col-md-8 mean that on a medium sized screen and above the div will span 8/12 of the page and on a xs small screen (mobile) it will span the full 12 columns. This works with the col-xs-12 col-md-4 class because 8 + 4 = 12.
If your entire site is split this way (8/12 and 4/12) then all you really would need is one row! Other wise you'd create another row for different column width. An example would be:
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-8"></div>
<div class="col-xs-12 col-sm-4"></div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-4"></div>
<div class="col-xs-12 col-sm-2"></div>
<div class="col-xs-12 col-sm-6"></div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-3"></div>
<div class="col-xs-12 col-sm-3"></div>
<div class="col-xs-12 col-sm-3"></div>
<div class="col-xs-12 col-sm-3"></div>
</div>
</div>
The container class is used to create a nice margin around your entire site, but if you have a portion of your site you want to span across the entire width, you would need to close the container and create a container-fluid class. Then create another container to get the margin back. Hope that all makes since! Just how I think about it as.
The difference can be seen here with row class. Row like container is a class applied to the element.
P.S: run the snippet in full view
.color {
background: #cfcfcf
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />
<div class='color container'>
Container only
</div>
<p>
<div class='color container-fluid'>
<div class=row>
Fluid Container & row
</div>
</div>
<p>
<div class='color container'>
<div class=row>
Container & Row
</div>
</div>
I have some html content that I want to align and distribute as two columns beneath each other, of equal content.
But on mobile divices, I'd like the content to be stacked as one column.
How could I achieve this using bootstrap css?
I tried as follows, which did not work:
<div class="row">
<div class="col-lg-2">
//the content to distribute
</div>
</div>
Additionally, I cannot use css columns as I have to support IE8+9.
<div class="row">
<div class="col-xs-12 col-sm-6">
//first half
</div>
<div class="col-xs-12 col-sm-6">
//second half
</div>
</div>
The col-xs-12 tell the column to be at full screen when using mobile phones (or small screens).
The col-sm-6 tell the column to be at half size of the row when using any higher size devices.
I suggest reading bootstrap docs
----Edit----
If you want to use columns css- also for ie8,9 you can check this js plug in:
http://welcome.totheinter.net/columnizer-jquery-plugin/
hi you can use this i think please take a look
.tt{
border : 2px solid grey;
}
<div class="container">
<div class="row-fluid">
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 tt">
first half
</div>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 tt">
second half
</div>
</div>
</div>
and here is the working demo code..
Demo code
I have html markup like below,
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
Some contents
</div>
<div class="col-lg-1 col-md-1 col-sm-1 col-xs-12" >
Some Content
</div>
<div class="col-lg-5 col-md-5 col-sm-4 col-xs-12" >
Some Content
</div>
<div class="col-lg-2 col-md-2 col-sm-3 col-xs-12 text-right" >
<div class="company-add-btn">+ Add more companies</div>
</div>
</div>
In large display's it works fine as single row structuring four divs in columns.
But in small displays I like to re-arrange the layout,
First div will get a complete row with full width
Third div will come before 2nd div and take a complete row with center aligned
2nd and 4th div will take a complete row with 2nd row stays at left, and 4th floated right.
Using bootstrap col-md-pull-* or col-md-push-* will just do the reordering inside a row. So that will not work.
One possible solution will be duplicating the markup for each media break points, but Isn't there any better approach then this ?
Can anyone suggest any way ? or point me a good place to start looking for solution ?
I recommend (even though it's dirty) adding your view twice, once in a
<div class="hidden-lg hidden-md hidden-sm">Your content for the XS-grid.</div>
and for the other 'layout
<div class="hidden-xs">Your content for everything but XS-grid.</div>
Hope that helps (looking forward to a better solution ;)).
what you are talking is placing third column before second column and assign it the complete width, bootstrap will not do this.
This can be done only if these columns are to be shown as a single row with pull-let and pull-right. The only option you have is to duplicate the markup in this case, or write down your own css for placing third column before the second one(but this would be not a good idea).
You could hide the second div on small screens; the third div would then be in second position. You would then have to duplicate just the second div after the third and show on small screens only, then do the pull-left and right on the last two divs. Something similar this might work (this example is for small):
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
Some contents 1
</div>
<div class="col-lg-1 col-md-1 hidden-sm col-xs-12" >
Some Content 2
</div>
<div class="col-lg-5 col-md-5 col-sm-12 col-xs-12" >
Some Content 3
</div>
<div class="visible-sm col-sm-9 lefty" >
Some Content 2 - duplicate
</div>
<div class="col-lg-2 col-md-2 col-sm-3 col-xs-12 righty" >
<div class="company-add-btn">+ Add more companies</div>
</div>
</div>
The use of col-xs-12 is really unnecessary in this case, and in most cases, the column will be 100% below the last col class used.
DEMO: https://jsbin.com/nuhoba
It would be better if you had a graphic to describe what you want. If I followed correctly, then you would order your html in the order it is on a small viewport then -- if the column is in the same .row and the .row is no more than 12 columns, you can push and pull left and right. You have to add up to 12 columns per row at any given column class, I've used col-sm-X for simplicity. If you play around with col-md and/or large that means that you have to use those columns on the others but it need to add to 12 at that min-width.
HTML:
<div class="container">
<div class="row">
<div class="col-sm-3">
A
</div>
<div class="col-sm-4 col-sm-push-2 text-center-xs">
C
</div>
<div class="col-sm-2 col-sm-pull-4">
B
</div>
<div class="col-sm-3 text-right">
<div class="company-add-btn">+ D</div>
</div>
</div>
</div>
CSS
#media (max-width:767px) {
.text-center-xs {text-align:center;}
}
I am migrating a project of mine from bootstrap 2 to bootstrap 3. Now, I am having some problem with the grid layout that I can't understand. I have a col-md-12 and I wanna add 3 columns of equal width in this larger div. Logically, the 3 columns should each be col-md-4. However, when I add the 3 columns (divs) of class col-md-4, they don't fit and one of them gets pushed down and some space is left at the end after the 2nd one.
Please someone help me understand something that I may be missing. Thank you.
It sounds like the issue is padding. Bootstrap automatically adds padding when you have nested col-xx-# classes. If you have col-md-4 as a direct child of a col-md-12 bootstrap will add padding and your third col-md-4 will end up on a new line.
What you're doing:
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="col-md-4">
1/3
</div>
<div class="col-md-4">
2/3
</div>
<div class="col-md-4">
3/3
</div>
</div>
</div>
</div>
To address this, either add a new class="row" above your first col-md-4 or simply remove the col-md-12 like this:
<div class="container">
<div class="row">
<div class="col-md-4">
1/3
</div>
<div class="col-md-4">
2/3
</div>
<div class="col-md-4">
3/3
</div>
</div>
</div>
Bootstrap's column layout can only be 12 "units" in width.
To archieve columns of equal width, you should split 12 equally (sum of * in col-md-* should be 12).