I have been looking over other questions posted on SO and tried the CSS however I cannot seem to align the "box" HxV within the container.
What is the best way to get it to display HxV responsive?
HTML:
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2 center-block">
box
</div>
</div>
</div>
Create an class like .centred-col and write an rule like
.centred-col{ float: none; margin:auto;}add this after ur .col classes.
Using .container centers and auto margins your grid to begin with, there should be no need for offsets:
<div class="container">
<div class="row">
<div class="col-xs-12">
box
</div>
</div>
</div>
Note: .col-xs-12 will set your column to the full width after container margins from the XS size to the LG size.
Documentation: Bootstrap CSS Documentation under "Containers".
Related
I'm using Bootstrap 4, but I don't want to use screen width. I want layout over whatever width the container has.
I couldn't find the details after searching.
The following codes are placed according to the screen width. However, I want it to be adjusted according to the current width of the container I specified.
<div class="row">
<div class="col-lg-4">
SIDEBAR
</div>
<div class="col-lg-8">
<div class="row"> /*The following boxes should be shaped according to the width of this container.*/
<div class="col-xl-4 col-lg-3">A</div>
<div class="col-xl-4 col-lg-3">B</div>
<div class="col-xl-4 col-lg-3">C</div>
<div class="col-xl-4 col-lg-3">D</div>
</div>
</div>
</div>
I'm not very sure what you need exactly, but it seems that you want a boxed layout instead a fluid one. If you use a .container class will apply the boxed effect you want.
<div class="container">
<div class="row">
<div class="col-lg-3 col-xl-4">Column</div>
<div class="col-lg-3 col-xl-4">Column</div>
</div>
</div>
Here the documentation: https://getbootstrap.com/docs/4.0/layout/overview/
If this is not what you need, please try to be more clear about your goal.
I can't understand why this doesn't work. There are 12 columns but it's work only with 11
HTML
<section>
<div class="container">
<div class="row">
<div class="advantages col-12">
<div class="col-4">one</div>
<div class="col-4">two</div>
<div class="col-4">three</div>
</div>
</div>
</div>
</section>
SASS
.advantages
text-align: center
div
display: inline-block
You should remove col-12 and let your col-4 sit within .row. A col must be immediately preceeded by a row.
Since 4+4+4 = 12, you don't have to define your previous col-12, and you shouldn't have to set anything to inline-block.
It's what #Jay Kariesch said, but you can also keep advantages in the same div as row, like this:
<div class="advantages row">
This way you will keep advantages class working for all the divs inside.
I have Bootstrap 3 layout. Content is based on 10 from 12 available columns. Let's say I have something like this:
<div class="container-fluid">
<div class="row">
<div class="col-lg-3 col-lg-offset-1">LEFT COL</div>
<div class="col-lg-3">CENTER COL</div>
<div class="col-lg-3 col-lg-pull-1 pull-right">RIGHT COL</div>
</div>
</div>
With this I have left and right columns positioned as I want it to be - one column width from both, left and right sides of browser window. And I want to position center column exactly in center, between left and right columns, to have same margin between them.
When using offset / pull / push bootstrap classes, they are positioning columns too much left or right.
I have made my own workaround class .col-center which works like .col-lg-offset-1 only I'm using calc() function to subtract the offset in pixels from bootstrap's percentage value. But in my opinion this solution kind of sucks.
Any advice?
edit:
sample image to describe better
Can you not align the content within the columns to get what you're after?
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-xs-4">LEFT COL</div>
<div class="col-xs-4 text-center">CENTER COL</div>
<div class="col-xs-4 text-right">RIGHT COL</div>
</div>
</div>
I believe this can't be done in bootstrap. But you can achieve this result by adding a customized class and additional markup. Try if this works for you and breaks nothing :P
HTML
<div class="container-fluid">
<div class="row">
<div class="col-lg-3 col-lg-offset-1">LEFT COL</div>
<div class="col-lg-4">
<div class="col-center col-lg-9"> CENTER COL
</div>
</div>
<div class="col-lg-3 col-lg-pull-1 pull-right">RIGHT COL</div>
</div>
</div>
CSS
.col-center {
margin: auto;
float: none;
}
You can add flexbox and distribute the cols evenly.
I have place two div inside an inline-flex div one of the two divs width reduces. I'm using bootstrap:
<section>
<div class="container">
<div class="flexx">
<div class="foo">
....
</div>
<div class="col-md-10">
<div class="card">
<div class="card-block">
...
</div>
</div>
</div>
</div>
</div>
</section>
Basically, foo class should be inline with col-md-10 which it does but col-md-10 gets small instead it should still be at 100%. Am I doing it correct? I'm not strong with css/scss.
I'm not sure I entirely understand your issue. inline-flex items do not default to full width. You will need to add some css for that to happen since in the css for bootstrap the flex-grow property is set to 0;
I think adding one style and a class will fix your issue, again if I understand you right.
// to your html
<div class="col foo">
....
</div>
// to your css
[class^="col"] {
flex-grow: 1;
}
Check out this pen for help
I have the following div:
<div style="background:red;width:100%;height:100%">Red</div>
When I stick it into the page without a container div, I can see it. But when I stick it into a container
<div class="container">
<div style="background:red;width:100%;height:100%">Red</div>
</div>
I can't see that div at all. When I stick it into an additional:
<div class="row">
<div class="span3">
<div style="background:red;width:100%;height:100%">Red</div>
</div>
</div>
I can see it, but there is a lot of padding and tons of spacing all around. How can I create a container div that doesnt have any margins/padding etc. that is equal to 0?
In fact, if you are using Bootstrap grid system, some margins and padding are added to maintain spacing between columns and page boundaries. So direct answer to your question is: no, you can't.
However, you can simply have a div that is not wrapped in div with .container class - then your div will not have any margins and paddings derived from grid system.
<div class="container">
<div class="row">
<div class="col-md-8">8-units column</div>
</div>
</div>
<div style="width: 100%; background: red;">Your div to be expanded to full page's width</div>
<div class="container">
<div class="row">
Another div within grid system
</div>
</div>