How to place images like in the photo, inline-block does not work

Question

How to place images like in the photo, inline-block does not work

Navigation

#1 by (1 votes)
#2 by (-1 votes)

0

I would like to put the instagram feed images as it comes out in the photo, I try to display inline-block, they should be sorted on their bootstrap column but it does not work, some suggestion?

/*------------- MEJORAS ------------*/
.clearfix{
  clear: both;
}


/*------------- GENERAL ------------*/

body{
  overflow-x: hidden;
  color: #8d8d8d;
}

h2, h3, h5{
  font-family: Montserrat;
  font-weight: 400;
  text-transform: uppercase;
  font-weight: 900;
}


h2:not(.diferenteNoNegrita){
  font-weight: 900;
}

p{
  line-height: 2em;
}

p:not(.diferenteArticleNoPadding) {
  font-family: 'Open Sans';
  padding: 20px 0;
}

/*PONERLO INDIVIDUAL*/
hr{
  margin:0;
  width: 40px;
  border: 1px solid black;
  /*NO VA COLOR EN HR!!!!!! */
  color: rgb(122, 76, 30);
}

i:not(.sinColorSepia){
  color: rgb(122, 76, 30);
}

section{
  padding: 70px 0;
}

a:not(.linkSinUppercase){
  text-transform: uppercase;
  text-decoration: none;
  transition: all linear .1s;
}

a:hover{
  transform: scale(1.05);
}

a:hover:not(.btnNegro){
  text-decoration: none;
  color: black;
}

span{
  font-style: oblique;
  font-weight: 100;
  text-transform: lowercase;
}

.spanCapitalize{
  text-transform: capitalize;
}

.primeraLetraCapitalize{
  text-transform: capitalize;
}

.subtituloNegrita{
  font-weight: 900;
  font-style: oblique;
}

.marginIcon{
  transform: scale(1.8);
  margin-right: 12px;
}

.row{
  padding: 12px 0;
}

.ImagesWidth100px{
  width: 100%;

}

.btn{
  border-radius: 3px;
  border: 1px solid black;
  padding: 5px 5px;
  font-weight: 500;
  letter-spacing: 3px;
  width: 200px;
}

/*------------- SECTION HERO------------*/
#hero{
  background: rgb(240,240,240) url('../img/backgrounds/bg-header.jpg') no-repeat fixed center bottom / cover;
  height: 100vh;
}

#hero.text{
  font-family: Lato;
  text-align: center;
  letter-spacing: 0.8em;
  font-size: 25px;
}

#hero h1{
  font-weight: 100;
}

#hero p{
  font-family: Lato;
  font-weight: 100;
  font-size: 18px;
  letter-spacing: 0.6em;
}

.fa-bars{
  position: fixed;
  padding: 10px;
  font-size: 30px;
  right:0;
  z-index: 999;
}

/*------------- SECTION 1 PROCESO CREATIVO------------*/

.firma{
  float: right;
}

.numeroRelativos{
  position: relative;
  padding-top: 80px;
}

.numeroRelativos.uno::before{
  content: '01';
  font-size: 8em;
  font-weight: 400;
  position: absolute;
  top: -20px;
  left: 20px;
  font-family: "Arial";
  opacity: .1;
}
.numeroRelativos.dos::before{
  content: '02';
  font-size: 8em;
  font-weight: 400;
  position: absolute;
  top: -20px;
  left: 20px;
  font-family: "Arial";
  opacity: .1;
}
.numeroRelativos.tres::before{
  content: '03';
  font-size: 8em;
  font-weight: 400;
  position: absolute;
  top: -20px;
  left: 20px;
  font-family: "Arial";
  opacity: .1;
}
.numeroRelativos.cuatro::before{
  content: '04';
  font-size: 8em;
  font-weight: 400;
  position: absolute;
  top: -20px;
  left: 20px;
  font-family: "Arial";
  opacity: .1;
}

.extraEspacio{
  margin-top: 80px;
}

.btnNegro{
  background-color: black;
  color: white;
  display: block;
  text-align: center;
  margin: 0 auto;
}

