My Problem
I am new to Bootstrap. My boss wants me to replicate the following screen ( or as close as possible ):
Desired Layout
I have tried to do this myself using:
<div class = "row">
and
<div class = "col-lg-x">
... but I can't get the rows and columns right! So frustrating. I have tried and tried and tried.
Does anyone have any ideas how I would replicate the following layout easily?
Thank you so much for looking at my problem.
Regards,
John
Not sure if it's the way that you have put your code on to SO however it should look something like this
<div class="row">
<div class="col-sm-4">
4
</div>
<div class="col-sm-8">
<div class="row">
<div class="col-12 col-sm-12">
12
<div class="row">
<div class-"col-sm-4">
4
</div>
<div class="col-sm-8">
8
</div>
</div>
</div>
Edit: You may also wish to take a look at nesting to help you achieve this https://getbootstrap.com/docs/4.0/layout/grid/
Related
I am following a web application tutorial on Youtube and come into a question. As you can see from the code
<div class="card card-body">
...
</div>
The output is like
If I put card and card-body in different , the output would be strange.
<div class="card">
<div class="card-body">
...
</div>
</div>
Since I am new to Bootstrap5, this case makes me very confused. Of course the first one is the one I want but I still want to know the reason behind it.
Could someone please explain it? Thank you.
It can be a css rules that overwite the bootstrap with !important.
card(parent) and card-body(child) is the correct way according to docs so you should do it like that.
<div class="card">
<div class="card-body">
...
</div>
</div>
For some reason, bootstrap is only allowing me to use the "col-sm" class. If I enter anything else into my code, including the "xs" class, the columns are stacked on top of one another. This is my code:
<div class="container-fluid">
<div class="row">
<div class="col-xs-9">
<div class="well">something here</div>
</div>
<div class="col-xs-3">
<div class="well">something here</div>
</div>
</div>
</div>
I have ensured that the appropriate CSS, JS, and jQuery files are linked (hence why the "col-sm" class works), and only have my own personal CSS style-sheet linked in addition to them (which does not predefine any width or height for any element). Furthermore, I am viewing my work on the latest version of Mozilla Firefox.
Edit: I have closed the div with the class "fluid-container", it still produces the same problem. That is, instead of the two columns appearing on the same row, the two columns are stacked on top of one another. For some reason, the only class that works is "col-sm"--any other class, including the "xs", just lines the columns atop of one another.
Your code is correct only the thing u missed out is the last '>' closing of div tag.
replace:
<div class="container-fluid"
with:
<div class="container-fluid">
Please fix your div first <div class="container-fluid" missing >
See below corrected format
<div class="container-fluid">
<div class="row">
<div class="col-xs-9">
<div class="well">something here</div>
</div>
<div class="col-xs-3">
<div class="well">something here</div>
</div>
</div>
</div>
Use the latest stable version 3.7.7 of bootstrap and this problem will be solved. You can download it from here. If you don't want to use the newest version, you can try to use col-sm-9 instead of col-xs-9 and col-sm-3 instead of col-xs-3, it will also solve the problem.
I want to know if there is any problem if we do the following using bootstrap 3 with the html structure?
After reading the documentation and some examples all of them recommend doing the following structure
<div class="row">
<div class="col-lg-4" ></div>
<div class="col-lg-4" ></div>
<div class="col-lg-4" ></div>
</div>
but we are using angular in our application and the sizes of each panel could change and also each panel have it's own controller that knows when to expand or not. I already thought about a controller or an state manager but i don't know at the moment the final ui definitions.
So my question is is any problem with the following structure?
<div class="row">
<div>
<div class="col-lg-4" ></div>
</div>
<div>
<div class="col-lg-4" ></div>
</div>
<div>
<div class="col-lg-4" ></div>
</div>
</div>
That structure is fine. However there is a mistake in your class names. It should be 'col-lg-4'.
It may also pay to use some other col-- classes to handle what happens on smaller devices/screen sizes
EDIT:
After re-reading the question I see that they won't have fixed sizes. Perhaps consider implementing a function to assign different sizes to different elements.
E.G.
<div class="row">
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
</div>
Now you can reference the divs with the different id's and do something like this:
//if you want a large middle column with two smaller columns on the side
$('#one).addClass('col-lg-2');
$('#two').addClass('col-lg-8');
$('#three).addClass('col-lg-2');
note: I'm using jquery for that.
The grid class should be col-lg-4 instead of col-lg 4.
http://getbootstrap.com/examples/grid/
I'm somewhat new to Bootstrap 3 so forgive me if this seems far to obvious.
I've created a jsfiddle to start things off with which will hopefully help understand what I'm trying to ask: http://jsfiddle.net/dwdhj/2/
<div class="container">
<div class="row">
<div class="col-sm-8">
8
<div class="row">
<div class="col-sm-4">
4 - but want to appear as 6
</div>
<div class="col-sm-4">
4 - but want to appear as 6
</div>
</div>
</div>
<div class="col-sm-4">
4 - full height of screen
<br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>
</div>
</div>
When a designer uses a grid - lets say from http://gridpak.com/ - they will stick to that throughout the whole design. If they were to create a right hand panel to be the full height of the screen it would take up perhaps 4 grids. This leaves us with 8 - good math I know.
My issue: If I create a new row inside that initial 8 - so that I can make everything in that container nice and fluid - it is essentially creating another 12 column grid. This new 12 column grid won't actually match up to the grid the designer was originally working from.
My Question: Can I make it so the grid remains the same within the initial 8 column div I used - so I can only use a maximum of 8 columns, or is there something else I should be doing here? Perhaps its something the designer needs to be doing?
I did see some examples of this with row-fluid on Bootstrap 2 but that has been done away with - for good reasons from what I've read.
Hopefully that has made enough sense - let me know if anything needs clarifying.
After doing some more research I found that a combination of using push/pull I was able to get the result I was after.
Review the updated jsfiddle link http://jsfiddle.net/dwdhj/3/
<div class="container">
<div class="row">
<div class="col-sm-12">
Header
</div>
</div>
<div class="row">
<div class="col-sm-4 col-sm-push-8">
4 - full height of screen
<br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>
<div class="col-sm-8 col-sm-pull-4">
8
</div>
<div class="col-sm-4 col-sm-pull-4">
4
</div>
<div class="col-sm-4 col-sm-pull-4">
4
</div>
<div class="col-sm-4 col-sm-pull-4">
4
</div>
<div class="col-sm-4 col-sm-pull-4">
4
</div>
<div class="col-sm-3 col-sm-pull-4">
3
</div>
<div class="col-sm-2 col-sm-pull-4">
2
</div>
<div class="col-sm-3 col-sm-pull-4">
3
</div>
</div>
<div class="row">
<div class="col-sm-12">
Footer
</div>
</div>
</div>
Essentially my trouble was creating new rows all the time when what I needed to do was keep adding them next to each other and then when they reach the "sidebar" I add a "push" in to wrap it down to where the next "row" would have started.
Happy to be advised on a better way of doing this but it works for now.
I answered this back on my comments thread, essentially I took a different approach
http://jsfiddle.net/Yjn9V/1/
<div class="container">
<div class="row">
<div class="col-sm-12">Header</div>
</div>
<div class="row">
<div class="col-sm-4 col-sm-push-8">4 full height
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</div>
<div class="col-sm-8 col-sm-pull-4">
<div class="row">
<div class="col-sm-12">12</div>
</div>
<div class="row">
<div class="col-sm-6">6</div>
<div class="col-sm-6">6</div>
</div>
<div class="row">
<div class="col-sm-6">6</div>
<div class="col-sm-6">6</div>
</div>
<div class="row">
<div class="col-sm-5">5</div>
<div class="col-sm-2">2</div>
<div class="col-sm-5">3</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">footer</div>
</div>
</div>
I would try this, as you're doing way too much push/pull on things where you could just do it once on a wrapper container, as you have a very simple layout.
Check it out, let me know here or back on my comments thread if this works or if you have quesitons.
I had the exact same problem as you. I came up with a solution that is either implemented with pure CSS (compiled SCSS, that is), hard-coded, or javascript - I put both of them below.
The idea for is the following: you have the percentage width of a div A in terms of the container and want to know the percentage for div B, which is descendent of A. There's an easy calculation you can do to figure out the percentage of div B in terms of the container - B/A*100, if I'm not mistaken. The calculation itself is in the comment of the CSS version (link to gist is below).
Please note that, for this to work, divs that descend from A and contain B shouldn't modify the width (much like bootstrap itself).
Solution based on CSS (SCSS, to be exact), that only accepts two levels of grid:
https://gist.github.com/royalsflush/8403942
Here I just loop through the possibilities of parent and child (hence the limitation of two levels).
And a JS solution that uses the calculations I did for the first solution and a tree traversal to adjust all the nested components of the grid.
demo: http://bootply.com/105852
and source: https://gist.github.com/royalsflush/8422780
For this, I used the same idea as the CSS solution, except I use recursion on it. Let me give an example to clarify: suppose you have A and B again, and also a div C, that descends from B. If you perform the calculation I stated above for B, you will have B in terms of the container and C in terms of B, which is the exact same situation we were with A and B. Hope that is clear, not my best explanation.
Both have a demo and plenty of comments, but please let me know if you need further clarification.
Hope it helps!
I started to use Twitter bootstrap for this application that I am working on.
I read the documentation about nesting rows in both fixed grid system and in fluid one.
Now, I want to do something like this
So of course I could do something like this
<div class="container">
<div class="row">
<div class="span 12">red</div>
<div class="row">
<div class="span 3">yellow</div>
<div class="span 9">green</div>
</div>
</div>
</div>
and I think I would get what I want. But I am wondering what are the consequences of doing
<div class="container">
<div class="row">
<div class="span 12">red</div>
</div>
<div class="row">
<div class="span 3">yellow</div>
<div class="span 9">green</div>
</div>
</div>
I don't see any difference now in my browser but I am wondering what will happen if I include multiple row elements in single container tag. Is the row-nesting the only proper way to create something like I showed? What is the difference between those two implementations of my design, so to speak?
The second version is more correct. But both work. The difference is how it responds when the page is re-sized. The second version will shrink and react better
However if you want the containers to match the above image you need to use class="container-fluid" and class="row-fluid"
Also remove the spaces between the spans and numbers
class="span 3"
Should say
class="span3"