microdata type NewsArticle in index page and double content Organization - seo

My question about double content.
In my index page (home page) i have news block. Each news article refers to the id="microdataCompany" itemscope itemtype="http://schema.org/Organization"
Part of my code:
<section itemscope itemtype="http://schema.org/ItemList">
<div class="news">
<h2 itemprop="name">News</h2>
<article class="first-news">
<ul>
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/NewsArticle" itemref="microdataCompany">
<meta itemprop="position" content="1" />
<a href="http://example.com/" title="Первая статья" itemprop="mainEntityOfPage url">
<span>Date Published:<span itemprop="datePublished"> 2017-02-14</span>
<br>Date: <span itemprop="dateModified">2017-02-14</span><em itemprop="headline"><br>New article</em></span>
</a>
<p itemprop="description">Lorein ipsum Lorein ipsum Lorein ipsumLorein ipsumLorein ipsumLorein ipsumLorein ipsumLorein ipsumLorein ipsumLorein ipsumLorein ipsum Lorein ipsum Lorein ipsum Lorein ipsumLorein ipsumLorein ipsumLorein ipsumLorein ipsumLorein ipsumLorein ipsumLorein ipsumLorein ipsum Lorein ipsum Lorein ipsum Lorein ipsumLorein ipsumLorein ipsumLorein ipsumLorein ipsumLorein ipsumLorein ipsumLorein ipsumLorein ipsum</p>
<h4 itemprop="author" itemscope itemtype="https://schema.org/Person"> Autor: <span itemprop="name">Black Jack</span></h4>
</li>
</ul>
</article>
<article class="second-news">
<ul>
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/NewsArticle" itemref="microdataCompany">
<meta itemprop="position" content="1" />
<a href="http://example.com/" title="Первая статья" itemprop="mainEntityOfPage url">
<span>Date Published:<span itemprop="datePublished"> 2017-02-14</span>
<br>Date: <span itemprop="dateModified">2017-02-14</span><em itemprop="headline"><br>New article</em></span>
</a>
<p itemprop="description">Lorein ipsum Lorein ipsum Lorein ipsumLorein ipsumLorein ipsumLorein ipsumLorein ipsumLorein ipsumLorein ipsumLorein ipsumLorein ipsum Lorein ipsum Lorein ipsum Lorein ipsumLorein ipsumLorein ipsumLorein ipsumLorein ipsumLorein ipsumLorein ipsumLorein ipsumLorein ipsum Lorein ipsum Lorein ipsum Lorein ipsumLorein ipsumLorein ipsumLorein ipsumLorein ipsumLorein ipsumLorein ipsumLorein ipsumLorein ipsum</p>
<h4 itemprop="author" itemscope itemtype="https://schema.org/Person"> Autor: <span itemprop="name">Black Jack</span></h4>
</li>
</ul>
</article>
<article class="third-news">
<ul>
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/NewsArticle" itemref="microdataCompany">
<meta itemprop="position" content="1" />
<a href="http://example.com/" title="Первая статья" itemprop="mainEntityOfPage url">
<span>Date Published:<span itemprop="datePublished"> 2017-02-14</span>
<br>Date: <span itemprop="dateModified">2017-02-14</span><em itemprop="headline"><br>New article</em></span>
</a>
<p itemprop="description">Lorein ipsum Lorein ipsum Lorein ipsumLorein ipsumLorein ipsumLorein ipsumLorein ipsumLorein ipsumLorein ipsumLorein ipsumLorein ipsum Lorein ipsum Lorein ipsum Lorein ipsumLorein ipsumLorein ipsumLorein ipsumLorein ipsumLorein ipsumLorein ipsumLorein ipsumLorein ipsum Lorein ipsum Lorein ipsum Lorein ipsumLorein ipsumLorein ipsumLorein ipsumLorein ipsumLorein ipsumLorein ipsumLorein ipsumLorein ipsum</p>
<h4 itemprop="author" itemscope itemtype="https://schema.org/Person"> Autor: <span itemprop="name">Black Jack</span></h4>
</li>
</ul>
</article>
</div>
</section>
<aside class="aside-1" itemprop="publisher" id="microdataCompany" itemscope itemtype="http://schema.org/Organization">
<div class="service" itemprop="makesOffer" itemscope="" itemtype="http://schema.org/Offer">
<ul>
<li><a itemprop="url" href="/services/something/">something</a></li>
<li><a itemprop="url" href="/services/something/">something</a></li>
<li><a itemprop="url" href="/services/something/">something</a></li>
</ul>
</div>
<div class="contacts">
<a itemprop="url" href="http://example.com">
<div itemprop="name">Company</div>
</a>
<hr>
<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<strong>Adress: </strong>
<span itemprop="addressCountry">Country</span>,
<span itemprop="addressRegion">Region</span>,
<span itemprop="addressLocality">City</span>,
<span itemprop="streetAddress">street</span>.
<br>Postal index:
<span itemprop="postalCode">429384828</span>
<br>
</div>
<hr>
<strong>telephone : </strong><span itemprop="telephone"> +3 (678) 145-44-55 </span>
<br>
<b>Email : </b><span itemprop="email">maili#mail.com</span>
<br>
<strong>Founding: </strong><span itemprop="foundingDate"> 2000-01-01</span>
<br>
</div>
</aside>
In google mirodata validator we have double content (description Organization)
Image from google testing microdata
It is not good for SEO. Because google bot say thats its spam.
What do i do?

