Nebular responsive layout

Question

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

Answer 1

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