I am using twitter bootstrap 3 for a website and have a main content area and a sidebar. At present both columns are aligned left side-by-side but I want them to be placed centrally on the page.
I have seen a number of solutions on SO where a single column is aligned using the CSS:
.col-centered {
float: none;
margin: 0 auto;
}
This works but only for one of my columns. I tried nesting my two columns inside a column with size of twelve and tried to center that but to no avail.
I would prefer not to remove the float so that at small sizes the columns will stack but on all other sizes they would remain side-by-side.
Here is the basic structure of the HTML I am using:
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-8 col-md-7 col-lg-6">
</div>
<aside class="col-xs-12 col-sm-4 col-md-5 col-lg-6">
</aside>
</div>
</div>
Thanks in advance,
nav
Solved this problem by overriding the padding-left and padding-right of the .container class in bootstrap 3.
.container {
padding-right: 120px;
padding-left: 120px;
}
It might be better to do the above with percentages so that it scales. I was thrown off by the fact that my sidebar was not extending fully to the end of the container and as a result though it was not being centered.
Adding the above override did it for me.
Many thanks to #trevor for his test bed.
Related
I'm having trouble leaving my responsive layout with nebular, it would be the first time I'm using ...
Settings is default using bootstrap and Angular,
body of the layout would be:
<nb-layout>
<nb-layout-header>
responsive nav left side a logo with welcome writing right side a logo.
"I managed to make the less responsive"
</nb-layout-header>
<nb-layout-column>
here would be all the rest of the layout,
Big problem would be here I am not able to make the correct divisions like row and col,
It's not getting responsive.
</nb-layout-column>
</nb-layout>
here is my code:
.clienteLogo {
margin-left: 1%;
}
.testeLogo {
margin-left: auto;
margin-right: 1%;
}
.boasVindas {
padding-left: 20px;
}
<nb-layout>
<nb-layout-header>
<img class="clienteLogo" src="../assets/clientlogo.svg">
<span class="boasVindas">Olá Cliente, seja bem vinda.</span>
<img class="testeLogo" src="../assets/teste.svg">
</nb-layout-header>
<nb-layout-column>
<div class="row">
<div class="col-md-3 col-lg-3 col-xxxl-3">
<a id="reports">
<img class="reportsimg1 " src="../assets/shortcuts-daily.svg">
</a>
</div>
<div class="col-md-3 col-lg-3 col-xxxl-3">
<img class="reportsimg1" src="../assets/shortcuts-teste.svg">
</div>
<div class="col-md-3 col-lg-3 col-xxxl-3">
<img class="reportsimg1" src="../assets/shortcuts-report.svg">
</div>
<div class="col-md-3 col-lg-3 col-xxxl-3">
<img class="reportsimg1" src="../assets/shortcuts-inteligencia.svg">
</div>
</div>
</nb-layout-column>
</nb-layout>
I tried to put card inside the column but also could not:
same line
1 picture | 2 picture | 3 picture | 4 picture
responsive
themes is default
What I understand from the last line is that you are trying to display all pictures in one row. I am not sure if bootstrap library is loaded or not but the following will display it all in one row:
.row {
display: flex;
flex-direction: column:
}
NbLayoutColumnComponent
A container component which determines a content position inside of
the layout. The layout could contain unlimited columns (not including
the sidebars).
From the above description, it means it won't have any affect on the style of your <div class="row"> but the position.
Regarding the NbCard, the card has header, body and footer with white background and bordered shadow same like bootstrap cards and it does not impact the style of your div elements.
Make sure the bootstrap library is loaded
Inspect the <div class="row"> and see if the bootstrap styles are applied or is there any other styles override it.
For responsiveness: use bootstrap columns.
https://akveo.github.io/nebular/docs/components/layout/overview#nblayoutcomponent
I have some components that is generated by a for-loop based on number of objects from the server, that is going to be displayed on frontend,
<div class="container-fluid">
<div class="component">
<div class="row card">
<app-component class="list-group-item col" [User]="comp.user"
[title]="comp.title"
*ngFor="let comp of component"></app-component>
</div>
</div>
</div>
I want the components to be aligned in the middle while the last row will align left. The current situation is that the components is align center, when I want the last row of components to align left.
How our current html looks like
The margins on each side remain equal related to number of components.
The component has a fixed size, and as the screen is bigger (or adjusted) it will fit more component in each row while the gap between the components expands.
How it looks like when the screen adjust to bigger
As in the image there is even components, but if there were 1 more component it would be placed in the center of a third row. In that case, I want the last component to be placed left in a third row.
this is our current scss file:
.component {
display: inline-block;
margin-right: 10%;
margin-left: 10%;
> .card {
display: flex;
flex-wrap: wrap;
> app-component {
margin-top: 2rem;
margin-right: 3rem;
}
}
}
The main problem is that all the component is generated by a for-loop based on how many object i get from server. therefor i cant customize each component for them self
I'm not sure I quite undetsand well your needs.
Either look at flexboxes : https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Or why don't you use BS4 columns grid ???
Furthermore, you mix components and grid classes : Only col can be children of rows.
<div class="component">
<div class="row">
<div class="col-md-4">
<div class="card">
CARD CONTENT GOES HERE
</div>
</div>
</div>
</div>
Tell us more about your research.
By using grid system of bootstraps 4, it can define how many columns an element in HTML will use based on the screen size and resolved my problem.
<div class="container root">
<div class="row">
<div class="col-12 col-md-6 col-lg-4 col-xl-3 card"
*ngFor="let comp of component>
<app-component [user]="comp.user"
[title]="comp.title"></app-component>
</div>
</div>
</div>
The bootstrap class take based on the size of the screen and change classes, you can read more about it at https://getbootstrap.com/docs/4.1/layout/grid/
I'm having a bit of a hickup with bootstrap. Here's the deal:
I have a table made with divs with 4 fields, but I want them to have different alignments when they are being viewed on a mobile phone. Let me put the code of my table here to help explain:
<div class="table-responsive container text-center">
<div class="visible-md-block visible-lg-block row">
<div class="col-xs-4 col-md-3"><strong>From</strong></div>
<div class="col-xs-4 col-md-3"><strong>Points</strong></div>
<div class="col-xs-4 col-md-3"><strong>To</strong></div>
<div class="col-xs-12 col-md-3"><strong>Description</strong></div>
</div>
<div class="row">
<div class="col-xs-4 col-md-3">John doe</div>
<div class="col-xs-4 col-md-3">+20</div>
<div class="col-xs-4 col-md-3">Jane doe</div>
<div class="col-xs-12 col-md-3">Test Description</div>
</div>
</div>
There. If you are aware of bootstrap, you'll by now have realized the type of layout it will adopt. but I'll explain anyways:
When the viewport goes to a phone screen size I want the description column to go below the other ones.
Thing is, on that phone screen size I want to put the alignment diffrently from the centered one (that I defined on the table).
I want the "From" column aligned to the left, the "Points" column center aligned and the "To" column right aligned and the "Description" column to be center aligned while on larger viewports I want them to have a diffrent alignment. How would I pull such an effect off?
Also tips on weather I should use a table or keep using divs for this type of responsive coding are welcome :p
To accomplish the behavior you're after, you're likely going to need to come up with your own class, give it the majority of behaviors that col-xs-4 and col-md-3 have, and add your own home brewed styling to make the Description column fall below the other three for certain #media queries, etc.
media all and (max-width: 1000px) {
.custom-col-xs-4 {
float: left;
}
.costom-col-xs-4-lower {
clear: both;
}
}
Consider step 9 of this 10 step positioning tutorial when doing so: http://www.barelyfitz.com/screencast/html-training/css/positioning/
I'm a beginner in css and I have a little problem. I tested different methods to handle a responsive 4 div grid with css, and I failed.
I want to responsively arrange the 4 divs as an grid with 2 columns and, if the display is to narrow it should be floating to a one column layout.
Here is a sketch of the responsive grid:
Here is a simple responsive grid with 4 div boxes in plain CSS and HTML it aranges from two to one columns when the browser width becomes smaller :
DEMO (resize the result window to see the effect)
Note that the max-width value on the #container is set to 450px so that 2 blocks + their margin can fit by width in two colmuns.
When the widow is smaller than 450px the width of the #container adapts to the window width and as the block can't fit anymore, they rearage to one column.
#container {
text-align: center;
max-width: 450px;
margin: 0 auto;
}
.block {
width: 200px;
height: 200px;
margin: 10px;
display: inline-block;
background: #00CC99;
}
<div id="container">
<div class="block">1</div>
<div class="block">2</div>
<div class="block">3</div>
<div class="block">4</div>
</div>
You may want to check out Bootstrap, and specifically their Grid System. You can easily accomplish what you want with that. Otherwise, you'd want to look into writing your own CSS Media Queries to handle the different screen sizes.
Here's a JSFiddle showing how this can be achieved using Bootstrap. Just drag the side of the Result container to make it smaller and you can see the blocks shift. This may need some tweaking but it should get you going.
<div class="row">
<div class="col-sm-2 col-sm-offset-3 col-xs-12">
<div class="block">1</div>
</div>
<div class="col-sm-3 col-xs-12">
<div class="block">2</div>
</div>
<div class="col-sm-2 col-sm-offset-3 col-xs-12">
<div class="block">3</div>
</div>
<div class="col-sm-3 col-xs-12">
<div class="block">4</div>
</div>
</div>
In the above code, I'm creating a Bootstrap Grid which uses 12 columns. You can specify the column width at different screen sizes, for example the class col-sm-2 is saying use 2/12ths of the width for small screen sizes, then offset it 3 to center it. col-xs-12 says to use the full width for extra small screen sizes (essentially moving each block to its own row for extra small screens). Note the row class as well which is also Bootstrap specific.
Hopefully this helps!
Bootstrap is a great tool to do this as the above answerer said. Bootstrap allows you to position items in a grid layout (as you want).
Another way to do this is create media queries in css that will take effect when the browser has a smaller or larger min-width.
I recommend using Bootstrap as all of the heavy lifting is done for you and you would just have to make small tweaks to ensure it looks like you want it to.
I have the following scenario:
I have a <div class="row"> and then I have another <div class="col-lg-3"> where I will be putting the picture of a profile of an user. The problem is that I would like to center that picture to be in the middle of the available space, so I would normally do this:
<div class="row">
<div class="col-lg-3 col-lg-offset-x">
<img src="..." class="..." alt="..." title="..." data-size="...">
</div>
</div>
What would be the x value on the class of the <div class="col-lg-3 col-lg-offset-x"> If I wanted to center that div? Anybody has any idea how to do that?
Duplicate of Center a column using Twitter Bootstrap 3
"You can center any column size by using the proven margin: 0 auto; technique, you just need to take care of the floating that is added by Bootstrap's grid system. I recommend defining a custom CSS class like the following:
.col-centered{
float: none;
margin: 0 auto;
}
Now you can add it to any column size at any screen size and it will work seamlessly with Bootstrap's responsive layout :
<div class="row">
<div class="col-lg-1 col-centered"></div>
</div>
Note: With both techniques you could skip the .row element and have the column centered inside a .container but you would notice a minimal difference in the actual column size because of the padding in the container class."