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;
}
Related
I have a button that has been set as position:fixed to the right of the page.
When its clicked it should open the modal however it doesn't do anything when clicked.
If i remove the position:fixed it works fine and the modal shows however this is not what I want as it needs to be fixed to the side
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script type="text/javascript" src="https://netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css"
rel="stylesheet" type="text/css">
<link href="https://pingendo.github.io/pingendo-bootstrap/themes/default/bootstrap.css"
rel="stylesheet" type="text/css">
</head>
<body>
<div class="navbar navbar-default navbar-static-top" style="height:80px;background-color:white;border-bottom:0px;">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-ex-collapse">
<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" style="padding-top:0px;"><img height="75" alt="Brand" src="logo260x80-2.png"></a>
</div>
<div class="collapse navbar-collapse" id="navbar-ex-collapse" style="border-top:0px;border-bottom:0px;">
<ul class="nav navbar-nav navbar-right" style="padding-top:20px;border-top:0px;border-bottom:0px;">
<li class="active">
Home
</li>
<li>
Contacts
</li>
</ul>
</div>
</div>
</div>
<div class="section">
<div class="background-image" style="background-image : url('headerbg3.jpg');"></div>
<div class="container">
<div class="row">
<div class="col-md-12" style="height:200px;"></div>
</div>
</div>
</div>
<button data-toggle="modal" data-target="#demo" type="button" style="position:fixed;right:0px;"
tab-index="1" id="showmodal" class="btn btn-lg btn-success">
<i class="fa fa-envelope fa-2x"></i>
</button>
<div class="section">
<div class="container">
<div class="row">
<div class="col-md-12">
<h1 class="text-center">Gallery</h1>
</div>
</div>
<div class="row">
<div class="col-md-4">
<a><img src="http://pingendo.github.io/pingendo-bootstrap/assets/placeholder.png" class="img-responsive"></a>
<h3>A title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisici elit, </p>
</div>
<div class="col-md-4">
<a><img src="http://pingendo.github.io/pingendo-bootstrap/assets/placeholder.png" class="img-responsive"></a>
<h2>A title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisici elit, </p>
</div>
<div class="col-md-4">
<a><img src="http://pingendo.github.io/pingendo-bootstrap/assets/placeholder.png" class="img-responsive"></a>
<h2>A ttile</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisici elit, </p>
</div>
</div>
<div class="row">
<div class="col-md-4">
<a><img src="http://pingendo.github.io/pingendo-bootstrap/assets/placeholder.png" class="img-responsive"></a>
<h3>A title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisici elit, </p>
</div>
<div class="col-md-4">
<a><img src="http://pingendo.github.io/pingendo-bootstrap/assets/placeholder.png" class="img-responsive"></a>
<h3>A title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisici elit, </p>
</div>
<div class="col-md-4">
<a><img src="http://pingendo.github.io/pingendo-bootstrap/assets/placeholder.png" class="img-responsive"></a>
<h2>A title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisici elit, </p>
</div>
</div>
</div>
</div>
<div class="modal fade" id="demo" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body...</p>
</div>
<div class="modal-footer">
<a class="btn btn-default" data-dismiss="modal">Close</a>
<a class="btn btn-primary">Save changes</a>
</div>
</div>
</div>
</div>
</body>
</html>
Above is the complete HTMl code of the page
The problem is that the button is hiding behind the section div and become unclickable. So to make the button appear before the section we apply z-index:1; style to the button and the code will look like:
<button data-toggle="modal" data-target="#demo" type="button" style="z-index:1;position:fixed;right:0px;" tab-index="1" id="showmodal" class="btn btn-lg btn-success">
or JSfiddle demo.
Note: Here you can read more about the z-index property.
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.
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.
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.
i have one image in a page which is inside of a thumbnail(using bootstrap 3) i want to center this image, but it goes to the left of the page. how can i center this thumbnail?
here's the code:
<div class="container">
<div class="row-fluid">
<div class="col-sm-12">
<div class="img-thumbnail">
<img class="img-responsive center-block" src="images/winning logo.png"
alt="...">
<div class="container">
<div class="caption">
<h5>Logo Design</h5>
</div>
</div>
</div>
</div>
</div>
</div>
to brian: it didn't work with my thumbnail inside a carousel. the width of the thumbnail extend(right and left) inside the carousel.
<div class="carousel-inner">
<div class="item active">
<div class="row text-center">
<div class="col-sm-12">
<a href="" class="thumbnail">
<img class="img-responsive center-block" src="images/winning
logo.png" alt="Slide">
<div class="carousel-caption">
<h4>CANYONLAND RENTALS</h4>
<p>Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. </p>
</div>
</a>
</div><!--END OF COL-SM-12-->
</div><!--END OF ROW-->
</div>
</div>
it resolved, need to change the word "thumbnail" to "img-thumbnail".