First of all, duplicate content is something different ("content that appears on more than one web page").
In your case, you have one Organization item that gets referenced as publisher of three NewsArticle items. This is the perfect solution for such a case.
The output in the SDTT shows you that Google understands it correctly. It lists the three NewsArticle items, and each NewsArticle has the Organization as publisher. In some cases, each news item might have a different organization as publisher, but in your case, it’s the same organization. That is, of course, not problematic: it is the same organization, so this should be represented in the structured data, too.

Related

Issues with importing vue resource

Description
I am creating a simple news publishing site for a personal project. At this stage, I have been trying to make use of the Http.get by using the VueResources but I am stuck on this error which I do not understand. I want to develop it without using the Vue CLI.
Additional Notes:
index.html is used in the public folder >>
vue.js <!DOCTYPE html>
<html lang="en">
**Error Code:**
app.js:1 Uncaught SyntaxError: Unexpected identifier
I have tried the following:
I searched through the internet and the results so far are to check for
import VueResource from 'vue-resource'
Vue.use(VueResource)
var app = new Vue({
el: '#form-id',
data: {
formStatus: false,
blog: [{
id: '',
title: '',
}
]
},
methods: {
},
mounted: function(){
}
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Dexterous - Technology News Site</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
crossorigin="anonymous">
</head>
<body>
<!--Navigation bar-->
<nav class="navbar fixed-top navbar-expand-sm navbar-light bg-light">
<a class="navbar-brand mb-0 h1">Dexterous</a>
<ul class="navbar-nav">
<li class="nav-item active"><a class="nav-link" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#">Highlights</a></li>
<li class="nav-item"><a class="nav-link" href="#">Categories</a></li>
</ul>
</nav>
<!--End of Navigation bar-->
<div class="container-fluid">
<div class="row">
<div class="col">
<!--Carousel Slides-->
<div id="dexterous-slides" class="carousel slide border rounded" data-ride="carousel" data-interval="5000">
<ol class="carousel-indicators">
<li data-target="#dexterous-slides" data-slide-to="0" class="active"></li>
<li data-target="#dexterous-slides" data-slide-to="1" class="active"></li>
<li data-target="#dexterous-slides" data-slide-to="2" class="active"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://picsum.photos/1110/370/?random" alt="cat" class="d-block w-100 h-100">
</div>
<div class="carousel-item">
<img src="https://picsum.photos/1110/370/?random" alt="cat" class="d-block w-100">
</div>
<div class="carousel-item">
<img src="https://picsum.photos/1110/370/?random" alt="cat" class="d-block w-100">
</div>
</div>
<a class="carousel-control-prev" href="#dexterous-slides" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#dexterous-slides" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!--End of Carousel Slides-->
</div>
</div>
<!--Action tools: Create a new post-->
<div id="form-id">
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="card-header">
<h5>Post Management</h5>
</div>
<div class="card-body">
<button v-on:click="formStatus = !formStatus" class="btn btn-light">➕ Add new Post</button>
<button v-on:click="" class="btn btn-light">📝 Manage Post</button>
</div>
</div>
</div>
</div>
<!--Form-->
<div class="row" v-if="formStatus">
<div class="col-md-12 mt-3">
<div class="card bg-light">
<div class="card-header">
<h3>Create a Post</h3>
</div>
<div class="card-body">
<form>
<div class="form-group">
<label for="blogTitle"><h5>Title:</h5></label>
<input type="text" v-model="blog.title" class="form-control" id="blogInput1" placeholder="enter blog title...">
</div>
<div class="form-group">
<label for="blogContent"><h5>Content:</h5></label>
<textarea class="form-control" v-model="blog.content" id="blogInput2" placeholder="enter content.."></textarea>
</div>
<button type="submit" v-on:click.prevent="posts" class="btn btn-primary mb-2">Add Post</button>
</form>
</div>
</div>
</div>
</div>
</div>
<!--Form end-->
<div class="row mt-3">
<div class="col-md-4">
<div class="card w-100" style="width:18rem;">
<div class="card-header"><h5>Year</h5></div>
<ul class="list-group list-group-flush">
<li class="list-group-item">2017</li>
<li class="list-group-item">2018</li>
<li class="list-group-item">2019</li>
</ul>
</div>
<div class="card w-100 mt-3" style="width:18rem;">
<div class="card-header"><h5>Posts</h5></div>
<ul class="ml-3 list-group list-group-flush">
<li class="list-group-item">Welcome to Dexterous</li>
<li class="list-group-item">New Javascript JS</li>
<li class="list-group-item">2019</li>
</ul>
</div>
</div>
<!--Content fields-->
<div class="col-md-8">
<div class="card">
<img class="card-img-top" src="https://picsum.photos/1110/150/?random" alt="New JavaScript">
<div class="card-body">
<h5 class="card-title">Welcome to Dexterous</h5>
<p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia et odit, numquam quo totam nam, ipsam praesentium sint sunt necessitatibus consectetur consequuntur delectus suscipit iure placeat optio recusandae dolorem id! Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia et odit, numquam quo totam nam, ipsam praesentium sint sunt necessitatibus consectetur consequuntur delectus suscipit iure placeat optio recusandae dolorem id! Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia et odit, numquam quo totam nam, ipsam praesentium sint sunt necessitatibus consectetur consequuntur delectus suscipit iure placeat optio recusandae dolorem id!</p>
Read more
</div>
</div>
</div>
</div>
<div class="row justify-content-end mb-3 ">
<div class="col-md-8">
<div class="card bg-light">
<img class="card-img-top" src="https://picsum.photos/1110/150/?random" alt="New JavaScript">
<div class="card-body">
<h5 class="card-title">New Javascript JS</h5>
<p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia et odit, numquam quo totam nam, ipsam praesentium sint sunt necessitatibus consectetur consequuntur delectus suscipit iure placeat optio recusandae dolorem id!</p>
Read more
</div>
</div>
</div>
</div>
</div>
<!--Functional scripts-->
<script src="https://cdn.jsdelivr.net/npm/vue-resource#1.5.1"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="../app.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
crossorigin="anonymous"></script>
</body>
</html>
Node.js and npm is updated ✅
Missing semicolon(So far I have not noticed any) ✅
The only problem was the import so I would just comment it out and bam!. The rest of the code would work.
Anyway to fix it?
VueResource is already available as a global variable when you imported it like this:
<script src="https://cdn.jsdelivr.net/npm/vue-resource#1.5.1"></script>
That means you can use Vue.use(VueResource); without having to re-import it like this: import VueResource from 'vue-resource'.
In your browser console, check if it's available by using this: typeof VueResource. If it returns a function, it works perfectly. Otherwise, it would return an undefined value.

bootstrap 4 carousel caption is not visible on small devices

I was practicing bootstrap 4 carousal example given in http://v4-alpha.getbootstrap.com/examples/ . carousal caption is not visible when testing it for mobile or small screen. Any help please.
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="first-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="First slide">
<div class="container">
<div class="carousel-caption d-none d-md-block text-left">
<h1>Example headline.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>
</div>
</div>
</div>
<div class="carousel-item">
<img class="second-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Second slide">
<div class="container">
<div class="carousel-caption d-none d-md-block">
<h1>Another example headline.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>
</div>
</div>
</div>
<div class="carousel-item">
<img class="third-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Third slide">
<div class="container">
<div class="carousel-caption d-none d-md-block text-right">
<h1>One more for good measure.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
Remove the classes d-none d-md-block from all of the carousel-caption classes, the class d-none gives the caption a display of none and the class d-md-block gives it a display of block for md and above screens.
Note: you may need to adjust the text size on smaller screens to make everything fit if you have a lot of text in your captions.
Here's what you ought to do:
Remove class d-none.
Remove class d-md-block.
associated with the carousel-caption class of Bootstrap carousel.
Actually, just removing the class "d-none" will do it for you.

Foundation Orbit Slider issue

I have a little problem in my site using "Orbit slider" in a lightbox ("Fancybox"). It works very well at the beginning, but if you click on the next slide it suddenly disappears and it doesn't shows the sider, It only shows when you do a scale in the browser or if you clic on the inspector panel of the browser.
¿Any help?
Here's my github:
https://github.com/iontorres/Fortuna-Web-Site.git
And my code:
<article id="evento1" href="#proyecto1" class="branding_proyecto fancybox">
<img src="img/1910-color.jpg" alt="Hola, Aqui hay un proyecto de branding, en caso que no lo veas">
<div class="branding_info_proyecto">
<h1>BAR 1910</h1>
<p>Branding / Web / Espacio </p>
</div>
</article>
<!-- ======== HERE GOES THE LIGHTBOX DE TAB BRANDING ============ -->
<div class="hide">
<div id="proyecto1" class="info gallery">
<a style="position:absolute; bottom:0px; left:400px; color:#fff; z-index:999; width:25px; height:25px; background:rgba(0,0,0,0.5); padding: 0px 10px 10px 7px; font-size:18px; display:none;" id="btn" href="#" > + </a>
<div class="proyect_inner_info">
<a style="color:#fff; position:absolute; right:10px; font-size:24px;" id="btnx" href="#"> - </a>
<h1>NGS Nutrición y Genética Saludable</h1>
<h2>Branding</h2>
<p> lorem ipsum lorem ipsum lorem ipsum lorem ipsumlorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsumlorem ipsum lorem ipsum</p>
</div>
<ul class="example-orbit" data-orbit>
<li class="active">
<img src="img/ngs-slider1.jpg" alt="slide 1" />
</li>
<li >
<img src="img/ngs-slider2.jpg" alt="slide 2" />
</li>
<li>
<img src="img/ngs-slider3.jpg" alt="slide 3" />
</li>
<li>
<img src="img/ngs-slider4.jpg" alt="slide 4" />
</li>
<li>
<img src="img/ngs-slider5.jpg" alt="slide 5" />
</li>
<li>
<img src="img/ngs-slider6.jpg" alt="slide 6" />
</li>
</ul>
</div>
</div>

Bootstrap columns in column

I am designinig a template to display a product image[i] and description[d] as following using twitter bootstrap 3 (Thing is I am not able to keep image and description together, they keep jumping around with different screen sizes)
REQUIREMENT:
1) for LARGE and MEDIUM it will be 2 columns
| |
|[i][d] [i][d]|
|[i][d] [i][d]|
|[i][d] |
| |
2) for SMALL it will be like 1 column (description still needs to be on its side)
| |
| [i][d] |
| [i][d] |
| [i][d] |
| [i][d] |
| [i][d] |
| |
3) for EXTRA SMALL it will be like 1 column but description will follow image
| |
|[i]|
|[d]|
|[i]|
|[d]|
|[i]|
|[d]|
|[i]|
|[d]|
|[i]|
|[d]|
| |
PROBLEM:
I have problem here with small screen as I get lot of space between [i] and [d]
|[i] [d]|
|[i] [d]|
|[i] [d]|
|[i] [d]|
|[i] [d]|
Also at some screen size (between medium and small) image of one row sticks itself at bottom of previous description
|[i] [d]|
| [i]|
|[d] [i]|
|[d] |
CODE:
I have the following HTML code that I am trying
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>2 Col Portfolio - Start Bootstrap Template</title>
<!-- Bootstrap Core CSS -->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/style.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Start Bootstrap</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
About
</li>
<li>
Services
</li>
<li>
Contact
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Page Content -->
<div class="container">
<!-- Page Header -->
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Page Heading
<small>Secondary Text</small>
</h1>
</div>
</div>
<!-- /.row -->
<!-- Project Row -->
<div class="row">
<div class="col-lg-6">
<div class="col-xs-6 col-sm-3 col-md-4">
<a href="#">
<img class="img-responsive" src="http://placehold.it/140x200" alt="">
</a>
</div>
<div class="col-xs-6 col-sm-6 col-md-8">
<h3>Project One</h3>
<h4>Subheading</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium veniam exercitationem expedita laborum at voluptate. Labore, voluptates totam at aut nemo deserunt rem magni pariatur quos perspiciatis atque eveniet unde.</p>
<a class="btn btn-primary" href="#">View Project <span class="glyphicon glyphicon-chevron-right"></span></a>
</div>
</div>
<div class="col-lg-6"> <!--I want this to behave like two rows, at small screen at some size image sticks itself at the bottom of previous View Project button-->
<div class="col-xs-6 col-sm-3 col-md-4">
<a href="#">
<img class="img-responsive" src="http://placehold.it/140x200" alt="">
</a>
</div>
<div class="col-xs-6 col-sm-6 col-md-8">
<h3>Project One</h3>
<h4>Subheading</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium veniam exercitationem expedita laborum at voluptate. Labore, voluptates totam at aut nemo deserunt rem magni pariatur quos perspiciatis atque eveniet unde.</p>
<a class="btn btn-primary" href="#">View Project <span class="glyphicon glyphicon-chevron-right"></span></a>
</div>
</div>
</div>
<!-- /.row -->
<!-- Project Row -->
<div class="row">
<div class="col-lg-6">
<div class="col-xs-6 col-sm-3 col-md-4">
<a href="#">
<img class="img-responsive" src="http://placehold.it/140x200" alt="">
</a>
</div>
<div class="col-xs-6 col-sm-6 col-md-8">
<h3>Project One</h3>
<h4>Subheading</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium veniam exercitationem expedita laborum at voluptate. Labore, voluptates totam at aut nemo deserunt rem magni pariatur quos perspiciatis atque eveniet unde.</p>
<a class="btn btn-primary" href="#">View Project <span class="glyphicon glyphicon-chevron-right"></span></a>
</div>
</div>
</div>
<!-- /.row -->
<hr>
<!-- Pagination -->
<div class="row text-center">
<div class="col-lg-12">
<ul class="pagination">
<li>
«
</li>
<li class="active">
1
</li>
<li>
2
</li>
<li>
3
</li>
<li>
4
</li>
<li>
5
</li>
<li>
»
</li>
</ul>
</div>
</div>
<!-- /.row -->
<hr>
<!-- Footer -->
<footer>
<div class="row">
<div class="col-lg-12">
<p>Copyright © Your Website 2014</p>
</div>
</div>
<!-- /.row -->
</footer>
</div>
<!-- /.container -->
<!-- jQuery not used yet-->
<script src="js/jquery.js"></script>
-->
<!-- Bootstrap Core JavaScript -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
</body>
</html>
Following is custom style.css just in case
body {
padding-top: 70px; /* Required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */
}
.portfolio-item {
margin-bottom: 25px;
}
footer {
margin: 50px 0;
}
h3 {
margin-top:0;
}
Thanks
Several issues:
You didn't nest your columns correctly and neither did the person who answered the question initially. Re-read the docs and look at the examples. When you nest columns inside columns you have to nest the row and use the same structure .row .col- .row .col-
Unnecessary use of col-X-12 in the case of the .page-header and the .pagination and .footer. If something is always fullwidth, don't use the grid system. This is in the documentation.
img-responsive makes images not go past their natural width, but the Bootstrap grid is fluid so at any given viewport width there will be a large gap unless you use larger images to compensate.
Every 12 columns at any given breakpoint requires a .clearfix using a responsive utility class or a new .row.
DEMO: https://jsbin.com/kubele
Mobile first basics:
col-sm = viewports 768px and up so if something is col-sm-4 that's the same as
col-md-4 and col-lg-4 and UNDER this will be full width.
col-md = viewports 992px and up so if something is col-md-8 it's the same as
col-lg-8 and UNDER that will be full width.
col-lg = viewports 1200px and up so if something is col-lg-8 anything under will be full width.
col-xs = covers all viewport sizes from 0 and up.
CSS:
Notes: Most people agree that 767px is a very high breakpoint for a lot of small viewport situations, to solve this on a case by case basis, and not write a crap load more code, the classes .col-xs-* were used and then CSS is used at the max-width to make the columns go full width. Bootstrap lacks vertical space unless you wrap your .btn in a <p> like all the examples you will find on their site and you'll also notice the lack of image next to text as the margins don't line up out of the box, this has been corrected.
body {
padding-top: 70px
}
.row.project-row > [class*="col-"] {
margin-bottom: 2%
}
#media (max-width:380px) {
.row.project-row [class*="col-"] {
width: 100%
}
}
#media (min-width:381px) {
.project-title {
margin-top: 0
}
}
HTML:
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Start Bootstrap</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
About
</li>
<li>
Services
</li>
<li>
Contact
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Page Content -->
<div class="container">
<!-- Page Header -->
<h1 class="page-header">Page Heading
<small>Secondary Text</small>
</h1>
<!-- Project Row -->
<div class="row project-row">
<!-- BEGIN grouping -->
<div class="col-md-6">
<div class="row">
<div class="col-sm-4 col-xs-4">
<a href="#">
<img class="img-responsive center-block" src="http://placehold.it/300x400" alt="">
</a>
</div>
<!-- /.col-sm-4 col-xs-4 -->
<div class="col-sm-8 col-xs-8">
<h3 class="project-title">Project One</h3>
<h4>Subheading</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium veniam exercitationem expedita laborum at voluptate. Labore, voluptates totam at aut nemo deserunt rem magni pariatur quos perspiciatis atque eveniet unde.</p>
<p> <a class="btn btn-primary" href="#">View Project <span class="glyphicon glyphicon-chevron-right"></span></a> </p>
</div>
<!-- /.col-sm-8 col-xs-8 -->
</div>
<!-- /.row (nested) -->
</div>
<!-- /.col-md-6 -->
<!-- END grouping -->
<!-- BEGIN grouping -->
<div class="col-md-6">
<div class="row">
<div class="col-sm-4 col-xs-4">
<a href="#">
<img class="img-responsive center-block" src="http://placehold.it/300x400" alt="">
</a>
</div>
<!-- /.col-sm-4 col-xs-4 -->
<div class="col-sm-8 col-xs-8">
<h3 class="project-title">Project One</h3>
<h4>Subheading</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium veniam exercitationem expedita laborum at voluptate. Labore, voluptates totam at aut nemo deserunt rem magni pariatur quos perspiciatis atque eveniet unde.</p>
<p> <a class="btn btn-primary" href="#">View Project <span class="glyphicon glyphicon-chevron-right"></span></a> </p>
</div>
<!-- /.col-sm-8 col-xs-8 -->
</div>
<!-- /.row (nested) -->
</div>
<!-- /.col-md-6 -->
<!-- END grouping -->
<!-- after every 12 columns put a clearfix or use a script because it's unlikely that all the boxes are the same height -->
<div class="clearfix hidden-sm"></div>
<!-- BEGIN grouping -->
<div class="col-md-6">
<div class="row">
<div class="col-sm-4 col-xs-4">
<a href="#">
<img class="img-responsive center-block" src="http://placehold.it/300x400" alt="">
</a>
</div>
<!-- /.col-sm-4 col-xs-4 -->
<div class="col-sm-8 col-xs-8">
<h3 class="project-title">Project One</h3>
<h4>Subheading</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium veniam exercitationem expedita laborum at voluptate. Labore, voluptates totam at aut nemo deserunt rem magni pariatur quos perspiciatis atque eveniet unde.</p>
<p> <a class="btn btn-primary" href="#">View Project <span class="glyphicon glyphicon-chevron-right"></span></a> </p>
</div>
<!-- /.col-sm-8 col-xs-8 -->
</div>
<!-- /.row (nested) -->
</div>
<!-- /.col-md-6 -->
<!-- END grouping -->
<!-- BEGIN grouping -->
<div class="col-md-6">
<div class="row">
<div class="col-sm-4 col-xs-4">
<a href="#">
<img class="img-responsive center-block" src="http://placehold.it/300x400" alt="">
</a>
</div>
<!-- /.col-sm-4 col-xs-4 -->
<div class="col-sm-8 col-xs-8">
<h3 class="project-title">Project One</h3>
<h4>Subheading</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium veniam exercitationem expedita laborum at voluptate. Labore, voluptates totam at aut nemo deserunt rem magni pariatur quos perspiciatis atque eveniet unde.</p>
<p> <a class="btn btn-primary" href="#">View Project <span class="glyphicon glyphicon-chevron-right"></span></a> </p>
</div>
<!-- /.col-sm-8 col-xs-8 -->
</div>
<!-- /.row (nested) -->
</div>
<!-- /.col-md-6 -->
<!-- END grouping -->
<!-- after every 12 columns put a clearfix or use a script because it's unlikely that all the boxes are the same height -->
<div class="clearfix hidden-sm"></div>
</div>
<!-- /.row -->
<hr>
<!-- Pagination -->
<div class="text-center">
<ul class="pagination">
<li>
«
</li>
<li class="active">
1
</li>
<li>
2
</li>
<li>
3
</li>
<li>
4
</li>
<li>
5
</li>
<li>
»
</li>
</ul>
</div>
<hr>
<!-- Footer -->
<footer>
<p>Copyright © Your Website 2014</p>
</footer>
</div>
<!-- /.container -->
It looks like you need to be a little more explicit when specifying your columns. You can probably get what you want by specifying the column widths on the immediate children of the row divs.
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
<!-- Image Content -->
</div>
<div class="col-xs-12 col-sm-8 col-md-8 col-lg-8">
<!-- Description -->
</div>
</div>
</div>
I made a Bootply as an example.

bootstrap: create of carousel of texts only

I'm trying to make a carousel of text only.
I copied the original example from http://getbootstrap.com/javascript/#carousel, removed the images and look at some other examples.
<div id="carousel-example-captions" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-example-captions" data-slide-to="0" class=""></li>
<li data-target="#carousel-example-captions" data-slide-to="1" class="active"></li>
<li data-target="#carousel-example-captions" data-slide-to="2" class=""></li>
</ol>
<div class="carousel-inner">
<div class="item">
<div class="carousel-caption">
<h3>First slide label</h3>
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
</div>
<div class="item active">
<div class="carousel-caption">
<h3>Second slide label</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="item">
<div class="carousel-caption">
<h3>Third slide label</h3>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
</div>
</div>
</div>
<a class="left carousel-control" href="#carousel-example-captions" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-captions" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
http://jsfiddle.net/yamikep/esy38/15/
However, the indicators are not well aligned now. What makes that happen?
Is there a simple way to have a carousel of text with bootstrap?
Thanks
The .carousel-indicator class has absolute positioning. The bottom property is set in media queries. You can override this in your css by adding the following:
.carousel-indicators {
bottom: 0;
}