I have a layout with a left and right column within a row. After researching, I was able to make the image responsive and the right column is indeed on top, however in the full screen view the left column wants to remain under the right.
Here is the code and css
<div class="row">
<div class="col-lg-8 col-md-8 col-sm-12 col-xs-12 main pull-right rightslide">
<img src="images/slideright.jpg"
</div>
<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12 pull-left leftslide">
<div class="lefttext">
Full Service Marketing and Advertising Solutions with <strong>Guaranteed Results</strong>
</div>
</div>
</div>
and the css for the right and left slide
.rightslide {
display:block;
max-width:100%;
float:right;
}
.rightslide img {
width:100%;
}
.leftslide {
display:block;
float:left;
}
.lefttext {
font-size:52px;
}
.The url
It is because one element is inside to another
use inspect element and also you forgot close image tag
Just close the image tag and it will work
<img src="images/slideright.jpg" />
it makes the bug and write one element inside another
Related
I want to center vertically the divs inside the container but the columns take the height of the document and not of main (whom height equals the one of its content) Hereby my code:
<main class="col-lg-12">
<div class="col-lg-1 col-md-0"></div>
<div class="col-lg-4 col-md-6 col-xs-12">
<img src={{image}}>
</div>
<div class="col-lg-1 col-md-0" ></div>
<div class="col-lg-4 col-md-6 col-xs-12">
<div class="title">{{title}}</div>
<div class="text">{{text1}}</div>
</div>
<div class="col-lg-1 col-md-0"></div>
</main>
main div{
height: 100%;
}
I can see in Developer Tools that the div takes 100% of the doc not of main... How could I fix this in order to vertically align the image?
Thank you!
first bootstrap .col should be in .row container
you might need one in your main col to nest columns inside
then, don’t write css to set height:100% on columns, you dont need that.
If I’m right .col have display: flex, so you can use align-items-stretch class to make you column taking the height of their wrapper, being the missing .row
I suppose you will need a height:100% on the row. to do that add it a class h-100
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 was looking to make a striped business theme, similar to the one created by W3Schools. The theme can be found here. It is characterized by horizontal sections, separated by different background colors.
The one issue I had with it was that the columns in Services, Portfolio and Pricing, spanned pretty much the full width of the page, which I did not think looked great, particularly for the three pricing boxes, which i feel should be much narrower and still centered. Let's take those pricing boxes as the example for the purpose of the questions.
So, I embarked upon the task of squeezing these three pricing boxes into a narrower shape, centered on the page, while still maintaining the full-width alternating background color. I came up with three ways to do it:
1) Place a Container inside a Container-Fluid:
<div id="pricing" class="container-fluid">
<div class="container">
<div class="row">
<div class="col-sm-4 col-xs-12">
BlaBlaBla
</div>
...
</div>
</div>
</div>
2) Make the following additions/changes to the css and html:
.fixed-width {
display: inline-block;
float: none;
width: 300px;
}
.row-centered {
text-align: center;
}
-
<div id="pricing" class="container-fluid">
<div class="row row-centered">
<div class="col-sm-4 col-xs-12 fixed-width">
BlaBlaBla
</div>
...
</div>
</div>
3) 3x col-sm-2, with empty columns on each side
Keep the container-fluid layout, but instead of having three col-sm-4, I have an empty col-sm-3, three col-sm-2, and finally an empty col-sm-3 (for a total of 12 columns).
4) 3x col-sm-2, with offset-3 to center
Instead of having three col-sm-4, I have one col-sm-2 col-sm-offset-3, then two col-sm-2 (this does not add to 12, but i center with offset).**
The problem with both (3) and (4) is that once i shrink the browser window, the boxes become too small before they wrap to the next line (i.e. the text flows out of the box). In (4) it seems if i use container (as opposed to container-fluid), the boxes become too narrow in full-screen even.
What is the correct way of doing this? I assume this is an issue almost everyone making business websites stumbles across, yet I was not able to find the answer online having worked on it for hours.
Thanks in advance,
Magnus
Below follows what I think is the best way to solve this. I will divide it up in whether or not it is a background image or color we are looking to apply accross the full width.
CSS (formatting for illustration purposes and fixed width)
.content{
padding:20px;
border: 1px solid #269abc;
background:#d6ec94;
}
[class*="col-"] {
padding-top:10px; /* 15px side paddings automatically applied */
padding-bottom:10px;
border: 1px solid grey;
background: transparent;
}
.fixed-width {
display:inline-block;
float:none;
width: 300px;
}
The key here is the fixed-width class, and follows your approach (2). The other styles are just so you can try it and easily see how it works.
CSS (background image)
#one {
background-image: url([insert-url]);
background-repeat: no-repeat;
background-size: contain;
height:500px;
}
The key here is the background-size: contain element. As long as the width/height ratio of your background image is larger than the section's ratio, the image will fill the full background.
CSS (background color)
#two {
background-color: grey;
height:500px;
}
background-color works without any tweaks.
HTML
<section id="one">
<div class="container">
<div class="row text-center">
<div class="col-sm-4 fixed-width">
<div class="content">HERE</div>
</div>
<div class="col-sm-4 fixed-width">
<div class="content">HERE</div>
</div>
<div class="col-sm-4 fixed-width">
<div class="content">HER</div>
</div>
</div>
</div>
</section>
As seen, by adding a <section> around the container, you can apply the background image or color to the full width of the page.
IN Bootstrap,
Col-lg is large screen,
Col-sm is small screen,
Col-md is medium devices,
Col-xs is Small screen.
According to the browser ,we can use the all classes.In my experience we can use the col-lg-offset-3 for large screen,Remaining screen we should use without offset,like us,
UL list format:
<style>
ul{
margin:0;padding:0;
text-align:center;
}
ul li
{
display:inline-block;
text-align:center;
width:300px;
}
</style>
<ul>
<li>box1</li>
<li>box2</li>
<li>box3</li>
</ul>
whatever screen all list will come in center position of screen.
other format:
<div class="container">
<div class="row text-center">
<div class="col-lg-offset-3 col-lg-2 col-sm-4 col-md-4 col-xs-12">contenbox..</div>
<div class="col-lg-2 col-sm-4 col-md-4 col-xs-12">contenbox..</div>
<div class="col-lg-2 col-sm-4 col-md-4 col-xs-12">contenbox..</div>
</div>
</div>
we should use all classes to our business requirement.if we can alter-ate the various offset class for col-sm-offset-,col-md-offset.,
<div class="col-sm-4 col-xs-12">
Is the important line. The col-sm-4 is saying on small screens and above, take up 4 of 12 bootstrap columns. So, try decreasing this to 3 of 12 bootstrap columns, i.e. col-sm-3. Here it is within the example source code:
<div class="col-sm-3 col-xs-12">
<div class="panel panel-default text-center">
<div class="panel-heading">
<h1>Basic</h1>
</div>
<div class="panel-body">
<p><strong>20</strong> Lorem</p>
<p><strong>15</strong> Ipsum</p>
<p><strong>5</strong> Dolor</p>
<p><strong>2</strong> Sit</p>
<p><strong>Endless</strong> Amet</p>
</div>
<div class="panel-footer plan">
<h3>$19</h3>
<h4>per month</h4>
<button class="btn btn-lg">Sign Up</button>
</div>
</div>
I have the following structure:
<div class="footer col-md-12">
<div class="social col-md-3 col-sm-4 col-sm-offset-0 col-xs-8 col-xs-offset-4">
<div id="fb"></div>
<div id="linkedin"></div>
<div id="gplus"></div>
</div>
</div>
There is also a div with copyright text, that I can't post. it is before the "social" div. On mobile devices, I am removing the copyright text(via display: none;), and I want to center the social icons, but I am unable to do so. I manage to do it, with margins and percentages, but on a specific resolution only, all other mobile resolutions are broken. Can someone assist me?
Note: I tried changing the xs column width and offset, but no combination managed to center the icons. I am posting the one, that was closest, that I centered with adding some margins.
i think that you just need to use class names in html and css as below
HTML
<div class="footer col-md-12">
<div class="copyright col-md-9 col-sm-8">
copyright information
</div>
<div class="social col-md-3 col-sm-4 col-xs-12">
Facebook -
Twitter -
Linkedin
</div>
</div>
CSS
.social{
background:aqua;
text-align: center;
}
.copyright{
background:silver;
}
#media screen and (max-width: 767px) {
.copyright {
display: none !important;
}
}
and this is the sample : https://jsfiddle.net/Tanbi/asohog47/1/
PS: For understanding clearly i used css background colors.
Have you tried:
.social {
display: block;
margin: 0 auto;
}
I find this works for me in most responsive centering dilemmas (with bootstrap in past times too I believe).
Let us know if this helps?
I have a LOOP that places div's that contain images.
The idea is to place in each row 3 images,
I don't know how many images the user will insert.
but i do know that a the images/div's needs to be centered(!) inside the bootstrap grid.
like that:
_ _
I tried using list but with no success.
Thanks...
you can play with "col-md-X" and "col-md-offset", the first one tell you the div's space and the second one the space in the left.
As far as I know this can't be done using default Bootstrap but no worries, you just need to add this:
<div class="container">
<div class="row row-centered">
<div class="col-xs-6 col-centered"></div>
<div class="col-xs-6 col-centered"></div>
<div class="col-xs-3 col-centered"></div>
<div class="col-xs-3 col-centered"></div>
<div class="col-xs-3 col-centered"></div>
</div>
</div>
/* centered columns styles */
.row-centered {
text-align:center;
}
.col-centered {
display:inline-block;
float:none;
/* reset the text-align */
text-align:left;
/* inline-block space fix */
margin-right:-4px;
}
See more here