So it seems it's a typical problem, but I haven't been able to remove that bloody blank space that completely disfigures my webpage on mobile view.
I have tried to remove individually each element to see what's happening, but I can't see it.
HTML code:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1">
<!--Boostrap jQuery-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS"
crossorigin="anonymous"></script>
<!--Boostrap-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7"
crossorigin="anonymous">
<!--Favicon-->
<link rel="icon" type="image/png" href="media/favicon-32x32.png" sizes="32x32" />
<!--Mi CSS-->
<link rel="stylesheet" type="text/css" href="estilo.css">
<title> TRAMA & DRAMA | Vestuario y producción</title>
</head>
<body>
<!-- navbar -->
<nav id="navegacion" class="navbar navbar-default navbar-fixed-top navbar-wrapper">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false"
aria-controls="navbar">
<span class="sr-only">Navegación</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>¿Quiénes somos?</li>
<li>¿Qué hacemos?</li>
<li>
<img id="logo" src="media/logo-menu.png" alt="">
</li>
<li>Nuestros proyectos</li>
<li>Contacto</li>
</ul>
</div>
</div>
</nav>
<!--fin del navbar-->
<!--Barra rosa única del navbar-->
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 barraRosa-nav"></div>
</div>
</div>
<!--Sldeshow -->
<div class="container-fluid">
<div class="row ">
<div id="pasion-div">
<div class="text-center">
<h1 id="pasion-texto">Pasión por el vestuario</h1>
</div>
</div>
</div>
</div>
<!--Barra rosa-->
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 barraRosa"></div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 text-center img-responsive" id="id-quienes">
<img id="img-vestido" src="media/vestido.png" alt="Vestido">
</div>
</div>
</div>
<!--Barra rosa-->
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 barraRosa"></div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-12 text-center fuente-sans" id="hacemos">
<h1>¿Qué hacemos?</h1>
</div>
</div>
<br>
<div class="row text-center fuente-merri">
<div class="col-sm-4">
<img src="media/icono-renta.png" alt="">
<p class="hacemos-headers"><b>Renta de vestuario</b></p>
<!--<p class="hacemos-descripciones fuente-merri">Nosotros hacemos muchas cosas bien chodas</p>-->
</div>
<div class="col-sm-4">
<img src="media/icono-coordinacion.png" alt="">
<p class="hacemos-headers"><b>Coordinación de vestuario</b></p>
</div>
<div class="row">
<img src="media/icono-diseno.png" alt="">
<p class="hacemos-headers"><b>Diseño de vestuario</b></p>
</div>
</div>
<div class="row text-center fuente-merri">
<div class="col-sm-4">
<img src="media/icono-espacios.png" alt="">
<p class="hacemos-headers"><b>Renta de espacios para cursos</b></p>
</div>
<div class="col-sm-4">
<img src="media/icono-realizacion.png" alt="">
<p class="hacemos-headers"><b>Realización</b></p>
</div>
<div class="row">
<img src="media/icono-mantenimiento.png" alt="">
<p class="hacemos-headers"><b>Mantenimiento de vestuario</b></p>
</div>
</div>
</div>
<!--Barra rosa-->
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 barraRosa"></div>
</div>
</div>
<div id="proyectos">
<div class="container">
<div class="row">
<div class="col-sm-12 text-center fuente-sans">
<h1>Nuestros proyectos</h1>
</div>
</div>
<br>
<div class="row">
<div class="col-sm-12 text-center fuente-merri">
<p>Nos interesa que conozcas más a fondo los proyectos que llevamos a cabo en <b>Trama & Drama</b>.</p>
</div>
</div>
<br>
<div class="row text-center fuente-sans">
<div class="col-sm-4">
<img src="media/circ-1.png" alt="">
<h4>Diseño de vestuario</h4>
</div>
<div class="col-sm-4">
<img src="media/circ-2.png" alt="">
<h4>Producción y coordinación de vestuario</h4>
</div>
<div class="col-sm-4">
<img src="media/circ-3.png" alt="">
<h4>Renta de vestuario</h4>
</div>
</div>
<br>
<br>
<br>
<br>
<div class="row text-center fuente-sans">
<div class="col-sm-6">
<img src="media/circ-4.png" alt="">
<h4>Servicio social</h4>
</div>
<div class="col-sm-6">
<img src="media/circ-5.png" alt="">
<h4>Actividades del mes</h4>
</div>
</div>
</div>
</div>
<!--Barra rosa-->
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 barraRosa"></div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-12 text-center fuente-sans">
<h1>Contacto</h1>
</div>
</div>
<br>
<div class="row">
<div class="col-sm-12 text-center fuente-merri">
<div id="contacto-desc">
<p>¡Nos encantan los nuevos retos! Escríbemos, llámanos o platícanos de tu proyecto.</p>
</div>
</div>
</div>
<div class="row text-center">
<form role="form">
<div class="form-group">
<input type="text" name="" value="" placeholder="Tu nombre o el nombre de la empresa">
</div>
<div class="form-group">
<input type="email" name="" value="" placeholder="Correo electrónico">
</div>
<div class="form-group">
<input id="textfield" type="text" name="" value="" placeholder="Tu mensaje">
</div>
<button type="button" class="btn btn-primary">ENVIAR</button>
</form>
</div>
<br>
<div class="row text-center fuente-merri">
<p class="ch">Teléfonos</p>
<p class="cs">044 55 5601 1231</p>
<br>
<p class="ch">Correo eletrónico</p>
<p class="cs">info#tramaydrama.mx</p>
<br>
<p class="ch">Dirección</p>
<p class="cs">Eligio Villamar, No. 20, San Diego Churubusco. C.P: 04120, Delegación Coyoacan</p>
</div>
</div>
<br>
<!--Barra rosa-->
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 barraRosa-negra"></div>
</div>
</div>
<!--Footer-->
<footer>
<div class="container">
<div class="row fuente-sans">
<div class="col-sm-12 text-center" id="futer">
<a target="_blank" href="https://www.facebook.com/tramaydrama/?fref=ts"><img src="media/icono-fb.png" alt="Facebook"></a>
<img src="media/icono-inst.png" alt="Instagram">
<img src="media/icono-vimeo.png" alt="vimeo">
<p id="copyrights">Copyright Trama & Drama 2016 ©. Todos los derechos reservados | Página web por <a target="_blank"
href="http://animanoir.com"><b>Animanoir/Claque</b></a> | Diseño por <b>Cúmulo</b>.</p>
</div>
</div>
</div>
</footer>
<!--Bootstrap jQuery-->
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"></script>
</body>
</html>
CSS code:
/*Fuentes*/
#import 'https://fonts.googleapis.com/css?family=Lora:700i'; /*Header*/
#import 'https://fonts.googleapis.com/css?family=Merriweather'; /*Títulos*/
#import 'https://fonts.googleapis.com/css?family=Open+Sans:300'; /*Subtítulos*/
body{
padding-top: 70px;
overflow: hidden
}
footer{
background-color: #B7254E;
color: white;
}
/*Los botones dentro de una font: ;ma*/
form > button{
width: 50%;
background-color: #5A1741 !important;
text-align: left !important;
}
/*ids*/
#copyrights{
padding-top: 25px;
}
#futer{
padding-top: 25px;
padding-bottom: 25px;
}
#textfield{
height: 150px;
}
#proyectos{
background-color: #5A1741;
color: white;
}
#id-quienes{
color: white;
background-color: #5A1741;
padding-top: 10px;
padding-bottom: 10px;
}
#imagen-fondo{
position: relative;;
z-index: -1;
}
#logo{
width: 13em;
}
#contacto-desc{
color: #692C52;
font-weight: bold;
}
#pasion-div{
background-image: url("media/portada-mejor.jpg");
background-repeat: no-repeat;
background-size: cover;
min-height: 650px;
padding: 13px;
font-size: 1.2em;
/*Para que se centre el texto*/
display: table;
width: 100%;
}
#pasion-div > div{
display: table-cell;
vertical-align: middle;
text-align: center;
}
#pasion-texto{
font-family: 'Lora', serif;
color: white;
font-size: 5em;
/*width: 400px;*/
}
#quienes{
background-color: #5A1741;
height: 200px;
}
/*clases*/
.ch{
font-weight: bold;
color: #5A1741;
}
.cs{
color: #5A1741;
color: #B7254E;
}
.navbar-nav{
background-color: white;
font-weight: bold;
}
.navbar-nav {
display:table;
width:100%;
margin: 0;
color: #B7254E;
}
.navbar-nav > li {
float:none;
display:table-cell;
text-align:center;
}
.navbar a{
color: #B7254E !important;
}
.barraRosa-nav{
width: 100%;
height: 45px;
background-color: #B7254E;
}
.barraRosa{
width: 100%;
height: 5px;
background-color: #B7254E;
}
.barraRosa-negra{
width: 100%;
height: 5px;
background-color: #5A1741
}
.hacemos-descripciones{
color: #B7254E;
}
.hacemos-headers{
color: #5A1741;
}
.fuente-merri{
font-family: 'Merriweather', serif;
}
.fuente-sans{
font-family: 'Open Sans', sans-serif;
}
/*Posicionar verticalmente en el centro*/
.vertical-align {
vertical-align: middle;
display: inline-block;
}
.form-group > input{
width: 50%;
}
Try this:
body {
overflow-x: hidden;
}
Try to add
html, body { margin: 0; }
I think you used to much class="row" even if there is no child columns.
for example you did this
<!--Sldeshow -->
<div class="container-fluid">
<div class="row "> /*remove this class="row" because you're not using col*/
<div id="pasion-div">
<div class="text-center">
<h1 id="pasion-texto">Pasión por el vestuario</h1>
</div>
</div>
</div>
</div>
and it should be like this
<!--Sldeshow -->
<div class="container-fluid">
<div> /*yep, this is right*/
<div id="pasion-div">
<div class="text-center">
<h1 id="pasion-texto">Pasión por el vestuario</h1>
</div>
</div>
</div>
</div>
so why removing the class row?
if you look at bootstrap.css you can see the .row have margin: 0 -15px, so why is that?
so that it can remove the excess 15px of the col-xx-00 class.
So try removing the class='row' that occupies the unnecessary white spaces.
here, i tried to remove the unnecessary rows.
<!-- navbar -->
<nav id="navegacion" class="navbar navbar-default navbar-fixed-top navbar-wrapper">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false"
aria-controls="navbar">
<span class="sr-only">Navegación</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>¿Quiénes somos?</li>
<li>¿Qué hacemos?</li>
<li>
<img id="logo" src="media/logo-menu.png" alt="">
</li>
<li>Nuestros proyectos</li>
<li>Contacto</li>
</ul>
</div>
</div>
</nav>
<!--fin del navbar-->
<!--Barra rosa única del navbar-->
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 barraRosa-nav"></div>
</div>
</div>
<!--Sldeshow -->
<div class="container-fluid">
<div> /*removed class="row" here*/
<div id="pasion-div">
<div class="text-center">
<h1 id="pasion-texto">Pasión por el vestuario</h1>
</div>
</div>
</div>
</div>
<!--Barra rosa-->
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 barraRosa"></div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 text-center img-responsive" id="id-quienes">
<img id="img-vestido" src="media/vestido.png" alt="Vestido">
</div>
</div>
</div>
<!--Barra rosa-->
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 barraRosa"></div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-12 text-center fuente-sans" id="hacemos">
<h1>¿Qué hacemos?</h1>
</div>
</div>
<br>
<div class="row text-center fuente-merri">
<div class="col-sm-4">
<img src="media/icono-renta.png" alt="">
<p class="hacemos-headers"><b>Renta de vestuario</b></p>
<!--<p class="hacemos-descripciones fuente-merri">Nosotros hacemos muchas cosas bien chodas</p>-->
</div>
<div class="col-sm-4">
<img src="media/icono-coordinacion.png" alt="">
<p class="hacemos-headers"><b>Coordinación de vestuario</b></p>
</div>
<div class="row">
<img src="media/icono-diseno.png" alt="">
<p class="hacemos-headers"><b>Diseño de vestuario</b></p>
</div>
</div>
<div class="row text-center fuente-merri">
<div class="col-sm-4">
<img src="media/icono-espacios.png" alt="">
<p class="hacemos-headers"><b>Renta de espacios para cursos</b></p>
</div>
<div class="col-sm-4">
<img src="media/icono-realizacion.png" alt="">
<p class="hacemos-headers"><b>Realización</b></p>
</div>
<div> /*removed class="row" here*/
<img src="media/icono-mantenimiento.png" alt="">
<p class="hacemos-headers"><b>Mantenimiento de vestuario</b></p>
</div>
</div>
</div>
<!--Barra rosa-->
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 barraRosa"></div>
</div>
</div>
<div id="proyectos">
<div class="container">
<div class="row">
<div class="col-sm-12 text-center fuente-sans">
<h1>Nuestros proyectos</h1>
</div>
</div>
<br>
<div class="row">
<div class="col-sm-12 text-center fuente-merri">
<p>Nos interesa que conozcas más a fondo los proyectos que llevamos a cabo en <b>Trama & Drama</b>.</p>
</div>
</div>
<br>
<div class="row text-center fuente-sans">
<div class="col-sm-4">
<img src="media/circ-1.png" alt="">
<h4>Diseño de vestuario</h4>
</div>
<div class="col-sm-4">
<img src="media/circ-2.png" alt="">
<h4>Producción y coordinación de vestuario</h4>
</div>
<div class="col-sm-4">
<img src="media/circ-3.png" alt="">
<h4>Renta de vestuario</h4>
</div>
</div>
<br>
<br>
<br>
<br>
<div class="row text-center fuente-sans">
<div class="col-sm-6">
<img src="media/circ-4.png" alt="">
<h4>Servicio social</h4>
</div>
<div class="col-sm-6">
<img src="media/circ-5.png" alt="">
<h4>Actividades del mes</h4>
</div>
</div>
</div>
</div>
<!--Barra rosa-->
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 barraRosa"></div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-12 text-center fuente-sans">
<h1>Contacto</h1>
</div>
</div>
<br>
<div class="row">
<div class="col-sm-12 text-center fuente-merri">
<div id="contacto-desc">
<p>¡Nos encantan los nuevos retos! Escríbemos, llámanos o platícanos de tu proyecto.</p>
</div>
</div>
</div>
<div class="text-center"> /*removed class="row" here*/
<form role="form">
<div class="form-group">
<input type="text" name="" value="" placeholder="Tu nombre o el nombre de la empresa">
</div>
<div class="form-group">
<input type="email" name="" value="" placeholder="Correo electrónico">
</div>
<div class="form-group">
<input id="textfield" type="text" name="" value="" placeholder="Tu mensaje">
</div>
<button type="button" class="btn btn-primary">ENVIAR</button>
</form>
</div>
<br>
<div class="row text-center fuente-merri">
<p class="ch">Teléfonos</p>
<p class="cs">044 55 5601 1231</p>
<br>
<p class="ch">Correo eletrónico</p>
<p class="cs">info#tramaydrama.mx</p>
<br>
<p class="ch">Dirección</p>
<p class="cs">Eligio Villamar, No. 20, San Diego Churubusco. C.P: 04120, Delegación Coyoacan</p>
</div>
</div>
<br>
<!--Barra rosa-->
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 barraRosa-negra"></div>
</div>
</div>
<!--Footer-->
<footer>
<div class="container">
<div class="row fuente-sans">
<div class="col-sm-12 text-center" id="futer">
<a target="_blank" href="https://www.facebook.com/tramaydrama/?fref=ts"><img src="media/icono-fb.png" alt="Facebook"></a>
<img src="media/icono-inst.png" alt="Instagram">
<img src="media/icono-vimeo.png" alt="vimeo">
<p id="copyrights">Copyright Trama & Drama 2016 ©. Todos los derechos reservados | Página web por <a target="_blank"
href="http://animanoir.com"><b>Animanoir/Claque</b></a> | Diseño por <b>Cúmulo</b>.</p>
</div>
</div>
</div>
</footer>
or if you want, instead of removing rows, add col-sm-12 to the following tag. For example <div class="row"><div class="col-sm-12"><p>hey~</p></div></div>
Related
In a section of my code I made a row-grid for a part that displays images but when I went to insert and look at the website its not displaying in a row format but in a column and im not sure why. I thought the problem came from it being col-sm-6 but i changed it to col-sm-12 and its still not displaying it. Any reasons why?
.site-main .project-area {
padding: 4rem 0;
}
.site-main .project-area .button-group button {
background: transparent;
border: none;
font: normal 500 16px/130px var(--lato);
text-transform: uppercase;
}
.site-main .project-area .button-group button+button {
padding-left: 3rem;
}
.site-main .project-area .grid .our-project>title h4 {
font: normal 700 25px/12px var(--lato);
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<section class="project-area">
<div class="container">
<div class="project title pb-5">
<h1 class="h1 text-uppercase title-h1"> Recent Projects</h1>
<h1 class="h1 text-uppercase title h1"> Quality Work</h1>
</div>
<div class="div button-group">
<button type="button" class="active">All</button>
<button type="button" data-filter=".cars">Cars</button>
<button type="button" data-filter=".character">Characters</button>
<button type="button">Food</button>
<button type="button">Activities</button>
</div>
<div class="row-grid">
<div class="col-lg-4 col-md-6 col-sm-6 element-item cars">
<div class="our-project">
<div class="img">
<img src="./img/portfolio/car.jpg" alt="car">
</div>
<div class="title py-4">
<h4 class="text-uppercase">minimul design</h4>
<span class="text-secondary">Latest, Popular</span>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-12 element-item character">
<div class="our-project">
<div class="img">
<img src="./img/portfolio/images.jpg" alt="car">
</div>
<div class="title py-4">
<h4 class="text-uppercase">video game character</h4>
<span class="text-secondary">popular, Portfolio</span>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-12 element-item popular">
<div class="our-project">
<div class="img">
<img src="./img/portfolio/ntfs-to-be-professional-gamer-image1.jpg" alt="car">
</div>
<div class="title py-4">
<h4 class="text-uppercase">minimul design</h4>
<span class="text-secondary">Latest, Popular</span>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-12 element-item popular">
<div class="our-project">
<div class="img">
<img src="./img/portfolio/ntfs-to-be-professional-gamer-image1.jpg" alt="car">
</div>
<div class="title py-4">
<h4 class="text-uppercase">minimul design</h4>
<span class="text-secondary">Latest, Popular</span>
</div>
</div>
</div>
</div>
</div>
</section>
Changing the class row-grid to row makes it work. I don't think Bootstrap has a class called row-grid.
If you are trying to fit all the div elements into one row, just replace the col-lg-4 col-md-6 col-sm-6 and the col-lg-4 col-md-6 col-sm-12 with col
There is some margin to the right of the page, seemingly outside of the body itself (seen from inspecting in browser), which also causes a scrolling bar to appear on the bottom, but i can't understand what causes it.
I linked on both codepen and netlify
Codepen:
https://codepen.io/bladeranner5005/pen/QWObNpZ
Netlify:
https://lucid-kalam-398350.netlify.app
html
<!doctype html>
<html lang="it">
<head>
<!--Required meta tags-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Font links-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght#300;400&family=Libre+Franklin:wght#800&display=swap"
rel="stylesheet">
<!--Bootstrap CSS-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!--Icons links-->
<!--Custom css-->
<link href="css/index-css.css" rel="stylesheet">
<title>Andrea D'Angelo-website</title>
</head>
<body>
<!-- NAVBAR ----------------------------------------------------------------------------------------------------------->
<!--Modified bootstrap NAVBAR, with different colors and positioning when in desktop----------------------------------->
<nav class="navbar navbar-expand-lg fixed-top navbar-dark background-black">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup"
aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav mx-auto">
<a class="nav-item nav-link active nav-link-custom nav-item-spacing" href="index.html">Home</a>
<a class="nav-item nav-link nav-link-custom nav-item-spacing" href="pages/curriculum.html">Curriculum</a>
<a class="nav-item nav-link nav-link-custom nav-item-spacing" href="pages/portfolio.html">Portfolio</a>
<a class="nav-item nav-link nav-link-custom nav-item-spacing" href="pages/contacts.html">Contatti</a>
</div>
</div>
</nav>
<!--Main tag----------------------------------------------------------------------------------------------------------->
<main>
<!--HOME-Logo animation------------------------------------------------------------------------------------------------>
<section class="screen-height">
<div class="container-fluid h-100 d-inline-block">
<div class="top-logo"></div>
<div class="row d-flex justify-content-center align-items-center" id="animation">
<div class="col-4">
<img src="img/index/home-logo.svg" alt="My logo, which has an animation">
</div>
</div>
</div>
</section>
<!--HOME-Curriculum---------------------------------------------------------------------------------------------------->
<section class="background-black screen-height-curriculum">
<div class="container-fluid">
<!--SPACING 1-->
<div class="row">
<div class="cur-buffer-top col-1"></div>
</div>
<!--TEXT 1-->
<div class="row">
<div class="col-2 col-md-2"></div>
<div class="col-8 col-md-4 home-cur-text">
<h2>Sono un designer</h2>
</div>
<div class="col-2 col-md-6"></div>
</div>
<!--SPACING 2-->
<div class="row">
<div class="cur-buffer-mid col-1">
</div>
</div>
<!--TEXT 2-->
<div class="row">
<div class="col-2 col-md-6"></div>
<div class="col-8 col-md-4 home-cur-text">
<h2>Ho esperienza con multipli programmi, sia 2d sia in 3d</h2>
</div>
<div class="col-2 col-md-2"></div>
</div>
<!--SPACING 3-->
<div class="row">
<div class="cur-buffer-mid col-1">
</div>
</div>
<!--TEXT 3-->
<div class="row">
<div class="col-2 col-md-2"></div>
<div class="col-8 col-md-4 home-cur-text">
<h2>Ho lavorato a una grande varietà di progetti, singolarmente e in gruppo</h2>
</div>
<div class="col-2 col-md-6"></div>
</div>
<!--SPACING 4-->
<div class="row">
<div class="cur-buffer-mid 1 col-1"></div>
</div>
<!--TEXT 4-->
<div class="row">
<div class="col-2 col-md-6"></div>
<div class="col-8 col-md-4 home-cur-text">
<h2>Ho esperienza di programmazione, con html, CSS e Javascript</h2>
</div>
<div class="col-2 col-md-2"></div>
</div>
<!--SPACING 5-->
<div class="row">
<div class="cur-buffer-mid">
</div>
</div>
</div>
<!--BUTTONS (DARK BACKGROUND)-->
<div class="container-fluid">
<div class="row">
<div class="col-12 col-md-6 mb-5 mb-md-0">
<div class="container-fluid">
<div class="row">
<div class="col-2 col-md-3"></div>
<div class="col-8 col-md-6">
Online<br>curriculum
</div>
<div class="col-2 col-md-3"></div>
</div>
</div>
</div>
<div class="col-12 col-md-6 mb-5 mb-md-0">
<div class="container-fluid">
<div class="row">
<div class="col-2 col-md-3"></div>
<div class="col-8 col-md-6">
<a href="pdf/curriculum-pdf.pdf" class="link-btn btn btn-dark w-100">Curriculum<br>PDF
version</a>
</div>
<div class="col-2 col-md-3"></div>
</div>
</div>
</div>
</div>
</div>
</section>
<!--HOME-My work------------------------------------------------------------------------------------------------------->
<section>
<div class="container-fluid">
<!--SPACING 1-->
<div class="row">
<div class="work-buffer col-1"></div>
</div>
<!--Title-->
<div class="row d-flex justify-content-center">
<div class="col-3"></div>
<div class="col-6 text-center">
<h1 class="work-text-title">My work</h1>
</div>
<div class="col-3"></div>
</div>
<!--SPACING 2-->
<div class="row">
<div class="work-buffer col-1"></div>
</div>
<!--Pastichair/red-->
<div class="row d-flex justify-content-center">
<div class="col-4"></div>
<div class="col-4 text-center">
<h2 class="work-text-red">Pastichair</h2>
</div>
<div class="col-4"></div>
</div>
<!--Pastichair/text-->
<div class="row d-flex justify-content-center">
<div class="col-2"></div>
<div class="col-8 text-center">
<p class="work-text-normal">Lavoro di design di scenario in cui abbiamo interagito con la
cooperativa torinese Triciclo, dovendo proporre nuovi scenari per migliorare le prestazioni
della cooperativa sia creare un nuovo modello di prodotto che facilmente replicabile dai membri
di Triciclo, in particolare concentrandosi su un tipo di sedia assegnata a inizio progetto.</p>
</div>
<div class="col-2"></div>
</div>
<!--SPACING 3-->
<div class="row">
<div class="work-buffer col-1"></div>
</div>
<!--Beb/red-->
<div class="row d-flex justify-content-center">
<div class="col-4"></div>
<div class="col-4 text-center">
<h2 class="work-text-red">Bella e brava</h2>
</div>
<div class="col-4"></div>
</div>
<!--beb/text-->
<div class="row d-flex justify-content-center">
<div class="col-2"></div>
<div class="col-8 text-center">
<p class="work-text-normal">Progetto di creazione di un video animato di 45 secondi avente come
protagonista un prodotto di packaging pre selezionato, tramite lo strumento video e le tecniche
di animazione virtuale quali Blender, ambientata in contesto reale o frutto di un’invenzione,
con l’evidenza dei particolari motivi dell’essere ecologicamente sostenibile.</p>
</div>
<div class="col-2"></div>
</div>
<!--SPACING 4-->
<div class="row">
<div class="work-buffer col-1"></div>
</div>
<!--Personal space/red-->
<div class="row d-flex justify-content-center">
<div class="col-4"></div>
<div class="col-4 text-center">
<h2 class="work-text-red">Personal space</h2>
</div>
<div class="col-4"></div>
</div>
<!--Personal space/text-->
<div class="row d-flex justify-content-center">
<div class="col-2"></div>
<div class="col-8 text-center">
<p class="work-text-normal">Un progetto di social design, ci è stato dato il compito di creare un
ipotetico progetto riguardante un tema sociale circoscritto a Torino. Abbiamo deciso di
dedicarci al tema delle neuro divergenze nelle scuole, in particolare l’autismo. Abbiamo creato
un’attività la quale punta a facilitare l’interazione fra bambini neuro divergenti e non, la
quale poi si sarebbe sviluppata con un’interazione online con i genitori.</p>
</div>
<div class="col-2"></div>
</div>
<!--SPACING 5-->
<div class="row">
<div class="work-buffer">
</div>
</div>
</div>
<!--BUTTONS-->
<div class="container-fluid">
<div class="row">
<div class="col-12 col-md-6 mb-5 mb-md-0">
<div class="container-fluid">
<div class="row">
<div class="col-2 col-md-3"></div>
<div class="col-8 col-md-6">
Online<br>portfolio
</div>
<div class="col-2 col-md-3"></div>
</div>
</div>
</div>
<div class="col-12 col-md-6">
<div class="container-fluid">
<div class="row">
<div class="col-2 col-md-3"></div>
<div class="col-8 col-md-6">
<a href="pdf/portfolio-pdf.pdf" class="link-btn-light btn btn-light w-100">Portfolio<br>PDF
version</a>
</div>
<div class="col-2 col-md-3"></div>
</div>
</div>
</div>
</div>
</div>
<!--SPACING 6-->
<div class="row">
<div class="work-buffer">
</div>
</div>
</section>
<!--INFO--------------------------------------------------------------------------------------------------------------->
<section class="container-fluid">
<!--Title-->
<div class="row d-flex justify-content-center">
<div class="col-4"></div>
<div class="col-4 text-center">
<h1 class="work-text-title">Info</h1>
</div>
<div class="col-4"></div>
</div>
<!--SPACING 2-->
<div class="row">
<div class="info-buffer">
</div>
</div>
<!--Info wrap-->
<div class="row">
<!--DATA-->
<div class="col-12 col-sm-12 col-md-6">
<div class="container-fluid">
<div class="row">
<div class="col-2 col-sm-2 col-md-3"></div>
<div class="col-8">
<div class="container-fluid0">
<div class="row">
<div class="col-12 text-center">
<h3 class="info-text-title">Andrea Telemaco D'Angelo</h3>
</div>
</div>
<div class="row">
<div class="col-6 text-start">
<p class="info-text-red">Nazionalità</p>
</div>
<div class="col-6 text-end">
<p class="info-text-normal">Italiana</p>
</div>
</div>
<div class="row">
<div class="col-6 text-start">
<p class="info-text-red">Data di nascita</p>
</div>
<div class="col-6 text-end">
<p class="info-text-normal">08/04/2000</p>
</div>
</div>
<div class="row">
<div class="col-6 text-start">
<p class="info-text-red">Luogo di nascita</p>
</div>
<div class="col-6 text-end">
<p class="info-text-normal">Caserta</p>
</div>
</div>
<div class="row">
<div class="col-4 text-start">
<p class="info-text-red">Email</p>
</div>
<div class="col-8 text-end">
<p class="info-text-normal">emailexemple#gmail</p>
</div>
</div>
<div class="row">
<div class="col-6 text-start">
<p class="info-text-red">Telefono</p>
</div>
<div class="col-6 text-end">
<p class="info-text-normal">0000000000</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--BUTTON-->
<div class="col-12 col-sm-12 col-md-6 container-fluid">
<div class="row">
<div class="col-1 info-buffer-button"></div>
</div>
<div class="row">
<div class="col-2 col-md-3"></div>
<div class="col-8 col-md-6">
<a href="pages/contacts.html" class="link-btn-light btn btn-light w-100">Full contacts<br>and
info</a>
</div>
<div class="col-2 col-md-3"></div>
</div>
<div class="row">
<div class="col-1 info-buffer-button"></div>
</div>
</div>
<!--Button wrap end-->
</div>
</section>
<!--Footer start------------------------------------------------------------------------------------------------------->
<!--Red line-->
<div class="border-top border-5 border-danger mt-5"></div>
<!--Start container-->
<footer class="container-fluid">
<!--ROW 1-->
<div class="row mb-5 mt-5">
<!--ROW 1-A-->
<div class="col-12 col-md-6 mb-5 mb-md-0">
<div class="container-fluid">
<div class="row">
<div class="col-2 col-md-3"></div>
<div class="col-8 col-md-6">
Home<br>page
</div>
<div class="col-2 col-md-3"></div>
</div>
</div>
</div>
<!--ROW 1-B-->
<div class="col-12 col-md-6">
<div class="container-fluid">
<div class="row">
<div class="col-2 col-md-3"></div>
<div class="col-8 col-md-6">
Online<br>curriculum
</div>
<div class="col-2 col-md-3"></div>
</div>
</div>
</div>
</div>
<!--ROW 2-->
<div class="row mb-5 mt-5">
<!--ROW 2-A-->
<div class="col-12 col-md-6 mb-5 mb-md-0">
<div class="container-fluid">
<div class="row">
<div class="col-2 col-md-3"></div>
<div class="col-8 col-md-6">
Online<br>portfolio
</div>
<div class="col-2 col-md-3"></div>
</div>
</div>
</div>
<!--ROW 2-B-->
<div class="col-12 col-md-6">
<div class="container-fluid">
<div class="row">
<div class="col-2 col-md-3"></div>
<div class="col-8 col-md-6">
<a href="pages/contacts.html" class="link-btn-light btn btn-light w-100">Full contacts<br>and
info</a>
</div>
<div class="col-2 col-md-3"></div>
</div>
</div>
</div>
</div>
</footer>
</main>
<!-- Javascript for Bootstrap --------------------->
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin="anonymous"></script>
<!-- Javascript for Bootstrap END------------------>
</body>
</html>
CSS
/*ESSENTIAL ----------------------------------------------------------------------------------------------------------*/
/*To stop the navbar from covering content, source: https://stackoverflow.com/questions/10336194/top-nav-bar-blocking-top-content-of-the-page*/
body {
padding-top: 55px;
margin: 0;
}
/*To make internal links selection better:*/
html {
scroll-behavior: smooth;
}
/*Change text size depending on viewport, source: https://css-tricks.com/viewport-sized-typography/ */
h1 {
font-size: 5.9vw;
}
h2 {
font-size: 3.0vh;
}
p {
font-size: 2vmin;
}
/*FONTS --------------------------------------------------------------------------------------------------------------*/
/*Tags from google fonts
Josefin sans light:
font-family: 'Josefin Sans', sans-serif;
font-weight: 300;
Josefin sans regular:
font-family: 'Josefin Sans', sans-serif;
font-weight: 400;
Libre Franklin
font-family: 'Libre Franklin', sans-serif;
font-weight: 800;
*/
/*NAVBAR -------------------------------------------------------------------------------------------------------------*/
/*Structure --*/
.nav-item-spacing {
margin-left: 30px;
margin-right: 30px;
}
.vertical-center {
margin: 0;
position: absolute;
top: 50%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
/*Colors --*/
.background-black {
background-color: black;
}
.nav-link-custom {
font-family: 'Libre Franklin', sans-serif;
font-weight: 800;
font-size: 1vw;
}
/*HOME-Logo animation ------------------------------------------------------------------------------------------------*/
/*Background --*/
/*
.background-black {
background: black;
}
*/
/*Structure --*/
.screen-height {
height: 100vh;
}
.top-logo {
height: 13vh;
}
#media (max-width: 768px) {
.top-logo {
height: 30vh;
}
}
#animation {
animation: animation 2s;
}
#keyframes animation {
from {
transform: translateY(60vh);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 100%;
}
}
/*CURRICULUM ---------------------------------------------------------------------------------------------------------*/
/*Background --*/
/*
.background-black {
background: black;
}
*/
/*Structure --*/
.screen-height-curriculum {
height: 100vh;
}
#media (max-width: 768px) {
.screen-height-curriculum {
height: 110vh;
}
}
.cur-buffer-mid {
height: 10vh;
}
#media (max-width: 768px) {
.cur-buffer-mid {
height: 6vh;
}
}
.cur-buffer-top {
height: 8vh;
}
/*Text --*/
.home-cur-text {
font-family: 'Josefin Sans', sans-serif;
font-weight: 400;
color: white;
text-align: center;
}
/*Button --*/
.link-btn {
border-style: solid;
border-width: thick;
border-color: white;
background-color: black;
font-family: 'Libre Franklin', sans-serif;
font-weight: 800;
}
/*MY WORK ------------------------------------------------------------------------------------------------------------*/
/*Structure --*/
.work-buffer {
height: 10vh;
}
/*Text --*/
.work-text-title {
font-family: 'Libre Franklin', sans-serif;
font-weight: 800;
color: black;
font-size: 60pt;
}
.work-text-red {
font-family: 'Josefin Sans', sans-serif;
font-weight: 400;
color: red;
font-size: 36pt;
}
.work-text-normal {
font-family: 'Josefin Sans', sans-serif;
font-weight: 300;
color: black;
font-size: 24pt;
}
#media (max-width: 768px) {
.work-text-title {
font-family: 'Libre Franklin', sans-serif;
font-weight: 800;
color: black;
font-size: 42pt;
}
.work-text-red {
font-family: 'Josefin Sans', sans-serif;
font-weight: 400;
color: red;
font-size: 24pt;
}
.work-text-normal {
font-family: 'Josefin Sans', sans-serif;
font-weight: 300;
color: black;
font-size: 18pt;
}
}
/*Button --*/
.link-btn-light {
border-style: solid;
border-width: thick;
border-color: black;
background-color: white;
font-family: 'Libre Franklin', sans-serif;
font-weight: 800;
}
/*INFO ---------------------------------------------------------------------------------------------------------------*/
/*Structure --*/
.info-buffer {
height: 10vh;
}
.info-buffer-button {
height: 15vh;
}
/*Text --*/
/*
.work-text-title {
font-family: 'Libre Franklin', sans-serif;
font-weight: 800;
color: black;
font-size: 60pt;
}
*/
.info-text-title {
font-family: 'Josefin Sans', sans-serif;
font-weight: 400;
color: black;
font-size: 36pt;
}
.info-text-red {
font-family: 'Josefin Sans', sans-serif;
font-weight: 400;
color: red;
font-size: 24pt;
}
.info-text-normal {
font-family: 'Josefin Sans', sans-serif;
font-weight: 300;
color: black;
font-size: 24pt;
}
#media (max-width: 768px) {
.info-text-title {
font-family: 'Josefin Sans', sans-serif;
font-weight: 400;
color: black;
font-size: 18pt;
}
.info-text-red {
font-family: 'Josefin Sans', sans-serif;
font-weight: 400;
color: red;
font-size: 3vmin;
}
.info-text-normal {
font-family: 'Josefin Sans', sans-serif;
font-weight: 300;
color: black;
font-size: 4vmin;
}
}
I'm not finding the culprit immediately after checking your codepen, but a quick and dirty way to hide any side to side scrolling is by using
body {
overflow-x: hidden;
}
It's caused by the margins of your middle logo, #animation. Setting --bs-gutter-x to 0 seems to fix it.
fix this in grid:
.row {
--bs-gutter-x: 0;
}
or add this style:
body {
width: 100vw;
overflow-x: hidden;
}
It looks like it's an issue with the div under the <!--SPACING 6--> comment in the My Work section. Remove class="row" from this div, and this'll fix the issue. Here's an example:
<!--SPACING 6-->
<div>
<div class="work-buffer">
</div>
</div>
I also noticed that the work-buffer class is only added for spacing. A better way of doing this would be to get rid of this div all together and add padding-bottom to the <section> tag containing the "My Work" content instead.
I have 10 divs side by side. I need my last divs to align left instead of center. I've read Bootstrap's documentation and it says I should use <div class="d-flex flex-wrap"> but it does nothing. Also, I've read this same question here and the solution is to use float: left but the replies are from 2016, and I wonder if there is a newer way to achieve this. (I'm using Bootstrap 4).
This is what I have now:
.briones-project-row {
margin-bottom: 2em;
}
.briones-project-card {
background-color: #ffffff;
box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.34);
-webkit-box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.34);
-moz-box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.34);
margin-bottom: 3em;
}
.briones-project-card .main-image {
padding: 0;
}
.briones-project-card .main-image img {
width: 100%;
}
.briones-project-card .main-image img:hover {
opacity: 0.8;
}
.briones-project-card .card-content {
text-align: center;
}
.briones-project-card .card-content .project-name {
font-weight: 600;
color: #2d2d2d;
margin-top: 0.9em;
margin-bottom: 0.7em;
line-height: 1.3em;
min-height: 40px;
max-height: 40px;
}
.briones-project-card .card-content .project-detail {
font-weight: 400;
color: #737373;
line-height: 1.3em;
}
.briones-project-card .bottom-line {
position: absolute;
bottom: 0;
width: 100%;
height: 6px;
background-color: #DA3D0D;
}
.briones-primary-btn-container {
margin-top: 2em;
}
.briones-primary-btn {
background-color: #DA3D0D;
color: #ffffff;
font-weight: 400;
border: none;
border-radius: 0;
padding: 0.5em 3em;
}
.briones-primary-btn:hover {
background-color: #232323;
color: #ffffff;
}
<!-- Bootstrap CDN -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-12">
<!-- /Row One -->
<div class="row briones-project-row">
<!-- 01 -->
<div class="col-lg-3 col-md-3 col-sm-6 col-11 mx-auto">
<div class="col-lg-12 briones-project-card">
<div class="row">
<a href="#" class="col-lg-12 main-image text-center">
<img src="images/don-pedro-limache-thumbnail.jpg" alt="Imagen del proyecto" class="img-fluid">
</a>
</div>
<div class="row">
<div class="col-lg-12 card-content">
<p class="project-name">Don Pedro de Limache</p>
<p class="project-detail">Ubicación del proyecto <br/> Xm2 | X días</p>
</div>
</div>
<div class="row">
<div class="col-lg-12 bottom-line"></div>
</div>
</div>
</div>
<!-- /01 -->
<!-- 02 -->
<div class="col-lg-3 col-md-3 col-sm-6 col-11 mx-auto">
<div class="col-lg-12 briones-project-card">
<div class="row">
<a href="#" class="col-lg-12 main-image text-center">
<img src="images/dona-barbara-casablanca-thumbnail.jpg" alt="Imagen del proyecto" class="img-fluid">
</a>
</div>
<div class="row">
<div class="col-lg-12 card-content">
<p class="project-name">Doña Bárbara de Casablanca</p>
<p class="project-detail">Ubicación del proyecto <br/> Xm2 | X días</p>
</div>
</div>
<div class="row">
<div class="col-lg-12 bottom-line"></div>
</div>
</div>
</div>
<!-- /02 -->
<!-- 03 -->
<div class="col-lg-3 col-md-3 col-sm-6 col-11 mx-auto">
<div class="col-lg-12 briones-project-card">
<div class="row">
<a href="#" class="col-lg-12 main-image text-center">
<img src="images/ayelen-oriente-quillota-thumbnail.jpg" alt="Imagen del proyecto" class="img-fluid">
</a>
</div>
<div class="row">
<div class="col-lg-12 card-content">
<p class="project-name">Ayelen Oriente de Quilota</p>
<p class="project-detail">Ubicación del proyecto <br/> Xm2 | X días</p>
</div>
</div>
<div class="row">
<div class="col-lg-12 bottom-line"></div>
</div>
</div>
</div>
<!-- /03 -->
<!-- 04 -->
<div class="col-lg-3 col-md-3 col-sm-6 col-11 mx-auto">
<div class="col-lg-12 briones-project-card">
<div class="row">
<a href="#" class="col-lg-12 main-image text-center">
<img src="images/rey-felipe-casablanca-thumbnail.jpg" alt="Imagen del proyecto" class="img-fluid">
</a>
</div>
<div class="row">
<div class="col-lg-12 card-content">
<p class="project-name">Rey Felipe de Casablanca</p>
<p class="project-detail">Ubicación del proyecto <br/> Xm2 | X días</p>
</div>
</div>
<div class="row">
<div class="col-lg-12 bottom-line"></div>
</div>
</div>
</div>
<!-- /04 -->
<!-- 05 -->
<div class="col-lg-3 col-md-3 col-sm-6 col-11 mx-auto">
<div class="col-lg-12 briones-project-card">
<div class="row">
<a href="#" class="col-lg-12 main-image text-center">
<img src="images/ayelen-poniente-quillota-thumbnail.jpg" alt="Imagen del proyecto" class="img-fluid">
</a>
</div>
<div class="row">
<div class="col-lg-12 card-content">
<p class="project-name">Ayelen Poniente de Quillota</p>
<p class="project-detail">Ubicación del proyecto <br/> Xm2 | X días</p>
</div>
</div>
<div class="row">
<div class="col-lg-12 bottom-line"></div>
</div>
</div>
</div>
<!-- /05 -->
<!-- 06 -->
<div class="col-lg-3 col-md-3 col-sm-6 col-11 mx-auto">
<div class="col-lg-12 briones-project-card">
<div class="row">
<a href="#" class="col-lg-12 main-image text-center">
<img src="images/esmeralda-de-limache-thumbnail.jpg" alt="Imagen del proyecto" class="img-fluid">
</a>
</div>
<div class="row">
<div class="col-lg-12 card-content">
<p class="project-name">Esmeralda de Limache</p>
<p class="project-detail">Ubicación del proyecto <br/> Xm2 | X días</p>
</div>
</div>
<div class="row">
<div class="col-lg-12 bottom-line"></div>
</div>
</div>
</div>
<!-- /06 -->
<!-- 07 -->
<div class="col-lg-3 col-md-3 col-sm-6 col-11 mx-auto">
<div class="col-lg-12 briones-project-card">
<div class="row">
<a href="#" class="col-lg-12 main-image text-center">
<img src="images/paqari-de-villa-alemana-thumbnail.jpg" alt="Imagen del proyecto" class="img-fluid">
</a>
</div>
<div class="row">
<div class="col-lg-12 card-content">
<p class="project-name">Paqari de Villa Alemana</p>
<p class="project-detail">Ubicación del proyecto <br/> Xm2 | X días</p>
</div>
</div>
<div class="row">
<div class="col-lg-12 bottom-line"></div>
</div>
</div>
</div>
<!-- /07 -->
<!-- 08 -->
<div class="col-lg-3 col-md-3 col-sm-6 col-11 mx-auto">
<div class="col-lg-12 briones-project-card">
<div class="row">
<a href="#" class="col-lg-12 main-image text-center">
<img src="images/lobelias-de-placilla-de-penuelas-thumbnail.jpg" alt="Imagen del proyecto" class="img-fluid">
</a>
</div>
<div class="row">
<div class="col-lg-12 card-content">
<p class="project-name">Las Lobelias de Placilla de Peñuelas</p>
<p class="project-detail">Ubicación del proyecto <br/> Xm2 | X días</p>
</div>
</div>
<div class="row">
<div class="col-lg-12 bottom-line"></div>
</div>
</div>
</div>
<!-- /08 -->
<!-- 09 -->
<div class="col-lg-3 col-md-3 col-sm-6 col-11 mx-auto">
<div class="col-lg-12 briones-project-card">
<div class="row">
<a href="#" class="col-lg-12 main-image text-center">
<img src="images/aliwen-quillota-thumbnail.jpg" alt="Imagen del proyecto" class="img-fluid">
</a>
</div>
<div class="row">
<div class="col-lg-12 card-content">
<p class="project-name">Aliwen de Quillota</p>
<p class="project-detail">Ubicación del proyecto <br/> Xm2 | X días</p>
</div>
</div>
<div class="row">
<div class="col-lg-12 bottom-line"></div>
</div>
</div>
</div>
<!-- /09 -->
<!-- 10 -->
<div class="col-lg-3 col-md-3 col-sm-6 col-11 mx-auto">
<div class="col-lg-12 briones-project-card">
<div class="row">
<a href="#" class="col-lg-12 main-image text-center">
<img src="images/alicura-penablanca-thumbnail.jpg" alt="Imagen del proyecto" class="img-fluid">
</a>
</div>
<div class="row">
<div class="col-lg-12 card-content">
<p class="project-name">Alicura de Peñablanca</p>
<p class="project-detail">Ubicación del proyecto <br/> Xm2 | X días</p>
</div>
</div>
<div class="row">
<div class="col-lg-12 bottom-line"></div>
</div>
</div>
</div>
<!-- /10 -->
</div>
</div>
</div>
Aligning last div elements
Make the container set justify-content: flex-start and remove the mx-auto as the auto margins are pushing the contents to the middle in a flex context:
.briones-project-row {
margin-bottom: 2em;
justify-content: flex-start; /* there is also a utility class for this is preferred */
}
.briones-project-card {
background-color: #ffffff;
box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.34);
-webkit-box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.34);
-moz-box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.34);
margin-bottom: 3em;
}
.briones-project-card .main-image {
padding: 0;
}
.briones-project-card .main-image img {
width: 100%;
}
.briones-project-card .main-image img:hover {
opacity: 0.8;
}
.briones-project-card .card-content {
text-align: center;
}
.briones-project-card .card-content .project-name {
font-weight: 600;
color: #2d2d2d;
margin-top: 0.9em;
margin-bottom: 0.7em;
line-height: 1.3em;
min-height: 40px;
max-height: 40px;
}
.briones-project-card .card-content .project-detail {
font-weight: 400;
color: #737373;
line-height: 1.3em;
}
.briones-project-card .bottom-line {
position: absolute;
bottom: 0;
width: 100%;
height: 6px;
background-color: #DA3D0D;
}
.briones-primary-btn-container {
margin-top: 2em;
}
.briones-primary-btn {
background-color: #DA3D0D;
color: #ffffff;
font-weight: 400;
border: none;
border-radius: 0;
padding: 0.5em 3em;
}
.briones-primary-btn:hover {
background-color: #232323;
color: #ffffff;
}
<!-- Bootstrap CDN -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-12">
<!-- /Row One -->
<div class="row briones-project-row">
<!-- 01 -->
<div class="col-lg-3 col-md-3 col-sm-6 col-11">
<div class="col-lg-12 briones-project-card">
<div class="row">
<a href="#" class="col-lg-12 main-image text-center">
<img src="images/don-pedro-limache-thumbnail.jpg" alt="Imagen del proyecto" class="img-fluid">
</a>
</div>
<div class="row">
<div class="col-lg-12 card-content">
<p class="project-name">Don Pedro de Limache</p>
<p class="project-detail">Ubicación del proyecto <br/> Xm2 | X días</p>
</div>
</div>
<div class="row">
<div class="col-lg-12 bottom-line"></div>
</div>
</div>
</div>
<!-- /01 -->
<!-- 02 -->
<div class="col-lg-3 col-md-3 col-sm-6 col-11">
<div class="col-lg-12 briones-project-card">
<div class="row">
<a href="#" class="col-lg-12 main-image text-center">
<img src="images/dona-barbara-casablanca-thumbnail.jpg" alt="Imagen del proyecto" class="img-fluid">
</a>
</div>
<div class="row">
<div class="col-lg-12 card-content">
<p class="project-name">Doña Bárbara de Casablanca</p>
<p class="project-detail">Ubicación del proyecto <br/> Xm2 | X días</p>
</div>
</div>
<div class="row">
<div class="col-lg-12 bottom-line"></div>
</div>
</div>
</div>
<!-- /02 -->
<!-- 03 -->
<div class="col-lg-3 col-md-3 col-sm-6 col-11">
<div class="col-lg-12 briones-project-card">
<div class="row">
<a href="#" class="col-lg-12 main-image text-center">
<img src="images/ayelen-oriente-quillota-thumbnail.jpg" alt="Imagen del proyecto" class="img-fluid">
</a>
</div>
<div class="row">
<div class="col-lg-12 card-content">
<p class="project-name">Ayelen Oriente de Quilota</p>
<p class="project-detail">Ubicación del proyecto <br/> Xm2 | X días</p>
</div>
</div>
<div class="row">
<div class="col-lg-12 bottom-line"></div>
</div>
</div>
</div>
<!-- /03 -->
<!-- 04 -->
<div class="col-lg-3 col-md-3 col-sm-6 col-11">
<div class="col-lg-12 briones-project-card">
<div class="row">
<a href="#" class="col-lg-12 main-image text-center">
<img src="images/rey-felipe-casablanca-thumbnail.jpg" alt="Imagen del proyecto" class="img-fluid">
</a>
</div>
<div class="row">
<div class="col-lg-12 card-content">
<p class="project-name">Rey Felipe de Casablanca</p>
<p class="project-detail">Ubicación del proyecto <br/> Xm2 | X días</p>
</div>
</div>
<div class="row">
<div class="col-lg-12 bottom-line"></div>
</div>
</div>
</div>
<!-- /04 -->
<!-- 05 -->
<div class="col-lg-3 col-md-3 col-sm-6 col-11">
<div class="col-lg-12 briones-project-card">
<div class="row">
<a href="#" class="col-lg-12 main-image text-center">
<img src="images/ayelen-poniente-quillota-thumbnail.jpg" alt="Imagen del proyecto" class="img-fluid">
</a>
</div>
<div class="row">
<div class="col-lg-12 card-content">
<p class="project-name">Ayelen Poniente de Quillota</p>
<p class="project-detail">Ubicación del proyecto <br/> Xm2 | X días</p>
</div>
</div>
<div class="row">
<div class="col-lg-12 bottom-line"></div>
</div>
</div>
</div>
<!-- /05 -->
<!-- 06 -->
<div class="col-lg-3 col-md-3 col-sm-6 col-11">
<div class="col-lg-12 briones-project-card">
<div class="row">
<a href="#" class="col-lg-12 main-image text-center">
<img src="images/esmeralda-de-limache-thumbnail.jpg" alt="Imagen del proyecto" class="img-fluid">
</a>
</div>
<div class="row">
<div class="col-lg-12 card-content">
<p class="project-name">Esmeralda de Limache</p>
<p class="project-detail">Ubicación del proyecto <br/> Xm2 | X días</p>
</div>
</div>
<div class="row">
<div class="col-lg-12 bottom-line"></div>
</div>
</div>
</div>
<!-- /06 -->
<!-- 07 -->
<div class="col-lg-3 col-md-3 col-sm-6 col-11">
<div class="col-lg-12 briones-project-card">
<div class="row">
<a href="#" class="col-lg-12 main-image text-center">
<img src="images/paqari-de-villa-alemana-thumbnail.jpg" alt="Imagen del proyecto" class="img-fluid">
</a>
</div>
<div class="row">
<div class="col-lg-12 card-content">
<p class="project-name">Paqari de Villa Alemana</p>
<p class="project-detail">Ubicación del proyecto <br/> Xm2 | X días</p>
</div>
</div>
<div class="row">
<div class="col-lg-12 bottom-line"></div>
</div>
</div>
</div>
<!-- /07 -->
<!-- 08 -->
<div class="col-lg-3 col-md-3 col-sm-6 col-11">
<div class="col-lg-12 briones-project-card">
<div class="row">
<a href="#" class="col-lg-12 main-image text-center">
<img src="images/lobelias-de-placilla-de-penuelas-thumbnail.jpg" alt="Imagen del proyecto" class="img-fluid">
</a>
</div>
<div class="row">
<div class="col-lg-12 card-content">
<p class="project-name">Las Lobelias de Placilla de Peñuelas</p>
<p class="project-detail">Ubicación del proyecto <br/> Xm2 | X días</p>
</div>
</div>
<div class="row">
<div class="col-lg-12 bottom-line"></div>
</div>
</div>
</div>
<!-- /08 -->
<!-- 09 -->
<div class="col-lg-3 col-md-3 col-sm-6 col-11">
<div class="col-lg-12 briones-project-card">
<div class="row">
<a href="#" class="col-lg-12 main-image text-center">
<img src="images/aliwen-quillota-thumbnail.jpg" alt="Imagen del proyecto" class="img-fluid">
</a>
</div>
<div class="row">
<div class="col-lg-12 card-content">
<p class="project-name">Aliwen de Quillota</p>
<p class="project-detail">Ubicación del proyecto <br/> Xm2 | X días</p>
</div>
</div>
<div class="row">
<div class="col-lg-12 bottom-line"></div>
</div>
</div>
</div>
<!-- /09 -->
<!-- 10 -->
<div class="col-lg-3 col-md-3 col-sm-6 col-11">
<div class="col-lg-12 briones-project-card">
<div class="row">
<a href="#" class="col-lg-12 main-image text-center">
<img src="images/alicura-penablanca-thumbnail.jpg" alt="Imagen del proyecto" class="img-fluid">
</a>
</div>
<div class="row">
<div class="col-lg-12 card-content">
<p class="project-name">Alicura de Peñablanca</p>
<p class="project-detail">Ubicación del proyecto <br/> Xm2 | X días</p>
</div>
</div>
<div class="row">
<div class="col-lg-12 bottom-line"></div>
</div>
</div>
</div>
<!-- /10 -->
</div>
</div>
</div>
remove mx-auto from the 9th card.
change mx-auto from the 10th card to me-auto
.briones-project-row {
margin-bottom: 2em;
}
.briones-project-card {
background-color: #ffffff;
box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.34);
-webkit-box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.34);
-moz-box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.34);
margin-bottom: 3em;
}
.briones-project-card .main-image {
padding: 0;
}
.briones-project-card .main-image img {
width: 100%;
}
.briones-project-card .main-image img:hover {
opacity: 0.8;
}
.briones-project-card .card-content {
text-align: center;
}
.briones-project-card .card-content .project-name {
font-weight: 600;
color: #2d2d2d;
margin-top: 0.9em;
margin-bottom: 0.7em;
line-height: 1.3em;
min-height: 40px;
max-height: 40px;
}
.briones-project-card .card-content .project-detail {
font-weight: 400;
color: #737373;
line-height: 1.3em;
}
.briones-project-card .bottom-line {
position: absolute;
bottom: 0;
width: 100%;
height: 6px;
background-color: #DA3D0D;
}
.briones-primary-btn-container {
margin-top: 2em;
}
.briones-primary-btn {
background-color: #DA3D0D;
color: #ffffff;
font-weight: 400;
border: none;
border-radius: 0;
padding: 0.5em 3em;
}
.briones-primary-btn:hover {
background-color: #232323;
color: #ffffff;
}
<!-- Bootstrap CDN -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-12">
<!-- /Row One -->
<div class="row briones-project-row">
<!-- 01 -->
<div class="col-lg-3 col-md-3 col-sm-6 col-11 mx-auto">
<div class="col-lg-12 briones-project-card">
<div class="row">
<a href="#" class="col-lg-12 main-image text-center">
<img src="images/don-pedro-limache-thumbnail.jpg" alt="Imagen del proyecto" class="img-fluid">
</a>
</div>
<div class="row">
<div class="col-lg-12 card-content">
<p class="project-name">Don Pedro de Limache</p>
<p class="project-detail">Ubicación del proyecto <br/> Xm2 | X días</p>
</div>
</div>
<div class="row">
<div class="col-lg-12 bottom-line"></div>
</div>
</div>
</div>
<!-- /01 -->
<!-- 02 -->
<div class="col-lg-3 col-md-3 col-sm-6 col-11 mx-auto">
<div class="col-lg-12 briones-project-card">
<div class="row">
<a href="#" class="col-lg-12 main-image text-center">
<img src="images/dona-barbara-casablanca-thumbnail.jpg" alt="Imagen del proyecto" class="img-fluid">
</a>
</div>
<div class="row">
<div class="col-lg-12 card-content">
<p class="project-name">Doña Bárbara de Casablanca</p>
<p class="project-detail">Ubicación del proyecto <br/> Xm2 | X días</p>
</div>
</div>
<div class="row">
<div class="col-lg-12 bottom-line"></div>
</div>
</div>
</div>
<!-- /02 -->
<!-- 03 -->
<div class="col-lg-3 col-md-3 col-sm-6 col-11 mx-auto">
<div class="col-lg-12 briones-project-card">
<div class="row">
<a href="#" class="col-lg-12 main-image text-center">
<img src="images/ayelen-oriente-quillota-thumbnail.jpg" alt="Imagen del proyecto" class="img-fluid">
</a>
</div>
<div class="row">
<div class="col-lg-12 card-content">
<p class="project-name">Ayelen Oriente de Quilota</p>
<p class="project-detail">Ubicación del proyecto <br/> Xm2 | X días</p>
</div>
</div>
<div class="row">
<div class="col-lg-12 bottom-line"></div>
</div>
</div>
</div>
<!-- /03 -->
<!-- 04 -->
<div class="col-lg-3 col-md-3 col-sm-6 col-11 mx-auto">
<div class="col-lg-12 briones-project-card">
<div class="row">
<a href="#" class="col-lg-12 main-image text-center">
<img src="images/rey-felipe-casablanca-thumbnail.jpg" alt="Imagen del proyecto" class="img-fluid">
</a>
</div>
<div class="row">
<div class="col-lg-12 card-content">
<p class="project-name">Rey Felipe de Casablanca</p>
<p class="project-detail">Ubicación del proyecto <br/> Xm2 | X días</p>
</div>
</div>
<div class="row">
<div class="col-lg-12 bottom-line"></div>
</div>
</div>
</div>
<!-- /04 -->
<!-- 05 -->
<div class="col-lg-3 col-md-3 col-sm-6 col-11 mx-auto">
<div class="col-lg-12 briones-project-card">
<div class="row">
<a href="#" class="col-lg-12 main-image text-center">
<img src="images/ayelen-poniente-quillota-thumbnail.jpg" alt="Imagen del proyecto" class="img-fluid">
</a>
</div>
<div class="row">
<div class="col-lg-12 card-content">
<p class="project-name">Ayelen Poniente de Quillota</p>
<p class="project-detail">Ubicación del proyecto <br/> Xm2 | X días</p>
</div>
</div>
<div class="row">
<div class="col-lg-12 bottom-line"></div>
</div>
</div>
</div>
<!-- /05 -->
<!-- 06 -->
<div class="col-lg-3 col-md-3 col-sm-6 col-11 mx-auto">
<div class="col-lg-12 briones-project-card">
<div class="row">
<a href="#" class="col-lg-12 main-image text-center">
<img src="images/esmeralda-de-limache-thumbnail.jpg" alt="Imagen del proyecto" class="img-fluid">
</a>
</div>
<div class="row">
<div class="col-lg-12 card-content">
<p class="project-name">Esmeralda de Limache</p>
<p class="project-detail">Ubicación del proyecto <br/> Xm2 | X días</p>
</div>
</div>
<div class="row">
<div class="col-lg-12 bottom-line"></div>
</div>
</div>
</div>
<!-- /06 -->
<!-- 07 -->
<div class="col-lg-3 col-md-3 col-sm-6 col-11 mx-auto">
<div class="col-lg-12 briones-project-card">
<div class="row">
<a href="#" class="col-lg-12 main-image text-center">
<img src="images/paqari-de-villa-alemana-thumbnail.jpg" alt="Imagen del proyecto" class="img-fluid">
</a>
</div>
<div class="row">
<div class="col-lg-12 card-content">
<p class="project-name">Paqari de Villa Alemana</p>
<p class="project-detail">Ubicación del proyecto <br/> Xm2 | X días</p>
</div>
</div>
<div class="row">
<div class="col-lg-12 bottom-line"></div>
</div>
</div>
</div>
<!-- /07 -->
<!-- 08 -->
<div class="col-lg-3 col-md-3 col-sm-6 col-11 mx-auto">
<div class="col-lg-12 briones-project-card">
<div class="row">
<a href="#" class="col-lg-12 main-image text-center">
<img src="images/lobelias-de-placilla-de-penuelas-thumbnail.jpg" alt="Imagen del proyecto" class="img-fluid">
</a>
</div>
<div class="row">
<div class="col-lg-12 card-content">
<p class="project-name">Las Lobelias de Placilla de Peñuelas</p>
<p class="project-detail">Ubicación del proyecto <br/> Xm2 | X días</p>
</div>
</div>
<div class="row">
<div class="col-lg-12 bottom-line"></div>
</div>
</div>
</div>
<!-- /08 -->
<!-- 09 -->
<div class="col-lg-3 col-md-3 col-sm-6 col-11">
<div class="col-lg-12 briones-project-card">
<div class="row">
<a href="#" class="col-lg-12 main-image text-center">
<img src="images/aliwen-quillota-thumbnail.jpg" alt="Imagen del proyecto" class="img-fluid">
</a>
</div>
<div class="row">
<div class="col-lg-12 card-content">
<p class="project-name">Aliwen de Quillota</p>
<p class="project-detail">Ubicación del proyecto <br/> Xm2 | X días</p>
</div>
</div>
<div class="row">
<div class="col-lg-12 bottom-line"></div>
</div>
</div>
</div>
<!-- /09 -->
<!-- 10 -->
<div class="col-lg-3 col-md-3 col-sm-6 col-11 me-auto">
<div class="col-lg-12 briones-project-card">
<div class="row">
<a href="#" class="col-lg-12 main-image text-center">
<img src="images/alicura-penablanca-thumbnail.jpg" alt="Imagen del proyecto" class="img-fluid">
</a>
</div>
<div class="row">
<div class="col-lg-12 card-content">
<p class="project-name">Alicura de Peñablanca</p>
<p class="project-detail">Ubicación del proyecto <br/> Xm2 | X días</p>
</div>
</div>
<div class="row">
<div class="col-lg-12 bottom-line"></div>
</div>
</div>
</div>
<!-- /10 -->
</div>
</div>
</div>
I am trying to align my demo text below my image. I am currently using bootstrap, but how can I do align this below my image and ::after between divs an icon > layout
<section>
<h2 class="main-title">
<font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Test process</font></font>
</h2>
<div class="container demo">
<div class="row" style="text-align: center;">
<div class="steps">
<img src="https://code.google.com/images/developers.png" style="height: 80px;" />
</div>
<div class="col-md-6 col-xs-6">
<h2 class="steps__title">How It Works</h2>
<p>demo</p>
</div>
</div>
<div class="row" style="text-align: center;">
<div class="steps">
<img src="https://code.google.com/images/developers.png" style="height: 80px;" />
</div>
<div class="col-md-6 col-xs-6">
<h2 class="steps__title">How It Works</h2>
<p>demo</p>
</div>
</div>
<div class="row" style="text-align: center;">
<div class="steps">
<img src="https://code.google.com/images/developers.png" style="height: 80px;" />
</div>
<div class="col-md-6 col-xs-6">
<h2 class="steps__title">How It Works</h2>
<p>demo</p>
</div>
</div>
</div>
</section>
Firstly you are using very wrong Bootstrap.
Please research how to use container, row, flex and column on Bootstrap. Check this here. Secondly, always use separate divs in col.
That's my snippet check this and please that you preview full page.
.icon img {
margin-top: 10px;
}
.details h2 {
font-weight: 400;
font-size: 25px;
color:#515f7f;
}
.details p {
margin-top: -5px;
}
<!DOCTYPE html>
<html>
<head>
<title>arg0-container</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
</head>
<body>
<section class="mt-5">
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="icon d-flex">
<img src="https://code.google.com/images/developers.png" height="80px" />
<div class="details ml-4 mt-2 text-center d-block">
<h2>How It <br> Works</h2>
<p>Demo</p>
</div>
</div>
<p class="ml-2 mt-3">Lorem ipsum dolor sit amet!</p>
</div>
<div class="col-md-4">
<div class="icon d-flex">
<img src="https://code.google.com/images/developers.png" height="80px" />
<div class="details ml-4 mt-2 text-center d-block">
<h2>How It <br> Works</h2>
<p>Demo</p>
</div>
</div>
<p class="ml-2 mt-3">Lorem ipsum dolor sit amet!</p>
</div>
<div class="col-md-4">
<div class="icon d-flex">
<img src="https://code.google.com/images/developers.png" height="80px" />
<div class="details ml-4 mt-2 text-center d-block">
<h2>How It <br> Works</h2>
<p>Demo</p>
</div>
</div>
<p class="ml-2 mt-3">Lorem ipsum dolor sit amet!</p>
</div>
</div>
</div>
</section>
</body>
</html>
I have a card in which there is button (Start button) which won't go to the center of the card.
I tried center-align class, but that won't do it. I also tried using my id and class and trying text-align: center; in my css. But that did not work either.
Don't know what I'm missing.
Here is what I have:
This is what I want:
Here is the full html:
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
<link rel="stylesheet" type="text/css" href="css/style.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<!--navbar-->
<header>
<nav>
<div class="nav-wrapper light-blue darken-3">
Kviz
<!--
<ul id="nav-mobile" class="left hide-on-med-and-down">
<li>test</li>
</ul>
-->
</div>
</nav>
</header>
<main>
<div class="row">
<div class="col s12 m12 l6 xl6">
<div class="card">
<div class="card-image waves-effect waves-block waves-light">
<img class="activator" src="images/kvizslika.jpg">
</div>
<div class="card-content">
<span class="card-title activator grey-text text-darken-4">Kako se radi kviz ?
<a class="waves-effect light-blue darken-3 btn activator right">Instrukcije</a>
</span>
</div>
<div class="card-reveal">
<span class="card-title grey-text text-darken-4">Instrukcije<i class="material-icons right">close</i></span>
<p>Here is some more information about this product that is only revealed once clicked on.</p>
<div class="card-tabs">
<ul class="tabs tabs-fixed-width">
<li class="tab"><a class="active" href="#korak1">Poeni</a></li>
<li class="tab">Odgovori</li>
<li class="tab">Vreme</li>
</ul>
</div>
<div class="card-content grey lighten-4">
<div id="korak1">Test 1. Bla bla. <br/> Bla bla.</div>
<div id="korak2">Test 2</div>
<div id="korak3">Test 3</div>
</div>
</div>
</div>
</div>
<div class="col s12 m12 l6 xl6">
<div class="card">
<div class="row">
<div class="col s12 m12">
<div class="card light-blue darken-3">
<div class="card-content white-text">
<span class="card-title naslovPrijava">Prijava</span>
</div>
</div>
</div>
<div class="col s12 m12">
<div class="card">
<div class="card-content">
<div class="row">
<div class="col s6 m6">
<div class="card pomeriKarticu light-blue darken-3 center">
<div class="card-content white-text">
<span class="card-title naslovUcesnik">Učesnik 1:</span>
</div>
</div>
</div>
</div>
<form>
<div class="input-field">
<input id="first_name" type="text" class="validate">
<label for="first_name">Ime</label>
</div>
<div class="input-field">
<input id="last_name" type="text" class="validate">
<label for="last_name">Prezime</label>
</div>
</form>
</div>
</div>
</div>
<div class="col s6 m6">
<div class="card">
<div class="card-content">
<div class="row">
<div class="col s6 m6">
<div class="card pomeriKarticu light-blue darken-3 center">
<div class="card-content white-text">
<span class="card-title naslovUcesnik">Učesnik 2:</span>
</div>
</div>
</div>
</div>
<form>
<div class="input-field">
<input id="first_name2" type="text" class="validate">
<label for="first_name2">Ime</label>
</div>
<div class="input-field">
<input id="last_name2" type="text" class="validate">
<label for="last_name2">Prezime</label>
</div>
</form>
</div>
</div>
</div>
<div class="col s6 m6">
<div class="card">
<div class="card-content">
<div class="row">
<div class="col s6 m6">
<div class="card pomeriKarticu light-blue darken-3 center">
<div class="card-content white-text">
<span class="card-title naslovUcesnik">Učesnik 3:</span>
</div>
</div>
</div>
</div>
<form>
<div class="input-field">
<input id="first_name3" type="text" class="validate">
<label for="first_name3">Ime</label>
</div>
<div class="input-field">
<input id="last_name3" type="text" class="validate">
<label for="last_name3">Prezime</label>
</div>
</form>
</div>
</div>
</div>
</div>
<button class="btn-large waves-effect waves-light light-blue darken-3 dugmeStart" type="submit" name="action">Start
<i class="material-icons right">send</i>
</button>
</div>
</div>
</div>
</div>
</main>
<footer class="page-footer light-blue darken-4">
<div class="footer-copyright">
<div class="container">
<center> © 2017 VTŠ Apps Team </center>
</div>
</div>
</footer>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
</body>
</html>
Here is the full css:
body {
display: flex;
min-height: 100vh;
flex-direction: column;
background-color: rgb(232,232,232);
}
main {
flex: 1 0 auto;
}
.tabs .tab a{
color:#00ACC1;
}
.tabs .tab a:hover,.tabs .tab a.active {
background-color:transparent;
color:#00ACC1;
}
.tabs .tab.disabled a,.tabs .tab.disabled a:hover {
color:rgba(102,147,153,0.7);
}
.tabs .indicator {
background-color:#00ACC1;
}
.naslovPrijava{
font-size: 20px !important;
text-align: center;
height: 18px;
}
.naslovUcesnik{
font-size: 18px !important;
text-align: left;
margin-left:-15px;
margin-top: -15px;
}
.pomeriKarticu{
margin-left:-35px;
height: 50px;
}
.dugmeStart{
text-align: center;
}
You have to use the center-align class on a parent element of the button, so I added a parent with class="center-align"
body {
display: flex;
min-height: 100vh;
flex-direction: column;
background-color: rgb(232, 232, 232);
}
main {
flex: 1 0 auto;
}
.tabs .tab a {
color: #00ACC1;
}
.tabs .tab a:hover,
.tabs .tab a.active {
background-color: transparent;
color: #00ACC1;
}
.tabs .tab.disabled a,
.tabs .tab.disabled a:hover {
color: rgba(102, 147, 153, 0.7);
}
.tabs .indicator {
background-color: #00ACC1;
}
.naslovPrijava {
font-size: 20px !important;
text-align: center;
height: 18px;
}
.naslovUcesnik {
font-size: 18px !important;
text-align: left;
margin-left: -15px;
margin-top: -15px;
}
.pomeriKarticu {
margin-left: -35px;
height: 50px;
}
.dugmeStart {
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<!--navbar-->
<header>
<nav>
<div class="nav-wrapper light-blue darken-3">
Kviz
<!--
<ul id="nav-mobile" class="left hide-on-med-and-down">
<li>test</li>
</ul>
-->
</div>
</nav>
</header>
<main>
<div class="row">
<div class="col s12 m12 l6 xl6">
<div class="card">
<div class="card-image waves-effect waves-block waves-light">
<img class="activator" src="images/kvizslika.jpg">
</div>
<div class="card-content">
<span class="card-title activator grey-text text-darken-4">Kako se radi kviz ?
<a class="waves-effect light-blue darken-3 btn activator right">Instrukcije</a>
</span>
</div>
<div class="card-reveal">
<span class="card-title grey-text text-darken-4">Instrukcije<i class="material-icons right">close</i></span>
<p>Here is some more information about this product that is only revealed once clicked on.</p>
<div class="card-tabs">
<ul class="tabs tabs-fixed-width">
<li class="tab"><a class="active" href="#korak1">Poeni</a></li>
<li class="tab">Odgovori</li>
<li class="tab">Vreme</li>
</ul>
</div>
<div class="card-content grey lighten-4">
<div id="korak1">Test 1. Bla bla. <br/> Bla bla.</div>
<div id="korak2">Test 2</div>
<div id="korak3">Test 3</div>
</div>
</div>
</div>
</div>
<div class="col s12 m12 l6 xl6">
<div class="card">
<div class="row">
<div class="col s12 m12">
<div class="card light-blue darken-3">
<div class="card-content white-text">
<span class="card-title naslovPrijava">Prijava</span>
</div>
</div>
</div>
<div class="col s12 m12">
<div class="card">
<div class="card-content">
<div class="row">
<div class="col s6 m6">
<div class="card pomeriKarticu light-blue darken-3 center">
<div class="card-content white-text">
<span class="card-title naslovUcesnik">Učesnik 1:</span>
</div>
</div>
</div>
</div>
<form>
<div class="input-field">
<input id="first_name" type="text" class="validate">
<label for="first_name">Ime</label>
</div>
<div class="input-field">
<input id="last_name" type="text" class="validate">
<label for="last_name">Prezime</label>
</div>
</form>
</div>
</div>
</div>
<div class="col s6 m6">
<div class="card">
<div class="card-content">
<div class="row">
<div class="col s6 m6">
<div class="card pomeriKarticu light-blue darken-3 center">
<div class="card-content white-text">
<span class="card-title naslovUcesnik">Učesnik 2:</span>
</div>
</div>
</div>
</div>
<form>
<div class="input-field">
<input id="first_name2" type="text" class="validate">
<label for="first_name2">Ime</label>
</div>
<div class="input-field">
<input id="last_name2" type="text" class="validate">
<label for="last_name2">Prezime</label>
</div>
</form>
</div>
</div>
</div>
<div class="col s6 m6">
<div class="card">
<div class="card-content">
<div class="row">
<div class="col s6 m6">
<div class="card pomeriKarticu light-blue darken-3 center">
<div class="card-content white-text">
<span class="card-title naslovUcesnik">Učesnik 3:</span>
</div>
</div>
</div>
</div>
<form>
<div class="input-field">
<input id="first_name3" type="text" class="validate">
<label for="first_name3">Ime</label>
</div>
<div class="input-field">
<input id="last_name3" type="text" class="validate">
<label for="last_name3">Prezime</label>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="center-align">
<button class="btn-large waves-effect waves-light light-blue darken-3 dugmeStart" type="submit" name="action">Start
<i class="material-icons right">send</i>
</button>
</div>
</div>
</div>
</div>
</div>
</main>
<footer class="page-footer light-blue darken-4">
<div class="footer-copyright">
<div class="container">
<center> © 2017 VTŠ Apps Team </center>
</div>
</div>
</footer>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
</body>
</html>
You can use margin to achieve this also
.dugmeStart {
text-align: center;
display: block;/**Added This**/
margin: 0 auto; /**Added This**/
}