.btnNegro:hover{
  text-decoration: none;
  color: white;
}

/*---------------SECTION 2 ARTICLES---------------*/

section:nth-child(2){
  padding: 40px;
  text-align: center;
  background: #000 url('../img/backgrounds/bg-skills.jpg') no-repeat fixed center / cover;
  color: white;
}

.section3 i{
  font-size: 30px;
  padding-bottom: 10px;
}

.section3 article div{
  font-size: 30px;
}
.section3 article {
  border: 1px solid white;
  padding: 30px;
}

.section3 article p{
  font-size: 15px;
  font-style: oblique;
}


/*---------------SECTION 3 AGENCIA VOCACIONAL ---------------*/
.sello{
  position: absolute;
  top: 10px;
  right: 0;
}
.relativos{
  position: relative;
}

.claimCruz{
  display: flex;
  align-items: center;
  position: relative;
}

.logoX{
  width: 200px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  opacity: .4;
  z-index: -1;
}

.spanCentrado{
  display: block;
  margin: 0 auto;
  width: 80%;
}

.btnBlanco{
  color: black;
  background-color: white;
  display: block;
  text-align: center;
  float: right;
}


/*PROBLEMA PORQUE NO ENTRA EN SU ROW, NO DA HEIGHT!!!!*/
.paddingExtra{
  padding: 20px 0;
}


/*---------------SECTION 4 VIDEOS---------------*/
#video {
  position: relative;
  text-align: center;
  color: #fff;
  background: rgba(0,0,0,0) url("../img/backgrounds/bg-video.jpg") no-repeat fixed center top / cover;
  padding: 150px 0;
}


#video .roller{
  position: absolute;
  width: 50%;
  height: 100%;
  right: 0;
  top: 0;
  background: url("../img/backgrounds/looping-blanco.png") no-repeat bottom right / contain;
}

/*---------------SECTION 5 MONTAÑAS---------------*/
.hrSinMargin0{
  display: block;
  margin: 0 auto;
  margin-bottom: 40px;
}

.btnBlanco2{
  display: block;
  color: black;
  text-align: center;
  margin: 0 auto;
  background-color: white;
}

section:nth-child(5){
  background: rgb(242, 241, 239) url('../img/backgrounds/looping-blanco.png') no-repeat bottom right / contain;
}


/*---------------SECTION 6 SERVICIOS INTEGRADOS---------------*/
.rodarNoria{
  display: block;
  width: 80px;
  margin: 0 auto;
  animation: rotar 3s infinite linear;
}

@keyframes rotar {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(90deg);
  }
  50% {
    transform: rotate(180deg);
  }
  75% {
    transform: rotate(270deg);
  }
  100% {
    transform: rotate(360deg);
  }
}



/*---------------SECTION 7 EL CONTACTO ESENCIAL---------------*/
section:nth-child(7){
  background-color: rgb(59, 60, 61);

}

input{
  color: white;
  border: 0;
  border-bottom: 1px solid #84847E;
  background-color: inherit;
  width: 100%;
}

textarea{
  color: white;
  border: 0;
  border-bottom: 1px solid #84847E;
  background-color: inherit;
  resize: none;
  width: inherit;
}

.btnEmail{
  color: white;
  margin-top: 20px;
  border-radius: 2px;
  width: 100px;
  background-color: black;
  border: 0;
  float: right;
  cursor: pointer;
}


/*------------------------FOOTER----------------------------*/
.extraPaddingTopFooter{
  padding-top: 80px;
}

footer{
text-align: center;
}

li{
  list-style: none;
}

.displayInlineInstagram article ul li{
  display: inline;
  width: 20%;
}

footer{
  background: url('../img/backgrounds/bg-atracciones.png') no-repeat bottom center / contain fixed;
  font-size: .9em;
}

.linkSinUppercase{
color: black;
font-weight: 700;
}

footer .pSinPadding{
  padding-top: 0;
}


