0

me gustaria poner las imagenes de instagram feed como sale ahi en la foto, intento hacer display inline-block, deberian ordenarse asi sobre su columna de bootstrap pero no funciona, algunasugerencia?

introducir la descripción de la imagen aquí

/*------------- 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>

3
  • Ya que usas bootstrap puedes poner tus imagenes en un col-md-3 y ordenas las fotos con display: flex y usas un justify-content: space-around ó between el 28 ene. 2018 a las 17:34
  • Hola @franciscodwq. Te respondí con una posible solución, dime si te funciona.
    – Juan
    el 28 ene. 2018 a las 18:51
  • Hola francisco dwq, te recomiendo que leas cómo crear un ejemplo mínimo verificable. Aunque compartes el código relacionado con el problema, también compartes muchísimo código que es innecesario y sólo crea ruido en la pregunta. Si limitas el código al mínimo necesario para reproducir el problema, se lo pondrás más fácil para los usuarios que puedan ayudarte.
    – Alvaro Montoro
    el 28 ene. 2018 a las 22:54

2 respuestas 2

1

Se solucióna agregando al <ul:

d-flex align-content-around flex-wrap

a los <li>

col-md-6 col-sm-3

Removi tu css y linkie el css de bootstrap.

¿Porque elegi col-md-6 y col-sm-3?

Ya que tienes un contenedor que el total es 12. Al colocar col-md-6 a los 2 primeros <li>, lo que hará es llegar a 12, y ordenar los otros 2 <li> por debajo.

Y al colocar col-sm-3, cuando el visitante ingrese desde movil, la grilla se dividirá en 3. (4.img x 3= 12, completaría el total y se visualiza horizontalmente)


Te dejo la guia de Bootstrap Flex para ver otras formas de ordenar el contenido.

EDIT

Modifique el url de las imagenes para que funcionen y poder probar mejor.

Removi bastante código no relacionado para poder hacer pruebas mas concretas. Es deicr, solamente deje el <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>

-1

Agregué una clase al div que contiene la información y también agregué selectores, comenté el codigo en donde hice los añadidos.

class="row extraPaddingTopFooter content-4"

No pude hacer que los divs con la información quedaran alineados con el div de las imágenes.

Espero que te sirva.

/*------------------------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>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.