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.
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 have a problem with the famous scrollspy of Bootstrap 3, i am trying and trying and nothing work. i set the data tags in body and named the .nav in the navigation here is the code:
<body data-spy="scroll" data-offset="150" data-target="#navegacion">
<div class="container">
<!-- row 1 NAVIGATION -->
<header>
<nav class="nav navbar navbar-right navbar-fixed-top" id="navegacion" name="" value="" placeholder="" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navegacion">
<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="#">
<img src="img/logo.jpg" alt="">
</a>
</div><!--navbar collapse-->
<div class="collapse navbar-collapse" id="navegacion">
<ul class="nav navbar-nav navbar-right" role="tablist">
<li class="active">ABOUT US</li>
<li>PRODUCTS</li>
<li>MEDIA</li>
<li>CONTACTS</li>
<li>EN</li>
<li>/</li>
<li>DE</li>
</ul>
</div><!-- navbar collapse-->
</nav>
</header>
i think i set all the tags correctly in the body, here is a part of the code:
<!-- row 2 ABOUT US -->
<div class="row" id="aboutUs">
<div class="col-lg-3 col-md-4">
<h2><strong>ABOUT US</strong></h2>
<img src="img/news.jpg" width="264px" height="190">
</div>
<div class="col-lg-9 col-md-8">
<br/>
<br/>
<br/>
<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
<p>The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.</p>
</div>
</div>
<!-- row 2 ABOUT US END-->
When i am over the nav with the mouse cursor i see the hover effect but nothing changes, when i click the menu, for example #aboutUs the document go to the correct position where the secction #aboutUs are but not active the button.
anyone have the same problem?
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;
}
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".