I’m experiencing two issues with a bootstrap layout on a website that I’m building and I’m wondering if someone can point out where I’m going wrong. I have put my site live on a sub domain so that you can see the issue I am facing. It can be found here http://cefn.mywebsitebuild.co.uk//fixtures-results/first-team/
Issue one
The col-xs-12 fix-result div is floating outside the container and im unsure why. I also want this to align with the image see green line on my image
Issue two
The col-xs-12 match-sponsor div is also floating outside the container and I’m unsure why
I have uploaded my page source http://www.bootlint.com/ and its tells me that there are problems with your code.
Can someone please tell me what I can do to get this working?
Thanks
Paul
You may not want to adjust div's for that one image. I would strongly recommend to leave current bootstrap settings. Instead if you want to fill div with that image, add this attribute to parent div of that image.This way image would be aligned with rest of your divs.
style="
padding: 0px 0px;
"
You nest your rows differently. This is the easiest fix:
<!-- This is your very first row -->
<div class="row">
<div class="col-md-12">
<div class="row"> <!-- INSERT ROW HERE -->
<h4 class="heading-mini">First Team Fixtures & Results</h4>
<img src="/media/1014/img_5507.jpg?crop=0,0.24305557250976545,0.0000000000000007579122514774,0.33194442749023489&cropmode=percentage&rnd=131162832050000000" class="img-responsive team-photo" alt="" title="">
<p class="photo-names">Back row (left to right): Paul Griffiths, Nathan Williams, Sam Roberts, Oliver Davies, Jamie Rawlinson</p>
</div> <!-- END ROW HERE -->
</div>
</div>
However, I wouldn't go so far to say that it's the best fix... sorry. (I would opt for removing a nested row/columns everywhere else... )
Issue 2 is the same thing. (Everywhere else you have nested row->col->row->col.)
Hi fixed this by adding the following to the parent row divs
<div class="row" style="margin-left:0px; margin-right:0px;">
The nested bootstrap validates and It now looks as i wanted (hope its correct)
I plan to create a class apply the margin fix and apply the class tto the parent row divs instead of using inline style.
Thanks
Related
code container_row_col
I am using bootstrap card with attribute like [container, row and col] to establish a horizontal flex container. But it doesnt work. I think the problem comes from [col] but i cant figure out what to do.enter image description here
enter code here
ok i solved my problem. The problem why i wasnt able to use my flex properties with "row" id was because after <div id"row"> i implemented another <div id"bear">. I must use the <div id"col> following <div id"row">. So what i did is to delete the <div id"bear"> and i implemented my id"bear" at the same div containing row, so <div id"row bear">.
Apparently with bootstrap we cant use a div between "row" and "col"(if we want to keep "row" as a flex) .
Hi im having trouble with some money number alignment. I want my data do be aligned to the left side of the columns BUT the numbers of the money have to look relative to each other like in the screenshot.
This screenshot is what I have atm:
This is what I want to do:
Here is my structure:
<tr>
<td style="text-align: left">name</td>
<td style="text-align: right">money</td>
<td style="text-align: center">date</td>
</tr>
And the only css atm that I use for positioning is setting the widht of every of those td's to 30%
At first I thought I could position them simply by putting a <p> in there that would align the content to the right and give the rest its relative widht, however that way would be possible but then I get a ball of js or jquery that I prefer not to have.
I have bootstrap installed but as of now I havent really touched it in this project except for the column grid positioning.
Does anyone have some kind of way to achieve what I am trying, or can someone push me in the right direction? Thanks in advance.
ADDITION: Semi complete code sample:
Codepen
The above code is the whole section the table is located in but I copied all css relative to the issue and not every single css class my problem is reconstructed there exactly even the random <p> tag I tried is in there.
You should use two columns:
<div class="row">
<div class="col-lg-6">List of money values</div>
<div class="col-lg-6">[Empty]</div>
</div>
And align text to right in the first one:
<p class="text-right">Your text.</p>
I'd like to ask can this code be correct from Bootstrap point of view? I expect the answer is yes. The question is about additional tag in between row and col(s).
<div class="row">
<something>
<div class="col-sm-6">
a
</div>
<div class="col-sm-6">
b
</div>
</something>
</div>
P.S. <something> has no css styles and that's a directive from AngularJS.
There is nothing wrong here, but there are better practices on using bootstrap.
Just take care of minus margins and clearfix, check if the style flow its ok.
By the way, you can use "comment directive" if u need to use that something tag just for angularJs directive.
From the Bootstrap docs..
Content should be placed within columns, and only columns may be
immediate children of rows.
The Bootstrap row has a negative margin to compensate for column padding. <something> doesn't specifically cause a problem in your example, but it's incorrect from a Bootstrap standpoint.
In that code, the something tag will simply be given the entire 12 column width of the row div. The internal elements will then be split into the relevant grids as long as there is nothing on the something tag which would interfere.
I think this should work fine, but as a sidenote I would normally write this as
<something>
<div class="row">
<div class="col-sm-6">
a
</div>
<div class="col-sm-6">
b
</div>
</div>
</something>
That way then gives you the option to add more rows etc into the something section easily if needed, and just aids readability in my humble opinion.
In this case row basically has the same purpose as col-md-12, but row will give you a margin of -15px to both left and right. To avoid a horizontal scroll-bar you can wrap the whole thing in a div with the class container.
looks good to me but i think according to your "something" element it can vary
When doing some research, I found that I have the exact same problem as here: Bootstrap columns not aligning correctly.
Except I cant use the same solution because the columns are being added with a ng-repeat loop and I cant predict their height or how many there will be.
And they are not stacking properly when one is a bit taller than the others, what would you recommend doing about this?
Relevant code (The controller just populates the products array):
<div class="col-sm-2 text-center" ng-repeat="product in products">
<img class="img-responsive img-center" src="{{product.image}}" alt="">
<h4>
{{product.name}}
</h3>
<p>Price: {{product.price}}€</p>
</div>
Thank you!
You could use a jQuery plugin like Masonry or Isotope which will make the images fit together regardless of height.. or you can try CSS 3 column-width like this example: http://www.codeply.com/go/Ndk9jqofgR
I just started out using twitter bootstrap and so far I've had a nice experience.
I'm currently having some trouble with positioning some .well elements the way I'd like them to be. Basically, this is what I'd like to see them
But this is what I get
The second row is clearly overlapping the first one because the elements are floated and the row is not wrapped around the .well element. I tried to apply .clearfix class but sadly it did not fix this.
Here's the html I'm currently using
<div class="container">
<div class="row offset-top-large">
<div class="col-md-9">
<a href="#" class="well well-lg">
</a>
</div>
</div>
<div class="row offset-top">
<div class="col-md-9">
<a href="#" class="well well-lg">
</a>
</div>
</div>
</div>
The .offset-top classes just add additional margins to the rows
.offset-top-large{
margin-top:100px;
}
.offset-top{
margin-top:20px;
}
I know that I can fix this on my own by manipulating the css, like, removing the floats, for example, but my question is - can I do this (get the desired output) without adding any additional CSS and possibly breaking the bootstrap functionality (resizing to smaller screens etc.).
Edit
Sorry, I had posted the code with the wrong well size class - I have corrected it now and here is a fiddle displaying my problem - http://www.bootply.com/127620
Thanks!
Based on the html and css you provided, this has nothing to do with floats. The problem is that you only have link elements in your rows, which by default are inline elements. Inline elements don't take up any space in their container elements. Try adding display:block or display:inline-block to the well elements.
The update to your question doesn't change a lot, you just need to increase the margin to account for the larger well size.
Try this:
.offset-top-large{
margin-top:100px;
}
.offset-top{
margin-top:50px;
}
Note: bantroth is also correct, adding display:block to your a tags is another solution.