I'm doing a form using Bootstrap 3.3.2 and I'm having problems aligning labels of diferent rows when the elements have diferent col-xs-*
Bootply example
What I need is the Bar and Faa labels to get aligned as well as the Bar's field with Faa's and Bor's ones maintaining the sizes and positions of the fields (Bar's field is double in size ).
Problem is that you're using both form-group and col-xs-* classes on the same div.
What you need is to wrap each form-group in another div with the col-xs-*.
I've fixed your code:
[Bootply fixed][1]
[1]: http://www.bootply.com/yDbREoFh2v
Related
This is my first website,my portfolio's URL https://sarthak-port.000webhostapp.com/Mportfolio.html
I have used webhost for free hosting.My problem is I did use bootstrap classes in my code but my page is not fully responsive to small screens.Can you guys suggest some ideas to do the same.
From watching it a little bit you use in the space "My Works" and the space My Profiles only classes col-xs-3 for each element. If you want your sections to rearrange in a responsive matter you should probably use classes like
class="col-lg-3 col-md-3 col-sm-6 col-xs-12"
This way in larger screen widths you should have four 4 elements in every row then in smaller screen widths only 2 elements in every row and finally in very small screens only 1 element in every row. By setting all elements to col-xs-3 you demand four elements in every row in all screens.
Furthermore for the last section your input fields don't use bootstrap classes to set to middle. One way would be to use
col-md-6 col-md-3-offset
This way you can send your input to center (3 grid cells empty+6 grid cells with your input and 3 grid cells empty again)
Else you could use something like this Twitter Bootstrap 3: How to center a block.
Bootstrap has many classes that you can use but it needs some digging.
How can I create columns like on attached image? I don't know how to set space between all columns. Please any hint.
You could add a margin to you columns. To have 4 columns, you'd start with a div with the class="row" then inside of that a div with the class=col-md-3 (or whichever size you want the 4 columns across), and give that div a margin-right of however many px's you want. Your final column (the 4th one in the row) probably should not have the margin-right if your design has the columns centered on the page. Bootstrap automatically gives columns 15px on either side. If you need to look up more information about how it works, the space between columns is called the "gutter" so you could search "gutter width" for example to find different ways of working with it.
I have a question about what would cause the following error in bootstrap 3.
Earlier I was writing some HTML and using CSS to style and was using bootstrap 3 for the rows and the columns.
Now I had everything inside of a fluid container and the container had margins etc. It has a standard header, and each row was split into two columns where each size has a width of 6 ie col-lg-6 .... inside of the container and then I had labels and inputs inside of my rows. Just a basic layout.
Now, whenever I tried to give a bottom border to each row I noticed that after inspecting the element the row was actually outside of the designated
columns / div.
However, when I changed the class from row to row-fluid it works perfectly. Why is this? Also, I noticed that if I make a clear-fix div after using row-fluid it fixes some apparent spacing issues, is this a requirement when using row-fluid or is my code just messed up somewhere.
Asking, because I thought row-fluid was only a bootstrap 2 and not a 3 thing, or am I mistaken?
I would include a fiddle showing you exactly what I'm talking about, but don't have the code available atm.
TWBS-2
http://getbootstrap.com/2.3.2/scaffolding.html#global
TWBS-3
http://getbootstrap.com/css/#grid-intro
The <div> nested under your <div class="row"> carry the attributes container width dependent on viewport size, including all gutters and padding.
Comparing TWBS-2 and TWBS-3, TWBS-3's grid framework is designated as fluid for all viewport sizes. .row-fluid is not documented as an option, but I would refer to their version history for those specific changes. If the version history of the <div class="row-fluid"> applies, then the gutters and padding of its children's <div> columns becomes full-width to the size of the container rather than fixed-width as designated by the rules of the TWB-S3 grid system without .row-fluid designation.
I'm using Zurb Foundation 5 with a 10-column grid. Their pricing table is made from an unstyled ul, I'm using four of them side by side, separated by columns. The two leftmost columns should contain one set of labels for the pricing tables, vertically aligned.
I'm struggling with how to correctly position the descriptive texts on the left. Placing them in an ul as well works for some screen sizes but not for all, because it's unrelated to how the text on the right breaks into lines. (Notice how the price container has a different height)
I've also tried to use a table tag (it's tabular data, after all) but wasn't successful to align it with the Foundation grid widths. Any idea how I could achieve proper alignment of the leftmost text elements with the corresponding vertical positions? Any help is appreciated.
I need to make a page which makes use of the 960 grid system which has a multi-row column. What I mean is I have three columns in a 16 column separated into 3-10-3 but on the last column, I need to make several divs for news feed, ads and also a "follow us on..." box which will all be aligned vertically. Refer to the picture for a visual pov.
Is there a way to this on 960gs? It seems like I can just pile divs of equal width in the column but I don't know. Help please
I've got it, turns out instead of using more divs with 'grid_x' classes within a grid column, you can just use normal divs with no classes and it will automatically align to the parent div.