Using bootstrap 4 inside Vue.js, I'd like to make left and right arrows to appear at the middle of the page around the image.
Here is the code:
<div class="row">
<div class="col-1">
<span class="align-self-center"><h1>❮</h1></span>
</div>
<div class="col-9">
<h1>Modal comes here</h1>
<img class="img-fluid modal-img" :src=" getImgUrl(currentMediaUrl)">
</div>
<div class="col-1">
<span class="align-self-center"><h1>❯</h1></span>
</div>
</div>
But whatever I tamper with CSS, I can not acheive this. How can I fix this?
Well, thanks to this answer, I realized it can be done with minimal fuss, by adding a simple flex css:
.img-box {
display: flex;
align-items:center;
}
And don't forget to add img-box class:
<div class="row img-box">
<div class="col-1">
<span class="nav-arrow">❮</span>
</div>
<div class="col-9">
<h1>Modal comes here</h1>
<img class="img-fluid modal-img" :src=" getImgUrl(currentMediaUrl)">
</div>
<div class="col-1">
<span class="nav-arrow">❯</span>
</div>
</div>
Related
I have some code that looks like this (using Bootstrap 4):
<header>
<div class="row">
<div class="col-xs-12 col-md-9">
<h1>Single and Satisfied</h1>
</div>
<div class="col-xs-12 col-md-3">
<div class="col-xs-4">
<img src="https://svgshare.com/i/Kmq.svg">
</div>
<div class="col-xs-4">
<img src="https://svgshare.com/i/Kmq.svg">
</div>
<div class="col-xs-4">
<img src="https://svgshare.com/i/Kmq.svg">
</div>
</div>
</div>
</header>
I've also got a CodePen here: https://codepen.io/davidshq/pen/VwvrRGg
I'd like the result to look something like this:
Single and Satisfied Image1 Image2 Image3
Instead I get something like this:
Single and Satisfied Image1
Image2
Image3
If I use floats or d-flex in an attempt to get the images to appear on the same line the images disappear entirely.
From what I've read this has to do with the SVGs being responsive and sizing themselves to the parent, which is of no size by default. I'm thinking I can define a size on the parent container but trying to understand the best way to do this in a Bootstrap approved manner.
Any suggestions?
You can do something like this:
The svg is too big so I have given size fo 100px each, using flex will take care of your requirement.
.row,.align{
display:flex;
}
<header>
<div class="row">
<div class="col-xs-12 col-md-9">
<h1>Single and Satisfied</h1>
</div>
<div class="col-xs-12 col-md-3 align">
<div class="col-xs-4">
<img src="https://svgshare.com/i/Kmq.svg" style="height:100px;width:100px;">
</div>
<div class="col-xs-4">
<img src="https://svgshare.com/i/Kmq.svg" style="height:100px;width:100px;">
</div>
<div class="col-xs-4">
<img src="https://svgshare.com/i/Kmq.svg" style="height:100px;width:100px;">
</div>
</div>
</div>
</header>
There's no col-xs-4 as far as I see from https://getbootstrap.com/docs/4.4/layout/grid/#grid-options, you could mean col-4.
Since you're trying to lay out three images in one line, you shall wrap them with .row:
<div class="row">
<div class="col-4">
<img src="https://svgshare.com/i/Kmq.svg" />
</div>
<div class="col-4">
<img src="https://svgshare.com/i/Kmq.svg" />
</div>
<div class="col-4">
<img src="https://svgshare.com/i/Kmq.svg" />
</div>
</div>
I added a new advertising block to the header visible here: https://musebycl.io/test_page. This made the navigation block move to the far right. I can't figure out why that is happening, even though these elements are supposedly in separate divs.
How do I modify the header ad or the navigation HTML/CSS to bring the navigation back to its normal position as visible on the home page (https://musebycl.io/)?
Your framework applies flex rules on the .row element that push your navigation block to the right, as it has no defined width.
Try to move your add .block-content one level up in your rows into div.container.py-2.row
with this html it works:
<div class="container py-2">
<div class="row justify-content-between align-items-center">
<div class="block-content">
<div
class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item">
...
</div>
</div>
<div class="col-auto">
<div class="row justify-content-between align-items-center">
<div class="col-auto">
<div class="region region-logo">
<div id="block-headerad"
class="block block-block-content block-block-content98569f6a-2644-4a93-a22a-d735717c7cda">
</div>
<div id="block-muse-sitebranding-3" class="block block-system block-system-branding-block">
<a href="/" rel="home" class="site-logo">
<img src="https://cdn.musebycl.io/compact-muse-logo.png" alt="Home">
</a>
</div>
</div>
</div>
<div class="col-auto d-none d-lg-block">
<div class="region region-header-primary-menu">
...
</div>
</div>
</div>
</div>
<div class="col-auto">
<div class="row justify-content-between align-items-center no-gutters">
<div class="col-auto d-none d-lg-block">
<div class="social-menu d-flex align-items-center">
...
</div>
<div class="col-auto">
<div id="user-action-menu" class="user-action-menu d-flex align-items-center">
...
</div>
</div>
<div class="d-lg-none">
...
</div>
</div>
</div>
</div>
</div>
You can create external CSS like
#advertising-nav-bar {
position: fixed;
top: 0px;
}
HTML :
<div id="advertising-nav-bar">
<!--content -->
</div>
You have to give your block-content a width.
Like:
.block-content{
width: 500px;
}
Using Bootstrap cards, I'm trying to float a card-img left and the card-body right, but the float classes aren't working for me. Can anyone tell me what I'm doing wrong please?
<div class="container">
<div class="row row-eq-height">
<div class="col">
<div class="card" style="">
<img class="card-img-top" style="width: 33%; float: left;" src="img/myimg.jpg" ">
<div class="card-img-caption">caption here</div>
<div class="card-body float-xl-right">
<h5 class="card-title">Title here</h5>
<p>By A Person</p>
<p class="card-text">When in the course of human events...</p>
Link
</div>
</div>
</div>
</div>
</div>
Is your xl breakpoint is set to 1280? Because if yes, then you could just use flex-xl-row class on card element and wrap image & caption inside a div, so they stay together:
<div class="card flex-xl-row">
<div>
<img class="card-img-top" src="img/myimg.jpg">
<div class="card-img-caption">caption here</div>
</div>
<div class="card-body">
<h5 class="card-title">Title here</h5>
<p>By A Person</p>
<p class="card-text">When in the course of human events...</p>
Link
</div>
</div>
It had to do with the .card class having a display of flex. Once that was removed, I could float the content left or right.
here's my markup:
<div class="row">
<div class="col-md-3">
<div class="row">
<a href="#">
<div class="col-md-6 col-xs-6">
<img class="img-responsive" src="/images/foo.jpg">
</div>
<div class="col-md-6 col-xs-6 vorteil">
text
</div>
</a>
</div>
</div>
<! -- plus 3 more items -->
</div>
which will look like this:
the problem however is - when reducing the browser width it will turn out like this:
the image will overflow its container although it should be responsive ..
any ideas what's wrong?
thanks
Wrap the red and grey divs in a DIV tag, not a link. Give the following style to your containing div:
.containing-div {display:block; overflow:auto;}
you are missing the parent class .container form bootstrap. look at bootstrap docs
.container {
border: 1px grey solid
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="row">
<a href="#">
<div class="col-md-6 col-xs-6">
<img class="img-responsive" src="///dummyimage.com/300x600">
</div>
<div class="col-md-6 col-xs-6 vorteil">
text
</div>
</a>
</div>
</div>
<! -- plus 3 more items -->
</div>
</div>
I'm trying to bulid grids like the photo below
IMG LINK: http://postimg.org/image/qo3b4nof1/
But i'm getting the DIV E in almost next to the D-DIV
here's my code
<div class="container">
<div class="row">
<div class="col-md-1">
<div class="col-md-1">A</div><br/>
<div class="col-md-1">B</div><br/>
<div class="col-md-1">C</div>
</div>
<div class="col-md-11">D<br/>
<div class="col-md-1">E</div>
</div>
</div>
</div>
The break-lines i added because DIV-A and DIV-B become one piece without breaklines.
is it better to do it with table ?
You do not need to use container and row with bootstrap 3.*
I changed you code to match the provided screenshot, see this http://jsfiddle.net/Sd2zw/ .
I just use xs columns because the small screen of jsfiddle, you can replace it back by md :
<div>
<div class="col-xs-1">
<div class="col-xs-12">A</div>
<div class="col-xs-12">B</div>
<div class="col-xs-12">C</div>
<span class="clearfix"></span>
</div>
<div class="col-xs-11">
<div class="col-xs-12 d-container">D</div>
<div class="col-xs-12">
<div class="col-xs-1">E</div>
<span class="clearfix"></span>
</div>
</div>
<span class="clearfix"></span>
</div>
Also, use some clearfix tags to clear the float.