There are few way organize the Bootstrap Grid, e.g.
<div id='footer'>
<div class='row'>
<div class='col-md-6 footer-left'>
or
<div id='footer' class='row'>
<div class='col-md-6 footer-left'>
or
<div id='footer'>
<div class='row'>
<div class='col-md-6'>
<div id='footer-left'>
Which one is more easy to maintain, assume you will add CSS positions (margin, padding etc) to the footer and footer-left
I know that some Bootstrap classes, such as container, row and the col-* have some predefined padding/margin already applied to them which helps lay the various elements out and collapse them down in the responsive view and so on.
Since the CSS of the ID takes priority over the CSS of the class, if I remember correctly, then doing something like your second option could result in some odd behavior. In general, I would go for the third option but it ultimately comes down to preference and if you feel you can work around any quirks that the other options might introduce.
<div id='footer'>
<div class='row'>
<div class='col-md-6'>
<div id='footer-left'>
Above code is best hierarchy to required output. If we follow container -> row -> col-md-* -> user-defines-class then it will make the div fully responsive and pure bootstrap related code. this hierarchy maintain perfect output of all divs regarding margin, padding and center auto
how does look your layout? bootstrap has a few solution for you and you can choose what you need! in HTML5 better solution to use <footer> tag instead <div class="footer">, 'class="container"' has fixed width with paddings, 'class="container-fluid"' has only paddings, class="row" has negative margins which overlapping positive container paddings etc...
Related
I am trying to get the sidebar to be on the left side of the content and instead the two components stack on top of each other.
the html I am using to style
<div class="bg-gray-600 flex flex-col max-h-min">
<div>
<app-course-info-home></app-course-info-home>
</div>
<div class="flex-row">
<div class="bg-blue-500 col-span-1" id="module-display">
<app-module-display></app-module-display>
</div>
<div class="bg-yellow-200 max-w-min flex-col" id="course-sidebar">
<app-course-sidebar></app-course-sidebar>
</div>
</div>
</div>
The Output
Picture of the output
I want the black box to be all the way to the left like it is, but the top to be the max-h-screen. Then I want the blue box to be to the right of the black sidebar
I see that you're making use of flex layouts - that's good and, once you have them figured out, makes sorting page layouts so much easier. I highly recommend using Angular-flex so that you don't have to play with styling directly, and it makes it easier to read.
An approximation of what you want - written using Angular-flex directives because that's what I can provide faster. Also, as I'm not entirely certain what each of your components relate to (other than the app-course-sidebar, I'm using placeholders).
<div class="bg-gray-600" fxLayout="column" fxLayoutAlign="start stretch">
<div>
<app-course-info-home></app-course-info-home>
</div>
<div fxLayout="row" fxLayoutAlign="stretch start">
<div class="bg-yellow-200" id="course-sidebar">
<app-course-sidebar></app-course-sidebar>
</div>
<div fxFlex class="bg-blue-500" id="module-display">
<app-module-display></app-module-display>
</div>
</div>
</div>
This layout should look something like
------------------------------------
[course info]
[sidebar] [-----module display-----]
------------------------------------
Note that the biggest change is in where your sidebar is within the template. Row layouts, without setting specific orders, are basic left-to-right one-after-another layouts. So if you want your sidebar on the left, put it as the first child.
The root div is column layout, so the course info div will be placed above the grouping div.
The grouping div is row layout, so the sidebar and module display child divs will be displayed besides each other.
The module display div makes use of fxFlex to make it take up whatever space it has available for width, pushing the sidebar to the left so much as it's able (control how severe that is by setting a min-width on that sidebar if you don't want it to look too squished).
In Bootstrap, must all content- even just a basic block of text placed in the middle of a page for example, be placed inside columns and rows. My website seems to work just fine doing this:
<div class="container-fluid">
<h2>My Heading</h2>
<p>This Is Content On the page</p>
</div>
Yet, I have been told it should be like this:
<div class="container-fluid">
<h2>My Heading</h2>
<div class="row">
<div class="col">I'm content inside the grid</div>
</div>
</div>
Yet, on some of the templates on the bootstrap site itself, they don't always use columns and rows.
I'm really confused...
Thanks
No, not all content needs to be placed in .rows.
.rows and .cols simply provide you with a customizeable grid system (i.e.: number of columns, gutter sizes, responsiveness breakpoints are a few of the things one could customize) aimed at displaying content differently at various page widths. That (and also the division of the row in 12 columns) are what it was designed for.
The only purpose of rows and cols is to divide the space differently at different page widths and to provide some minor padding (gutters). If you don't need that for a part of your content, don't use it. Whenever you have a section which you want displayed according to your own custom rules, you can simply include and style it as you want.
So, for example, this is perfectly valid and can be seen in various Bootstrap examples:
<div class="container">
<div class="row">
<div class="col">
... normal layout cols here
</div>
</div>
<div>
your custom stuff here. you need to provide responsiveness CSS rules for this content.
Out of the box, being a `<div>`, this will fill all the available width
if, for example, it was included in a `.container-fluid`,
it would span the entire browser window, at all screen widths.
</div>
<div class="row">
<div class="col">
... more normal layout here...
</div>
</div>
But whenever you want to use .cols, you should place them as direct children of .rows. If you do not, you will see some nasty horizontal scrollbars across your content, because the grid has a system of negative margins and (positive) padding to cater for gutters at various width sizes.
With this basic example everything works fine, especially when the heading is centered. Using different approach for Bootstrap grid is usually not a good idea.
From Bootstrap docs:
In a grid layout, content must be placed within columns and only
columns may be immediate children of rows.
As alignment problems will occur in the long run.
Secondly when you start using SASS with Bootstrap and change grid variables then everything stays aligned and is controlled from
one place.
In your example if you want to align the heading you need to add a margin-left so that is would be aligned with I'm content inside the grid.
Look at this example how everything is aligning with and without rows/columns: https://codepen.io/LaCertosus/pen/KKKzVqR
<div class="container-fluid mt-5">
<div class="row">
<div class="col">
This text is inside <b>row</b> and <b>col</b>
</div>
</div>
<div class="row">
This text is only inside <b>row</b>
</div>
<div class="col">
This text is only inside <b>col</b>
</div>
<div>
This text is only <b>container</b>
</div>
</div>
<div>
This text is outside <b>container</b>
</div>
It is the right question to ask why I have to generate so much boilerplate but it will come out in the long run when elements need to align and scale in different screen sizes.
I'm currently working with bootstrap, but there's just a few things that confuse me about the grid management.
In this case, my grid structure tends to go (as an example)..
<div class="container">
<div class="row">
<div class="col-xs-6">
<div class="row">
<div class="homeBox">
</div>
</div>
</div>
<div class="col-xs-6">
<div class="row">
<div class="homeBox">
</div>
</div>
</div>
</div>
</div>
(Apologies for poor formatting)
This works fine for full width elements (col-xs-12), however if i'm trying to have two elements next to each other (col-xs-6) with a row before adding the content, they simply touch each other in the middle, and if adding a background it makes it seem like one element. Here's a JFiddle showing what I mean. If i was to add a row before the homebox, it makes them touch. I can also just not add a row after the col-xs-x, but then it won't align correctly to the other full width elements on the page.
In sites I'm working on, I workaround this by adding a 'leftRow/rightRow' class for small devices onwards, but this seems a bit of a bodged way of doing it.
What's the correct way to approach this?
Cheers.
http://www.razaprinters.com/bootstrap.html
Hi I have made this page using bootstrap it is working fine on Desktops i am mostly using classes like col-xs-4 or 12 but when i open my website on a cellphone it is not optimizing things are behaving awkwardly like the about us divs goes all the way up and etc. any help with the code will be helpful i am not posting the code as you can go to inspect element or view source code to access it.
In order for bootstrap to "work" you should put your columns inside container and row classes.
<div class="container">
<div class="row">
<div class="col-xs-12"></div>
</div>
</div>
For more information go here Bootstrap Grid System
Container is a parent to content you want to style, it can have multiple rows inside. A row is sort of horizontal group (like a row in a table). Rows have 12 columns, but you can apply different widths to elements to target different views (dektop, mobile) depending on screen width. You need a row element if you want columns to work. For instance if you use:
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12"></div>
</div>
</div>
Then this will take 50% width (it will be on the left) of parent .container element on larger screens and 100% width of parent .container on smaller screens. Hope that clarifies something. I really recommend reading Bootstrap documentation - it's short and simple.
I can't figure out why my navigation at the bottom of this page ("prev" and "next" links) are longer than my #bloglist post teaser that are above width wise. I'm using twitter bootstrap out of the box and am using the scaffolding that they offer.
http://www.b-lew.me/page/3/
any thoughts or suggestions would be much appreciated!
There are some markup inconsistencies :
Each of your rows should be a .row containing a .span12 (and you won't need your .margin-left class)
Almost everything is floating, and float: left elements will not fill their container to their right
clear: both is not needed, just use the .clearfix class for the container, but you usually won't need it
Here is the markup I tried :
<div class="container">
<div class="row">
<div class="span12">
<div class="well bloglist clearfix">
<!-- etc -->
</div>
</div>
</div>
</div>
And for the css
.bloglist should not be floating left.
It appears that there is a lot of residual markup from another design, and IMHO you are going to have a lot more graphic bugs if you don't stick to the proper bootstrap architecture.
It appears you are expecting the overall size to be span12, evidenced by </div><!-- /span12 --> However! You do not have this class declared in the opening block anywhere, and your bloglist items are span4 and span7, so the overall size would be span11. I edited a bloglist item to be span4/8, which seemed to align with the pager. I would revist your opening markup to get it to the expected size