Vue - justifying text to the right inside a row - vue.js

I'm having some trouble formatting text properly inside rows.
Here's what I've got so far:
And the code which produces that result:
<div class="row justify-content-center py-lg-4">
<div class="col-circle-width order-lg-2">
<i class="icon-heart large-circle-dati"></i>
</div>
<div class="w-100 d-block d-sm-none"></div>
<div class="col-auto col-lg-3 order-lg-1 main-text-right">
<div class="text-center text-sm-left text-lg-right">
<strong>Top Text</strong>
<p>Bottom Text</p>
</div>
</div>
<div class="col-circle-width d-none d-lg-block order-lg-3"></div>
<div class="w-100 d-lg-none p-3"></div>
<div class="col-circle-width order-lg-4">
<i class="icon-heart large-circle-dati"></i>
</div>
<div class="w-100 d-block d-sm-none"></div>
<div class="col-auto col-lg-3 order-lg-5 main-text-left">
<div class="text-center text-sm-left">
<strong>Boreal Text</strong>
<p>Austral Text</p>
</div>
</div>
<div class="w-100 d-lg-none p-3"></div>
</div>
<div class="row justify-content-center py-lg-4">
<div class="col-circle-width order-lg-2">
<i class="icon-heart large-circle-dati"></i>
</div>
<div class="w-100 d-block d-sm-none"></div>
<div class="col-auto col-lg-3 order-lg-1 main-text-right">
<div class="text-center text-sm-left text-lg-right">
<strong>Septentrional Text</strong>
<p>Meridional Text</p>
</div>
</div>
<div class="col-circle-width d-none d-lg-block order-lg-3"></div>
<div class="w-100 d-lg-none p-3"></div>
<div class="col-circle-width order-lg-4">
<i class="icon-heart large-circle-dati"></i>
</div>
<div class="w-100 d-block d-sm-none"></div>
<div class="col-auto col-lg-3 order-lg-5 main-text-left">
<div class="text-center text-sm-left">
<strong>Northern Text</strong>
<p>Southern Text</p>
</div>
</div>
<div class="w-100 d-lg-none p-3"></div>
</div>
I've been trying to get the text to the left to be aligned with the icons - as displayed on the columns on the right - but can't seem to get it to work. Any help would be appreciated! Thank you in advance!

Related

How to make prettier format HTML like this?

What prettier rules do I need to make the formatting like this. To keep the tags on new lines and the text between them?
<template>
<div class="row">
<div class="col-sm-6 col-lg-8">
.col-sm-6 .col-lg-8
</div>
<div class="col-6 col-lg-4">
.col-6 .col-lg-4
</div>
</div>
<div class="row">
<div class="col-6 col-sm-4">
.col-6 .col-sm-4
</div>
<div class="col-6 col-sm-4">
.col-6 .col-sm-4
</div>
<div class="col-6 col-sm-4">
.col-6 .col-sm-4
</div>
</div>
<h1 class="text-3xl font-bold underline">
Hello world!
</h1>
</template>

how to put 4 thumbnails on a sidebar

I have a sidebar which is col-md-2. now I need to put 4 thumbnail next to each other on this sidebar that picture of them would be responsive. whith this code image become bigger when I resize the window (make window smaller)
<div class=col-md-2>
<div class=row>
<div class=col-md-3>
<div class="thumbnail>
<a href="#">
<img srcset="address" class="img-responsive">
<div class="caption">
a
</div>
</a>
</div>
</div>
<div class=col-md-3>
<div class="thumbnail>
<a href="#">
<img srcset="address" class="img-responsive">
<div class="caption">
a
</div>
</a>
</div>
</div>
<div class=col-md-3>
<div class="thumbnail>
<a href="#">
<img srcset="address" class="img-responsive">
<div class="caption">
a
</div>
</a>
</div>
</div>
<div class=col-md-3>
<div class="thumbnail>
<a href="#">
<img srcset="address" class="img-responsive">
<div class="caption">
a
</div>
</a>
</div>
</div>
<div><!--end of row>
<div>

Navigating multiple carousel items with bootstrap 3

How to make carousel items navigate as a group with bootstrap 3? Rather than moving items one at a time how can we make the multiple items move at a click. For e.g. If i see slides 1,2,3 the next carousel control should display slides 4,5,6.
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<div class="col-xs-3"><img src="images\link4\Picture1.png" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-3"><img src="images\link4\Picture2.png" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-3"><img src="images\link4\Picture3.png" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-3"><img src="images\link4\Picture4.png" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-3"><img src="images\link4\Picture5.png" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-3"><img src="images\link4\Picture2.png" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-3"><img src="images\link4\Picture4.png" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-3"><img src="images\link4\Picture3.png" class="img-responsive"></div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<script>
$('.carousel .item').each(function(){
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
for (var i=0;i<2;i++) {
next = next.next();
if (next.length>0) {
next.children(':first-child').clone().appendTo($(this));
}
else {
$(this).siblings(':first').children(':first-child').clone().appendTo($(this));
} }
});
</script>