/*------------------------COLORES LINEAS----------------------------*/
.row{
border: 2px solid red;
}
.col-lg-8, .col-lg-4, .col-lg-3, .col-lg-2, .col-12, .col-md-6, .col-md-8, .col-md-4, .col-md-3, .col-lg-12{
border: 2px solid blue;
}



/*------------------------ KEYFRAMES----------------------------*/

 <!DOCTYPE html>
<html lang="es">
<head>
  <title>[MINIMA] - Inicio</title>
  <meta name="description" content="Minima es una agencia de publicidad que oferece servicios integrales en comunicación">
  <!-- Codificación -->
  <meta charset="UTF-8">
  <!-- Fuentes  -->
  <link href="https://fonts.googleapis.com/css?family=Lato:100,300|Montserrat|Open+Sans" rel="stylesheet">
  <!-- Estilos -->
  <link type="text/css" rel="stylesheet" href="css/bootstrap-reboot.min.css">       <!--  BOOTSTRAP  -->
  <link type="text/css" rel="stylesheet" href="css/bootstrap-grid.min.css">       <!--  BOOTSTRAP  -->
  <link type="text/css" rel="stylesheet" href="css/font-awesome.min.css">         <!--  ICONOS  -->
  <link type="text/css" rel="stylesheet" href="css/style.css">                    <!--  ESTILOS  -->
  <!-- Responsive -->
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">
  <!-- Robots -->
  <meta name="robots"  content="index,follow">
  <!-- Favicones -->
  <link type="image/png" rel="icon" href="img/basic/favicon16.png">
  <link rel="shortcut icon" href="img/basic/favicon16.png">
  <link rel="apple-touch-icon" href="img/basic/favicon16.png">
  <link rel="apple-touch-icon" sizes="72x72" href="img/basic/favicon72.png">
  <link rel="apple-touch-icon" sizes="114x114" href="img/basic/favicon114.png">
  <link rel="apple-touch-icon" sizes="114x114" href="img/basic/favicon144.png">
