Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
Issue
I finally found an easy way of vertical aligning div elements and any other type of element, using the CSS properties/values display:flex; align-items: center. Only issue now is that the Boostrap grid system i.e. col-*-12 doesn't work. If I set a div to expand 12 columns when on a small screen, it doesn't react, in less I remove the styling used for vertically aligning the items.
Aim
To be able to use the grid system and vertically align elements. Any idea why display: flex is preventing the grid from working?
HTML
<div class="header-container padding-top--sm padding-bottom--sm">
<div class="row" style="display:flex;align-items:center">
<div class="col-xs-12 col-sm-6 col-md-3">
<img src="#" alt="logo">
</div>
<div class="col-xs-12 col-sm-6 col-md-6 text-md-center">
<p class="txt--white no-margin-bottom h-thin"> Lorem Ipsume, lorem ipsum</p>
</div>
<div class="col-xs-12 col-sm-6 col-md-3 text-md-right">
<span class="txt--white">support#support.com</span><br>
<span class="no-margin-bottom txt--white">001111111111 (8am - 8pm GMT)</span>
</div>
</div>
</div>
CSS
.padding-top--sm { padding-top: 1rem; }
.padding-bottom--sm { padding-bottom: 1rem; }
.header-container {
margin-left: auto;
margin-right: auto;
padding-left: 15px;
padding-right: 15px;
width: 90%;
}
The reason is because you are not letting your row "wrap" its contents.
By default its is set to nowrap value which means it does not allow the content to extend the container.
Try adding flex-wrap: wrap; property to your row style
<div class="row" style="display:flex;align-items:center;flex-wrap: wrap;">
...
</div>
Codepen here
PS: Consider avoiding inline styles, use external or atleast internal styles as much as possible
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
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I have 5 div's as follows:
<div class="centered" style="background-color:red;">top</div>
<div style="background-color:orange;">left</div>
<div style="background-color:yellow;">center</div>
<div style="background-color:green;">right</div>
<div class="centered" style="background-color:blue;">bottom</div>
I want to place the first one (with centered class) on the top-center, and the second (with "left" text), third (with "center" text) and the fourth (with "right" text) in one row in the center right below the top. Lastly, the fifth (with centered class) in the bottom center below the line of 3 div's.
I tried but it was just a waste of time. Can you help me with css?
Like this?
div {
height: 200px;
display: border-box;
}
.centered {
margin: 0 auto;
width: 33.33%;
}
.row {
}
.row div {
width: 33.33%;
float: left;
}
.row:after {
display: table;
content: ' ';
clear: both;
}
<div class="centered" style="background-color:red;">top</div>
<div class="row">
<div style="background-color:orange;">left</div>
<div style="background-color:yellow;">center</div>
<div style="background-color:green;">right</div>
</div>
<div class="centered" style="background-color:blue;">bottom</div>
you may want to use a framework with a grid such as Twitter Bootstrap: http://getbootstrap.com/ or Zurb Foundation: http://foundation.zurb.com/. These frameworks provide a 12 column grid to make div positioning easier to handle.
The following example is using twitter bootstraps grid to position div's in the manner you are speaking of:
<div class="container">
<div id="top" class="row">
<div class="col-md-2 col-md-offset-5">
<p>...content</p>
</div>
</div>
<div id="middle" class="row">
<div class="col-md-4">
<p>...content</p>
</div>
<div class="col-md-4">
<p>...content</p>
</div>
<div class="col-md-4">
<p>...content</p>
</div>
</div>
<div id="bottom" class="row">
<div class="col-md-2 col-md-offset-5">
<p>...content</p>
</div>
</div>
</div>
The "row" class will create a new row where the elements will be positioned sort of like hitting enter for a new line in a word document. the "col-md-2" is the bootstrap syntax for how many columns the element will take up out of the 12 column grid. Offsetting this column by 5 on both ends will subtract 10 from the number of columns and so the remaining two in the middle will be reserved for the element. This will position your div in the center. You mentioned that you wanted the second row divs to all be positioned together in the center. The code written above will give each div equal width to take up the whole length of the row across the screen. The container that is wrapped around the code will provide a padding around all of the content inside of it so it will not touch the edges of the window. I hope this helps.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
On this page of my website, the divs are floating in a strange way. The original theme (http://demo.fabthemes.com/revera/portfolio/) displays them in a correct way. I've checked the code + css but cannot seem to find the problem.
What is going wrong here?
Just set the min-height:
article.post, article.page, section.error-404 {
margin-bottom: 40px;
min-height: 240px;
}
The fact that your label stretches onto two lines makes it unhappy.
Consider making the h3 a fixed height, or adding elements with clear:both; after every fourth item.
The height is not always the same. Do this:
article.post, article.page, section.error-404 {
margin-bottom: 40px;
min-height: 300px; <----
}
Because some of the titles are in two lines, therefor, the height of blocks is not same. You can set this css to force them stay in one row:
.portbox h3 {
height: 1em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
You can also set the fixed height for h3 that can hold 2 rows (or maximum you may have).
You need nest every 4 columns in a div.row
<div class="row">
<article class="col-sm-3 col-6 portbox post">... </article>
<article class="col-sm-3 col-6 portbox post">... </article>
<article class="col-sm-3 col-6 portbox post">... </article>
<article class="col-sm-3 col-6 portbox post">... </article>
</div>
<div class="row">
<article class="col-sm-3 col-6 portbox post">... </article>
<article class="col-sm-3 col-6 portbox post">... </article>
<article class="col-sm-3 col-6 portbox post">... </article>
<article class="col-sm-3 col-6 portbox post">... </article>
</div>
This question already has answers here:
vertical-align with Bootstrap 3
(26 answers)
Closed 7 years ago.
I'm trying to vertically (and horizontally) center a div (height and width unknown) in a Bootstrap column. I can horizontally center the div by setting text-align to center. However I am struggling to vertically center the div. Here is a snippet of my code:
<div class="row">
<div class="col-md-8 col-md-offset-2 col-xs-12">
<div style="text-align: center"> <!--this works-->
<p>Content goes here</p>
</div>
</div>
</div>
Thanks in advance!
If you're using Twitter Bootstrap and you have the Bootstrap 3, they added <div class="center-block">...</div>.
Reference: Bootstrap v3.1.1.
You may want to give this a shot:
<div class="row">
<div class="col-md-8 col-md-offset-2 col-xs-12 Outer">
<div class="Inner>
<p >Content goes here</p>
</div>
</div>
</div>
/* CSS Code */
.Outer {
border: 1px solid black; /* Just so you can see it centered vertically */
display: table-cell;
height: 100%;
min-height: 15em; /* Set to height you need */
}
.Inner > p {
vertical-align: middle;
text-align: center;
margin: 0 auto;
}
Keep in mind that the browser will automatically recognize the resolution width;
however, the same functionality doesn't apply to height. You need to set a specified
height on the outer element in order for the inner content to have something to
vertically align itself to. Hope this helps!
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."