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
Related
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 want to create a call-to-action box with centered content
The box is contains two rows
the first row has the title and the second a variable amount of images, with a maximum of 12 (if greater than, then it will be three or more rows).
The text get perfectly centered using .text-center.
However i cannot create a div with the width of the content.
What i have now:
<div class="container">
<div class="row">
<div class="col-md-12" style=" padding: 10px 0 0;">
<div class="row text-center">
<div class="col-md-12 animated fadeInLeft">
<span class="color-green">Title</span>
</div>
</div>
<div class="row text-center">
<div class="col-md-9 center-block">
<!-- Content / Images-->
</div>
</div>
</div>
</div>
</div>
I tried multiple setups but the center-block doesn't seem to place the col-md-9 in the middle. (even though it does apply margin: 0 auto;)
What can i do to create equal width images in the center of their container, with variable amount. I'm using Unify Template which is based on Twitter Bootstrap 3
Since text-center affects on inline-level elements(children) only, you need to make them inline. It's clear. So all you need is to make <div class="col-md-9 center-block"> inline. Do it:
.center-block {
display: inline-block;
float: none;
}
If you want to push not more than 12 images in one line without javascript, I think there's the only way:
.center-block img {
width: 8.2%;
}
I've a problem with grid system of bootstrap, I've 6 elements inside a row, each one with class set to "col-md-2", the problem is that the only first 5 elements are shown on the row, and the 6º jumps to 2nd row. So the 2nd row gets empty spaces.
See the picture.
a piece of code:
<div id="card-listing" class="container-fluid">
<div class="row">
<div class="col-sm-6 col-md-2 cardthumnb" data-time="1396739650" data-name="Graceful Charity">
<a id="card-55" href="http://127.0.0.1/~victor/yugiohguia/cards/graceful-charity/">
<div class="card-thunmb">
<img src="http://127.0.0.1/~victor/yugiohguia/wp-content/uploads/2014/04/GracefulCharity-LCYW-EN-ScR-1E.png" />
</div>
<div class="card-title">
<span>Graceful Charity</span>
</div>
</a>
</div>
<!-- other 5 images... -->
</div>
</div>
the only css applied is:
.cardthumnb img {
max-width: 100%;
white-space: normal;
}
.cardthumnb .card-title {
text-align: center;
}
see live
This is not about bootstrap, but your isotope settings.
Make sure you have your configuration object setup correctly, or make a question targeting isotope.
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."
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.