</head>
<body>
  <div class="fa fa-bars"></div>
  <header id="hero" class="text">
    <h1>[Minima]</h1>
    <p>- Descubramos juntos -</p>
  </header>
  <main>
    <section>
      <div class="container">
        <div class="row">
          <div class="col-lg-8">
            <header>
              <h2>Un <span>creativo</span> proceso</h2>
              <hr>
              <p class="subtituloNegrita"><i class="fa fa-star-o marginIcon"></i>Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim</p>
            </header>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea comm consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
            <img src="img/graphic/signature-black.png" alt="Firma" class="firma">
          </div>
          <div class="col-lg-4">
            <img src="img/backgrounds/bg-process.jpg" alt="Modelo" class="ImagesWidth100px">
          </div>
        </div>
        <div class="row paddingArriba">
          <div class="col-lg-3 col-md-6 col-sm-6 numeroRelativos uno">
            <article>
              <h3><span>Un café</span></h3>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>
            </article>
          </div>
          <div class="col-lg-3 col-md-6 col-sm-6 numeroRelativos dos">
            <article>
              <h3><span>Un diseño</span></h3>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>
            </article>
          </div>
          <div class="col-lg-3 col-md-6 col-sm-6 numeroRelativos tres">
            <article>
              <h3><span>Un proceso</span></h3>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>
            </article>
          </div>
          <div class="col-lg-3 col-md-6 col-sm-6 numeroRelativos cuatro">
            <article>
              <h3><span>Un producto</span></h3>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>
            </article>
          </div>
        </div>
        <div class="row extraEspacio">
          <div class="col-lg-12">
            <a href="#" class="btn btnNegro">¿Comenzamos?</a>
          </div>
        </div>

      </div>
    </section>
    <section class="section3">
      <div class="container">
        <div class="row">
          <div class="col-lg-3 col-md-6">
            <article>
              <i class="fa fa-sliders sinColorSepia"></i>
              <div>752</div>
              <p class="diferenteArticleNoPadding">Proyectos realizados</p>
            </article>
          </div>
          <div class="col-lg-3 col-md-6">
            <article>
              <i class="fa fa-sitemap sinColorSepia"></i>
              <div>495</div>
              <p class="diferenteArticleNoPadding">Clientes satisfechos</p>
            </article>
          </div>
          <div class="col-lg-3 col-md-6">
            <article>
              <i class="fa fa-paper-plane-o sinColorSepia"></i>
              <div>16</div>
              <p class="diferenteArticleNoPadding">Premios ganados</p>
            </article>
          </div>
          <div class="col-lg-3 col-md-6">
            <article>
              <i class="fa fa-puzzle-piece sinColorSepia"></i>
              <div>+900</div>
              <p class="diferenteArticleNoPadding">Litros de café</p>
            </article>
            <div class="clearfix"></div>
          </div>
        </div>
      </div>
    </section>
    <section>
      <div class="container">
        <div class="row relativos">
          <div class="col-md">
            <header>
              <h2>Una <span>agencia</span> vocacional</h2>
              <hr>
              <p class="subtituloNegrita"><i class="fa fa-microphone marginIcon" ></i>Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim</p>
            </header>
          </div>
          <div class="col-md">
            <img src="img/graphic/badge.png" alt="Sello" class="sello">
          </div>
        </div>
        <div class="row">
          <div class="col-md-4 claimCruz">
            <img src="img/graphic/contain-cross.png" alt="logo X" class="logoX">
            <p><span class="spanCentrado"><span class="primeraLetraCapitalize">Somos</span> un equipo creativo con el factor diferenciador como sello de identidad. Un frenético hervidero de locuras.</span></p>
          </div>
          <div class="col-md-8">
            <article>
              <h5><span><span class="primeraLetraCapitalize">Lo</span> que hacemos</span></h5>
              <p class="diferenteArticleNoPadding">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea comm consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
            </article>
          </div>
        </div>
        <div class="row paddingExtra">
          <div class="col-12">
            <a href="#" class="btn btnBlanco">Conoce más</a>
          </div>

        </div>
      </div>
    </section>
    <section section id="video">
      <!-- <video src="videofile.ogg" autoplay poster="posterimage.jpg"> -->

      <!-- </video> -->
      <div class="roller"></div>
      <div class="container">
        <div class="row">
          <div class="col-lg-6">
            <h2 class="diferenteNoNegrita">Nuestro trailer</h2>
            <button>
              <i class="fa fa-play-circle"></i>
            </button>
          </div>
        </div>
      </div>
    </section>
    <section>
      <div class="container">
        <div class="row">
          <div class="col-md-4">
            <header>
              <h2><i class="fa fa-object-ungroup"></i><span class="spanCapitalize"> Proyectos</span> recientes</h2>
            </header>
            <p><span class="spanCapitalize">Montañas</span> es un producto limpio, sencillo y actual. La simplicidad y la claridad de de la composición describen la filosofía empresarial.</p>
            <hr class="hrSinMargin0">
            <a href="#" class="btn btnBlanco2">Adéntrate</a>
          </div>
          <div class="col-md-8">
            <img src="img/graphic/feature-imac-1.png" alt="Ordenador" class="ImagesWidth100px">
          </div>
        </div>
      </div>
    </section>
    <section>
      <div class="container">
        <header>
          <h2>Unos <span>servicios</span> integrados</h2>
          <hr>
          <p class="subtituloNegrita"><i class="fa fa-plug marginIcon"></i>Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim</p>
        </header>
        <div class="row">
          <div class="col-md-4">
            <article>
              <h5><i class="fa fa-magic marginIcon"></i>Diseño <span>moderno</span></h5>
              <p>Architecto labore sequi quos placeat hic vitae nihil veritatis dolorum nostrum facere dicta optio solut explicabo perferendis culpa sunt.</p>
            </article>
          </div>
          <div class="col-md-4">
            <article>
              <h5><i class="fa fa-heart-o marginIcon"></i>Marca <span>corporativa</span></h5>
              <p>Architecto labore sequi quos placeat hic vitae nihil veritatis dolorum nostrum facere dicta optio solut explicabo perferendis culpa sunt.</p>
            </article>
          </div>
          <div class="col-md-4">
            <article>
              <h5><i class="fa fa-leaf marginIcon"></i>Publicidad <span>& seo</span></h5>
              <p>Architecto labore sequi quos placeat hic vitae nihil veritatis dolorum nostrum facere dicta optio solut explicabo perferendis culpa sunt.</p>
            </article>
          </div>
          <div class="col-md-4">
            <article>
              <h5><i class="fa fa-laptop marginIcon"></i>Multi <span>dispositivo</span></h5>
              <p>Architecto labore sequi quos placeat hic vitae nihil veritatis dolorum nostrum facere dicta optio solut explicabo perferendis culpa sunt.</p>
            </article>
          </div>
          <div class="col-md-4">
            <article>
              <h5><i class="fa fa-eye marginIcon"></i>Soporte <span>eficiente</span></h5>
              <p>Architecto labore sequi quos placeat hic vitae nihil veritatis dolorum nostrum facere dicta optio solut explicabo perferendis culpa sunt.</p>
            </article>
          </div>
          <div class="col-md-4">
            <article>
              <h5><i class="fa fa-globe marginIcon"></i>Carácter <span>profesional</span></h5>
              <p>Architecto labore sequi quos placeat hic vitae nihil veritatis dolorum nostrum facere dicta optio solut explicabo perferendis culpa sunt.</p>
            </article>
          </div>
        </div>
        <img src="img/basic/logo.png" alt="Logo" class="rodarNoria">
      </div>

    </section>

    <section>
      <div class="container">
        <header>
          <h2>El <span>contacto</span> esencial</h2>
          <hr>
          <p class="subtituloNegrita"><i class="fa fa-fire-extinguisher marginIcon" ></i>Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim</p>
        </header>
        <form action="gestordedatos.php" method="post">
          <div class="row justify-content-center">
            <div class="col-sm-5">
              <input type="text" placeholder="Nombre..." size="40px">
            </div>
            <div class="col-sm-5">
              <input type="email" placeholder="Email..." size="40px">
            </div>
          </div>
          <div class="row justify-content-center">
            <div class="col-sm-10">
              <textarea placeholder="Mensaje..." id="message"></textarea>
              <input type="submit" value="Enviar" class="btnEmail">
            </div>
          </div>
        </form>
      </div>
    </section>
  </main>
  <footer>
    <div class="footerBackground"></div>
    <div class="container">
      <div class="row extraPaddingTopFooter">
        <div class="col-md-3">
          <article>
            <h4>Sobre [minima]</h4>
            <p class="pSinPadding">Lorem ipsum dolor sit, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
          </article>
        </div>
        <div class="col-md-3">
          <h4>Dónde estamos</h4>
          <address>
            <ul>
              <li><i class="fa fa-home"></i> 112 W. 34th Street, NY</li>
              <li><i class="fa fa-phone"></i> <a href="tel:+12129462707">(+1) 212-946-2707</a></li>
              <li><i class="fa fa-envelope-o"></i> [email protected]</li>
              <li><i class="fa fa-clock-o"></i> Mon-Fri: 9am-5pm</li>
            </ul>
          </address>
        </div>
        <div class="col-md-3">
          <article>
            <h4>Últimos posts</h4>
            <ul>
              <li>
                <a href="#" class="linkSinUppercase"><i class="fa fa-angle-double-right"></i> El postureo del UX</a>
              </li>
              <li>
                <i class="fa fa-calendar"></i> <time datetime="2016-01-10" title="10 de enero de 2016">10 Ene</time> &mdash; <cite>por Laura Robles</cite>
              </li>
              <li>
                <a href="#" class="linkSinUppercase"><i class="fa fa-angle-double-right"></i> Donde hay pelo hay alegría</a>
              </li>
              <li>
                <i class="fa fa-calendar"></i>
                <time datetime="2016-01-06" title="6 de enero de 2016">6 Ene</time> &mdash; <cite>por Sergio Álvarez</cite>
              </li>
            </ul>
          </article>
        </div>
        <div class="col-md-3 displayInlineInstagram">
          <article>
            <h4>Instagram Feed</h4>
            <ul>
              <li>
                <a href="#">
                  <figure>
                    <img src="img/instagram-feed/instagram-feed-1.jpg" alt="Instagram">
                  </figure>
                </a>
              </li>
              <li>
                <a href="#">
                  <figure>
                    <img src="img/instagram-feed/instagram-feed-2.jpg" alt="Instagram">
                  </figure>
                </a>
              </li>
              <li>
                <a href="#">
                  <figure>
                    <img src="img/instagram-feed/instagram-feed-3.jpg" alt="Instagram">
                  </figure>
                </a>
              </li>
              <li>
                <a href="#">
                  <figure>
                    <img src="img/instagram-feed/instagram-feed-4.jpg" alt="Instagram">
                  </figure>
                </a>
              </li>
            </ul>
          </article>
        </div>
      </div>
      <div class="row">
        <div class="col-12">
          <p>Hecho con <del>amor</del> un teclado y café <i class="fa fa-heart-o"></i></p>
          <p>
            <small><a href="#">Aviso Legal y privacidad</a> | <a href="#">&copy; 2016 [minima]</a></small>
          </p>
        </div>
      </div>
    </div>
  </footer>
  <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
  <script src="js/app.js" charset="utf-8"></script>

