So let's me example you first , i'm creating index page that has css with some dark-background filter in id-content::before and it has z-index: -1 and actual id-content with background-image has z-index :1 and it's working as expected but when i using with flowbite modal that have default value of z-index : 40 and modal body of z-50 it orders z-50 first before z-40 so i'm not sure right now what to do , if i delete z-index : 1 part in id-content the modal work perfectly fine.
here s' code so far
#content.custom-bg {
position: relative;
z-index: 1;
}
#content.custom-bg::before {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.85);
z-index: -1;
background-blend-mode: multiply;
}
#content {
background-size: cover;
background-position: center;
background-attachment: fixed;
background-repeat: no-repeat;
min-height: 100vh;
background-image:'example.png';
}
<section id="app">
<div id="content" class="p-4 custom-bg">
<div class="sm-max:mt-21 mt-6">
#yield('content') <- there s' modal inside this. [just basiclly laravel]
</div>
</section>
flowbite default css of modal background i know so far :
'bg-gray-900 bg-opacity-50 dark:bg-opacity-80 fixed inset-0 z-40',
and modal body
'fixed top-0 left-0 right-0 z-50 hidden w-full p-4 overflow-x-hidden overflow-y-auto md:inset-0 h-modal md:h-full'
so from what i know the current order of z-index is : -1 (from ::before)-> 1 (id-content)-> 40(flowbite-modal-bg) -> 50(flowbite-modal-body)
but looks like i got : -1 -> 1 -> 40 -> 1 or -1 -> 1 -> 1 -> 40 [i'm not pretty sure rn.]
I just don't want modal and background images to be conflict with each other.
sry for my bad english
So I've solved it by just separate modal-content out of the box in id-content like this below
<section id="app">
<div id="content" class="sm:ml-16 lg:ml-64 p-4">
<div class="sm-max:mt-21 mt-6">
#yield('content') <- Page Content
</div>
</div>
<div id="modal-content">
#yield('modal-content') <- Modal Content
</div>
</section>
I have a background image that is not staying within its div and will overflow into other contents. The background image div is on the same z-index and is nested within the background gradient div which contains the navbar and CTA section. I have tried just adding the background image to the same css class as the background gradient, but that has caused other issues to arise since I cannot resize it to how large it is supposed to be so I am just using the method I stated above. Can someone please help me with this? link to code sandbox is here codesandbox
what its doing:
what it needs to look like:
code below:
import styles from './style';
import { Navbar, CTA, BodyTop, BodyBottom, BodyMiddle, Footer } from './components';
const App = () => (
<div className='w-full overflow-hidden'>
<div className='bg-cta-gradient z-[0] h-[450px]'>
<div className={`flex-col h-[450px] relative overflow-hidden ${styles.paddingX} ${styles.flexCenter}`}>
<div className="background-img z-[-0] absolute overflow-hidden "></div>
<div className={`mt-5 margin-bottom absolute z-[2] ${styles.boxWidth}`}>
<Navbar />
</div>
<div className={`z-[0] ${styles.boxWidth}`}>
<CTA />
</div>
</div>
</div>
<div className={`bg-bodyColor z-[2] ${styles.flexStart}`}>
<div className={`${styles.boxWidth}`}>
<BodyTop />
<BodyMiddle />
<BodyBottom />
<Footer />
</div>
</div>
</div>
);
export default App;
code for css:
#media screen and (max-width: 760px) {
.bg-cta-gradient {
background: linear-gradient(hsl(13, 100%, 72%), hsl(353, 100%, 62%));
border-radius: 0px 0px 0px 70px;
}
.background-img {
background-image: url('./assets/bg-pattern-intro-mobile.svg') !important;
background-repeat: no-repeat;
background-size: contain;
width: 1300px;
height: 1300px;
overflow: hidden;
margin-left: 200px;
margin-top: 250px;
}
It seems that the container of this section is not having a border radius matching the shape of the left bottom corner.
That mismatched corner is causing the background image to overflow when on a smaller screen width.
Here is a quick fix that could be tried for this issue: (live demo: codesandbox)
Add a fix class to the CSS in index.css:
/* if it works, change the class name to a proper one later */
.fix-bg-img {
border-radius: 0px 0px 0px 70px;
}
Add the fix class to the said container in App.jsx:
import styles from "./style";
import {
Navbar,
CTA,
BodyTop,
BodyBottom,
BodyMiddle,
Footer,
} from "./components";
const App = () => (
<div className="w-full overflow-hidden">
<div className="bg-cta-gradient z-[0] h-[450px]">
<div
// Add the fix here 👇
className={`fix-bg-img flex-col h-[450px] relative overflow-hidden ${styles.paddingX} ${styles.flexCenter}`}
>
<div className="background-img z-[-0] absolute overflow-hidden "></div>
<div className={`mt-5 margin-bottom absolute z-[2] ${styles.boxWidth}`}>
<Navbar />
</div>
<div className={`z-[0] ${styles.boxWidth}`}>
<CTA />
</div>
</div>
</div>
<div className={`bg-bodyColor z-[2] ${styles.flexStart}`}>
<div className={`${styles.boxWidth}`}>
<BodyTop />
<BodyMiddle />
<BodyBottom />
<Footer />
</div>
</div>
</div>
);
export default App;
Hope this will help.
This is a flex container with flex-direction as row with flex-wrap. I need to wrap it in such a way that each row always has 3 child elements when the screen size<1616.
Here is the code. Btw I am using Tailwind CSS, but your answers with plain CSS are welcomed:
<div className='flex flex-wrap flex-row gap-6 mb-12 '>
<SingleProductCard/>
<SingleProductCard/>
<SingleProductCard/>
<SingleProductCard/>
<SingleProductCard/>
<SingleProductCard/>
</div>
SingleProductCard.js
<div className='single-product w-[250px] h-[510px] rounded-lg border border-[#D1D1D1] lg:w-[200px]'>
<div className="product-image bg-primary w-[210px] h-[150px] my-2 rounded-lg m-auto lg:w-[175px]"></div>
<p className='text-sm pb-2 pl-2 font-semibold mt-4'>Product Title</p>
<p className='text-xs pb-4 text-[#575757] pl-2'>Small space for product description</p>
<div className="flex justify-between mb-4">
<p className='text-sm font-[600] mt-[6px] pl-2'>2.46$</p>
<button className='text-sm py-1 px-4 bg-[#6A983C] text-white rounded-md mr-4'>Buy</button>
</div>
</div>
Here the width of the flex container is too wide and that is why the fourth element appends in the first row.
When the screen size is 1616px the parent flex container width is 866px. So I tried setting max-width [866px] for the flex container; But no luck :(
When parent is display:flex you can specify the width using flex-basis property. Generally we use the shorthand called flex. It gives you some additional options to specify how the flex-item can grow or shrink proportional to other items. flex: flex-grow flex-shrink flex-basis;. So, for your case SingleProductCard wrapper component add flex: 0 1 33%.
* {
box-sizing: border-box;
}
body{
width: 100vw;
}
.flex-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
font-size: 30px;
text-align: center;
}
#media (max-width: 1616px) {
.flex-item-1, .flex-item-2, .flex-item-3, .flex-item-4{
padding: 10px;
flex: 0 1 33%; /* to all flex-items */
}
}
.flex-item-1 {
background-color: cornflowerblue;
}
.flex-item-2 {
background-color: dodgerblue;
}
.flex-item-3 {
background-color: crimson;
}
.flex-item-4 {
background-color: forestgreen;
}
<body>
<div class="flex-container">
<div class="flex-item-1">1</div>
<div class="flex-item-2">2</div>
<div class="flex-item-3">3</div>
<div class="flex-item-4">4</div>
</div>
</body>
I have creating one web page using html5
Here is my code:
<header>
<img src="img/logo.png" alt="logo">
<hr class="hr-style">
<h1>The Articles</h1>
<nav>
<ul>
<li>Home</li>
<li>Articles</li>
</ul>
</nav>
</header>
<section>
<article class="article">
<img src="img/articles.png" alt="articles" />
</article>
<aside class="aside">
<img src="img/agencies.png" alt="agencies" />
</aside>
</section>
<footer>
</footer>
This is my JSfiddle i tried: please see this what i tried,
http://jsfiddle.net/3jet0dfu/
I need like this:
I'm new to HTML5, i need to know how to align the page using html5 tag.
To start with, you need to contain your content with a width.
Have an example!
In this example I am giving the body a width the same as your logo image (939px). margin: 0 auto; will center the page. Your question is too broad to give you an exact solution.
body{
margin: 0 auto;
font-family: Raleway, sans-serif;
width: 939px;
}
It would be better to replace the <hr> with a border. For example:
<img src="" alt="" id="logo">
#logo {
border-bottom: solid 2px #CCC;
padding-bottom: 50px;
}
I have also done a crude CSS reset to remove the default margins; they can then be easily controlled by adding them back to each element. You can also use a CSS Reset or CSS Normalise (do some research on the ideal solution for you)
* {
margin: 0;
padding: 0;
}
box-sizing: border-box is also brilliant if you want to use percentages.
Here is an excellent run-down on box-sizing.
* {
box-sizing: border-box;
}
This simple change gives you most of your desired layout. Now you need to change the width and add margins / padding as needed.
How to add margin top to class="row" elements using twitter bootstrap framework?
Editing or overriding the row in Twitter bootstrap is a bad idea, because this is a core part of the page scaffolding and you will need rows without a top margin.
To solve this, instead create a new class "top-buffer" that adds the standard margin that you need.
.top-buffer { margin-top:20px; }
And then use it on the row divs where you need a top margin.
<div class="row top-buffer"> ...
Ok just to let you know what's happened then, i fixed using some new classes as Acyra says above:
.top5 { margin-top:5px; }
.top7 { margin-top:7px; }
.top10 { margin-top:10px; }
.top15 { margin-top:15px; }
.top17 { margin-top:17px; }
.top30 { margin-top:30px; }
whenever i want i do <div class="row top7"></div>
for better responsive you can add margin-top:7% instead of 5px for example :D
Bootstrap 3
If you need to separate rows in bootstrap, you can simply use .form-group. This adds 15px margin to the bottom of row.
In your case, to get margin top, you can add this class to previous .row element
<div class="row form-group">
/* From bootstrap.css */
.form-group {
margin-bottom: 15px;
}
Bootstrap 4
You can use built-in spacing classes
<div class="row mt-3"></div>
The "t" in class name makes it apply only to "top" side, there are similar classes for bottom, left, right. The number defines space size.
For Bootstrap 4 spacing should be applied using
shorthand utility classes
in the following format:
{property}{sides}-{size}
Where property is one of:
m - for classes that set margin
p - for classes that set padding
Where sides is one of:
t - for classes that set margin-top or padding-top
b - for classes that set margin-bottom or padding-bottom
l - for classes that set margin-left or padding-left
r - for classes that set margin-right or padding-right
x - for classes that set both *-left and *-right
y - for classes that set both *-top and *-bottom
blank - for classes that set a margin or padding on all 4 sides of the element
Where size is one of:
0 - for classes that eliminate the margin or padding by setting it to 0
1 - (by default) for classes that set the margin or padding to $spacer * .25
2 - (by default) for classes that set the margin or padding to $spacer * .5
3 - (by default) for classes that set the margin or padding to $spacer
4 - (by default) for classes that set the margin or padding to $spacer * 1.5
5 - (by default) for classes that set the margin or padding to $spacer * 3
auto - for classes that set the margin to auto
So you should be doing any of these:
<div class="row mt-1">
<div class="row mt-2">
...
<div class="row mt-5">
Read the docs for more explanation.
Try live examples over here.
Sometimes margin-top can causes design problems:
http://www.w3.org/TR/CSS2/box.html#collapsing-margins
So, i recommend create "margin-bottom classes" instead of "margin-top classes" and apply them to the previous item.
If you are using Bootstrap importing LESS Bootstrap files try to define the margin-bottom classes with proportional Bootstrap Theme spaces:
.margin-bottom-xs {margin-bottom: ceil(#line-height-computed / 4);}
.margin-bottom-sm {margin-bottom: ceil(#line-height-computed / 2);}
.margin-bottom-md {margin-bottom: #line-height-computed;}
.margin-bottom-lg {margin-bottom: ceil(#line-height-computed * 2);}
I added these classes to my bootstrap stylesheet
.voffset { margin-top: 2px; }
.voffset1 { margin-top: 5px; }
.voffset2 { margin-top: 10px; }
.voffset3 { margin-top: 15px; }
.voffset4 { margin-top: 30px; }
.voffset5 { margin-top: 40px; }
.voffset6 { margin-top: 60px; }
.voffset7 { margin-top: 80px; }
.voffset8 { margin-top: 100px; }
.voffset9 { margin-top: 150px; }
Example
<div class="container">
<div class="row voffset2">
<div class="col-lg-12">
<p>
Vertically offset text.
</p>
</div>
</div>
</div>
I'm using these classes to alter top margin:
.margin-top-05 { margin-top: 0.5em; }
.margin-top-10 { margin-top: 1.0em; }
.margin-top-15 { margin-top: 1.5em; }
.margin-top-20 { margin-top: 2.0em; }
.margin-top-25 { margin-top: 2.5em; }
.margin-top-30 { margin-top: 3.0em; }
When I need an element to have 2em spacing from the element above I use it like this:
<div class="row margin-top-20">Something here</div>
If you prefere pixels so change the em to px to have it your way.
You can use the following class for bootstrap 4:
mt-0
mt-1
mt-2
mt-3
mt-4
...
Ref: https://v4-alpha.getbootstrap.com/utilities/spacing/
Bootstrap 4 alpha, for margin-top: shorthand CSS class names mt-1, mt-2 ( mt-lg-5, mt-sm-2)
same for the bottom, right, left, and you have also auto class ml-auto
<div class="mt-lg-1" ...>
Units are from 1 to 5 : in the variables.scss
which means if you set mt-1 it gives .25rem of margin top.
$spacers: (
0: (
x: 0,
y: 0
),
1: (
x: ($spacer-x * .25),
y: ($spacer-y * .25)
),
2: (
x: ($spacer-x * .5),
y: ($spacer-y * .5)
),
3: (
x: $spacer-x,
y: $spacer-y
),
4: (
x: ($spacer-x * 1.5),
y: ($spacer-y * 1.5)
),
5: (
x: ($spacer-x * 3),
y: ($spacer-y * 3)
)
) !default;
read-more here
https://v4-alpha.getbootstrap.com/utilities/spacing/#horizontal-centering
Add to this class in the .css file:
.row {
margin-left: -20px;
*zoom: 1;
margin-top: 50px;
}
or make a new class and add it to the element
.rowSpecificFormName td {
margin-top: 50px;
}
If you want to change just on one page, add the following style rule:
#myCustomDivID .row {
margin-top:20px;
}
In Bootstrap 4 alpha+ you can use this
class margin-bottom-5
The classes are named using the format: {property}-{sides}-{size}
just take a new class beside every row and apply css of margin-top: 20px;
here is the code below
<style>
.small-top
{
margin-top: 25px;
}
</style>
<div class="row small-top">
<div class="col-md-12">
</div>
</div>
Bootstrap3
CSS (gutter only, without margins around):
.row.row-gutter {
margin-bottom: -15px;
overflow: hidden;
}
.row.row-gutter > *[class^="col"] {
margin-bottom: 15px;
}
CSS (equal margins around, 15px/2):
.row.row-margins {
padding-top: 7px; /* or margin-top: 7px; */
padding-bottom: 7px; /* or margin-bottom: 7px; */
}
.row.row-margins > *[class^="col"] {
margin-top: 8px;
margin-bottom: 8px;
}
Usage:
<div class="row row-gutter">
<div class="col col-sm-9">first</div>
<div class="col col-sm-3">second</div>
<div class="col col-sm-12">third</div>
</div>
(with SASS or LESS 15px could be a variable from bootstrap)
<div class="row row-padding">
simple code
There is a trick for adding margin automatically only for the 2nd+ row in the container.
.container-row-margin .row + .row {
margin-top: 1rem;
}
Adding the .container-row-margin to the container, results in:
Complete HTML:
<div class="bg-secondary text-white">
div outside of the container.
</div>
<div class="container container-row-margin">
<div class="row">
<div class="col col-4 bg-warning">
Row without top margin
</div>
</div>
<div class="row">
<div class="col col-4 bg-primary text-white">
Row with top margin
</div>
</div>
<div class="row">
<div class="col col-4 bg-primary text-white">
Row with top margin
</div>
</div>
</div>
<div class="bg-secondary text-white">
div outside of the container.
</div>
Taken from official samples.
you can add this code :
[class*="col-"] {
padding-top: 1rem;
padding-bottom: 1rem;
}
Just simply use this bs3-upgrade helper for spacings and text aligment...
https://github.com/studija/bs3-upgrade
If you're using BootStrap 3.3.7, you can use the open source library bootstrap-spacer via NPM
npm install bootstrap-spacer
or you can visit the github page:
https://github.com/chigozieorunta/bootstrap-spacer
Here's an example of how this works to space rows using the .row-spacer class:
<div class="row row-spacer">
<div class="col-md-4">
</div>
<div class="col-md-4">
</div>
<div class="col-md-4">
</div>
</div>
<div class="row row-spacer">
<div class="col-md-4">
</div>
<div class="col-md-4">
</div>
<div class="col-md-4">
</div>
</div>
If you'd require spaces between columns, you can also add the .row-col-spacer class:
<div class="row row-col-spacer">
<div class="col-md-4">
</div>
<div class="col-md-4">
</div>
<div class="col-md-4">
</div>
</div>
And you can also combine various the .row-spacer & .row-col-spacer classes together:
<div class="row row-spacer row-col-spacer">
<div class="col-md-4">
</div>
<div class="col-md-4">
</div>
<div class="col-md-4">
</div>
</div>
Bootstrap 5
In Bootstrap 5 you could do something like this:
<div class="row mt-X"></div>
where X is a number from 0 (no space) to 5 (a lot of space). For more information on the different margin/padding sizes and the breakpoint specific control, please have a look at the docs.
My trick. Not so clean, but works well for me
<p> </p>