There's no need for the extra JS. Just use the standard Bootstrap carousel...
<div class="carousel-inner">
<div class="item active">
<div class="col-xs-3">
<img src="//placehold.it/400" class="img-responsive">
</div>
<div class="col-xs-3">
<img src="//placehold.it/400" class="img-responsive">
</div>
<div class="col-xs-3">
<img src="//placehold.it/400" class="img-responsive">
</div>
<div class="col-xs-3">
<img src="//placehold.it/400" class="img-responsive">
</div>
</div>
<div class="item">
<div class="col-xs-3">
<img src="//placehold.it/400" class="img-responsive">
</div>
<div class="col-xs-3">
<img src="//placehold.it/400" class="img-responsive">
</div>
<div class="col-xs-3">
<img src="//placehold.it/400" class="img-responsive">
</div>
<div class="col-xs-3">
<img src="//placehold.it/400" class="img-responsive">
</div>
</div>
</div>
http://www.codeply.com/go/Vnvl4HqgKJ

Need correct bootstrap classes for Paypal

I have tried every way to imitate this look in style and columns and just cannot get it with Bootstrap 3.
Can someone list the twitter bootstrap markup for this:
http://postimg.org/image/ftbd0fxtv/
I have been stuck for may days now.
I have tried the following:
<div class="container">
<div class="row">
<div class="col-md-8"></div>
<div class ="col-md-4"></div>
</div>
</div>
thanks

demo: http://www.bootply.com/BCsPapR7Ww
html:
<div class="jumbotron">
<div class="container">
<div class="row">
<div class="col-sm-6">
<div class="page-header">
<h1>Example page header<br><small>Subtext for header</small></h1>
</div>
</div>
<div class="col-sm-6">
<div class="row">
<div class="col-sm-4">Menu option 1</div>
<div class="col-sm-4">Menu option 2</div>
<div class="col-sm-4">Menu option 3</div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="http://placekitten.com/g/600/600">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="http://placekitten.com/g/600/600">
</a>
</div> <div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="http://placekitten.com/g/600/600">
</a>
</div> <div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="http://placekitten.com/g/600/600">
</a>
</div> <div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="http://placekitten.com/g/600/600">
</a>
</div> <div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="http://placekitten.com/g/600/600">
</a>
</div> <div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="http://placekitten.com/g/600/600">
</a>
</div> <div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="http://placekitten.com/g/600/600">
</a>
</div> <div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="http://placekitten.com/g/600/600">
</a>
</div>
</div>
</div>
<nav class="text-center">
<ul class="pagination">
<li class="disabled"><span aria-hidden="true">«</span><span class="sr-only">Previous</span></li>
<li class="active">1 <span class="sr-only">(current)</span></li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li><span aria-hidden="true">»</span><span class="sr-only">Next</span></li>
</ul>
</nav>
<footer class="container">
<div class="row">
<div class="text-center">link 1 | link 2</div>
<div class="text-center">Powered by Bootstrap</div>
</div>
</footer>

Bootstrap 3 - Using affix to create "sticky" blocks

I'm trying to use the Bootstrap affix to create two "sticky" blocks side by side on top in the content area but they do not behave as expected. They always either overlap each other and/or the content or does not fill their parent.
<div class="container-fluid">
<div class="row">
<div class="col-lg-2 col-md-2 hidden-sm hidden-xs">
<text id="menu"></text>
</div>
<div class="col-lg-10 col-md-10 col-sm-12 col-xs-12">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 col-lg-push-9 col-md-push-9 col-sm-push-9 col-xs-push-9" id="sticky2" data-spy="affix">
<text id="right"></text>
</div>
<div class="col-lg-7 col-md-7 col-sm-9 col-xs-9" id="sticky1" data-spy="affix">
<h1><span class="hidden-lg hidden-md hidden-sm">XS</span><span class="hidden-lg hidden-md hidden-xs">SM</span><span class="hidden-lg hidden-sm hidden-xs">MD</span><span class="hidden-md hidden-sm hidden-xs">LG</span></h1>
<text id="top"></text>
</div>
<div class="row">
<div class="col-lg-9 col-md-9 col-sm-9 col-xs-9">
<div class="row contentRow" id="contentRow">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="background-color: yellow;">
<text id="content"></text>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Have a look at this fiddle: http://jsfiddle.net/halvorsen/1zv6gqwu/42/
Any suggestion on how to solve this?
Do I have to set the size on the "sticky" blocks using JavaScript?