</body>

</html>

html css

asked by francisco dwq 28.01.2018 в 17:48

source

2 answers

math problems xhr status 0 ajax

score 1 · Answer 1

It is solved by adding <ul :

d-flex align-content-around flex-wrap

at <li>

col-md-6 col-sm-3

Removed your css and linkie the bootstrap css .

Why did I choose col-md-6 and col-sm-3?

Since you have a container that the total is 12. When you place col-md-6 at the first 2 <li> , what you will do is reach 12, and order the other 2 <li> below.

And when placing col-sm-3 , when the visitor enters from mobile, the grid will be divided into 3. (4.img x 3 = 12, complete the total and displayed horizontally)

I give you the guide to Bootstrap Flex to see other ways to sort content.

EDIT

Modify the url of the images so that they work and be able to try better.

I removed a lot of unrelated code to be able to do more concrete tests. It's deicr, just leave the <html>,<head>,<body> y <footer>

 <!DOCTYPE html>
<html lang="es">
<head>
  <title>[MINIMA] - Inicio</title>
  <meta name="description" content="Minima es una agencia de publicidad que oferece servicios integrales en comunicación">
  <!-- Codificación -->
  <meta charset="UTF-8">
  <!-- Fuentes  -->
  <link href="https://fonts.googleapis.com/css?family=Lato:100,300|Montserrat|Open+Sans" rel="stylesheet">
  <!-- Estilos -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <!--  BOOTSTRAP LINK WEB  -->
  <link type="text/css" rel="stylesheet" href="css/bootstrap-grid.min.css">       <!--  BOOTSTRAP  -->
  <link type="text/css" rel="stylesheet" href="css/font-awesome.min.css">         <!--  ICONOS  -->
  <link type="text/css" rel="stylesheet" href="css/style.css">                    <!--  ESTILOS  -->
  <!-- Responsive -->
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">
  <!-- Robots -->
  <meta name="robots"  content="index,follow">
  <!-- Favicones -->
  <link type="image/png" rel="icon" href="img/basic/favicon16.png">
  <link rel="shortcut icon" href="img/basic/favicon16.png">
  <link rel="apple-touch-icon" href="img/basic/favicon16.png">
  <link rel="apple-touch-icon" sizes="72x72" href="img/basic/favicon72.png">
  <link rel="apple-touch-icon" sizes="114x114" href="img/basic/favicon114.png">
  <link rel="apple-touch-icon" sizes="114x114" href="img/basic/favicon144.png">
<style>
ul {
list-style:none;
}
</style>
</head>
<body>
<footer>
    <div class="footerBackground"></div>
    <div class="container">
      <div class="row extraPaddingTopFooter">
        <div class="col-md-3">
          <article>
            <h4>Sobre [minima]</h4>
            <p class="pSinPadding">Lorem ipsum dolor sit, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
          </article>
        </div>
        <div class="col-md-3">
          <h4>Dónde estamos</h4>
          <address>
            <ul>
              <li><i class="fa fa-home"></i> 112 W. 34th Street, NY</li>
              <li><i class="fa fa-phone"></i> <a href="tel:+12129462707">(+1) 212-946-2707</a></li>
              <li><i class="fa fa-envelope-o"></i> [email protected]</li>
              <li><i class="fa fa-clock-o"></i> Mon-Fri: 9am-5pm</li>
            </ul>
          </address>
        </div>
        <div class="col-md-3">
          <article>
            <h4>Últimos posts</h4>
            <ul>
              <li>
                <a href="#" class="linkSinUppercase"><i class="fa fa-angle-double-right"></i> El postureo del UX</a>
              </li>
              <li>
                <i class="fa fa-calendar"></i> <time datetime="2016-01-10" title="10 de enero de 2016">10 Ene</time> &mdash; <cite>por Laura Robles</cite>
              </li>
              <li>
                <a href="#" class="linkSinUppercase"><i class="fa fa-angle-double-right"></i> Donde hay pelo hay alegría</a>
              </li>
              <li>
                <i class="fa fa-calendar"></i>
                <time datetime="2016-01-06" title="6 de enero de 2016">6 Ene</time> &mdash; <cite>por Sergio Álvarez</cite>
              </li>
            </ul>
          </article>
        </div>
        <div class="col-md-3 displayInlineInstagram">
          <article>
            <h4>Instagram Feed</h4>
             <ul class="d-flex align-content-around flex-wrap">
               <li  class="col-md-6 col-sm-3">
                <a href="#">
                  <figure>
                    <img src="https://i.imgur.com/azygQtb.png" alt="Instagram">
                  </figure>
                </a>
             </li>
             <li class="col-md-6 col-sm-3">
                <a href="#">
                  <figure class="img-responsive">
                    <img src="https://i.imgur.com/azygQtb.png" alt="Instagram">
                  </figure>
                </a>
             </li>
             <li class="col-md-6 col-sm-3">
                <a href="#">
                  <figure>
                    <img src="https://i.imgur.com/azygQtb.png" alt="Instagram">
                  </figure>
                </a>
             </li>
             <li class="col-md-6 col-sm-3">
                <a href="#">
                  <figure>
                    <img src="https://i.imgur.com/azygQtb.png" alt="Instagram">
                  </figure>
                </a>
             </li>
             </ul>
          </article>
        </div>
      </div>
      <div class="row">
        <div class="col-12">
          <p>Hecho con <del>amor</del> un teclado y café <i class="fa fa-heart-o"></i></p>
          <p>
            <small><a href="#">Aviso Legal y privacidad</a> | <a href="#">&copy; 2016 [minima]</a></small>
          </p>
        </div>
      </div>
    </div>
  </footer>
  <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
  <script src="js/app.js" charset="utf-8"></script>

</body>

</html>

score -1 · Answer 2

I added a class to the div that contains the information and I also added selectors, I commented on the code where I made the additions.

class="row extraPaddingTopFooter content-4"

I could not make the divs with the information be aligned with the div of the images.

I hope it serves you.

/*------------------------FOOTER----------------------------*/

.extraPaddingTopFooter {
  padding-top: 80px;
}

footer {
  text-align: center;
}


/*remuevo padding li*/

li {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul {
  margin: 0;
  padding: 0;
}


/*remuevo padding li*/


/*acomodo imagenes*/

.displayInlineInstagram article ul li {
  display: inline-block;
  height: auto;
  width: 40%;
  margin: 0;
  padding: 0;
}


/*acomodo imagenes*/

footer {
  background: url('../img/backgrounds/bg-atracciones.png') no-repeat bottom center / contain fixed;
  font-size: .9em;
}

.linkSinUppercase {
  color: black;
  font-weight: 700;
}

footer .pSinPadding {
  padding-top: 0;
}

div.container {
  height: auto;
  width: 100%;
}


/*clase agregada*/

div.content-4 {
  height: auto;
  width: 100%;
}


/*clase agregada*/


/*acomodo contenido dentro <div class="row extraPaddingTopFooter content-4">*/

div.col-md-3 {
  height: auto;
  width: 20%;
  margin: 0 1% 1% 1%;
  display: inline-block;
  padding: 1%;
  text-align: center;
}


/*acomodo contenido dentro <div class="row extraPaddingTopFooter content-4">*/


/*------------------------COLORES LINEAS----------------------------*/

.row {
  border: 2px solid red;
}

.col-lg-8,
.col-lg-4,
.col-lg-3,
.col-lg-2,
.col-12,
.col-md-6,
.col-md-8,
.col-md-4,
.col-md-3,
.col-lg-12 {
  border: 2px solid blue;
}


/*------------------------ KEYFRAMES----------------------------*/

<footer>
  <div class="footerBackground"></div>
  <div class="container">
    <div class="row extraPaddingTopFooter content-4"><!--clase agregada-->
      <!--added class-->
      <div class="col-md-3">
        <article>
          <h4>Sobre [minima]</h4>
          <p class="pSinPadding">Lorem ipsum dolor sit, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
        </article>
      </div>
      <div class="col-md-3">
        <h4>Dónde estamos</h4>
        <address>
            <ul>
              <li><i class="fa fa-home"></i> 112 W. 34th Street, NY</li>
              <li><i class="fa fa-phone"></i> <a href="tel:+12129462707">(+1) 212-946-2707</a></li>
              <li><i class="fa fa-envelope-o"></i> [email protected]</li>
              <li><i class="fa fa-clock-o"></i> Mon-Fri: 9am-5pm</li>
            </ul>
          </address>
      </div>
      <div class="col-md-3">
        <article>
          <h4>Últimos posts</h4>
          <ul>
            <li>
              <a href="#" class="linkSinUppercase"><i class="fa fa-angle-double-right"></i> El postureo del UX</a>
            </li>
            <li>
              <i class="fa fa-calendar"></i> <time datetime="2016-01-10" title="10 de enero de 2016">10 Ene</time> &mdash; <cite>por Laura Robles</cite>
            </li>
            <li>
              <a href="#" class="linkSinUppercase"><i class="fa fa-angle-double-right"></i> Donde hay pelo hay alegría</a>
            </li>
            <li>
              <i class="fa fa-calendar"></i>
              <time datetime="2016-01-06" title="6 de enero de 2016">6 Ene</time> &mdash; <cite>por Sergio Álvarez</cite>
            </li>
          </ul>
        </article>
      </div>
      <div class="col-md-3 displayInlineInstagram">
        <article>
          <h4>Instagram Feed</h4>
          <ul>
            <li>
              <a href="#">
                <figure>
                  <img src="img/instagram-feed/instagram-feed-1.jpg" alt="Instagram">
                </figure>
              </a>
            </li>
            <li>
              <a href="#">
                <figure>
                  <img src="img/instagram-feed/instagram-feed-2.jpg" alt="Instagram">
                </figure>
              </a>
            </li>
            <li>
              <a href="#">
                <figure>
                  <img src="img/instagram-feed/instagram-feed-3.jpg" alt="Instagram">
                </figure>
              </a>
            </li>
            <li>
              <a href="#">
                <figure>
                  <img src="img/instagram-feed/instagram-feed-4.jpg" alt="Instagram">
                </figure>
              </a>
            </li>
          </ul>
        </article>
      </div>
    </div>
    <div class="row">
      <div class="col-12">
        <p>Hecho con <del>amor</del> un teclado y café <i class="fa fa-heart-o"></i></p>
        <p>
          <small><a href="#">Aviso Legal y privacidad</a> | <a href="#">&copy; 2016 [minima]</a></small>
        </p>
      </div>
    </div>
  </div>
</footer>