I am trying to embed two websites onto my website. My goal is to display these websites next to one another in a custom sized iframe while being responsive to the view port size. I am utilizing Bootstrap 4's column and row functions to try and accomplish this. However, the spacing between the columns is too large:
Note this is a previously asked question and I have looked at the Seen Forum A and SeenForumB however neither have been any good at solving my problem.
code:
<div class="col-auto mb-3">
<div class="card" style="border: none;">
<div class="card-body">
<div class="card container-fluid justify-content-center" style="margin-top: 80px; min-width: 44vw; border: 0;">
<div class="card-header" style="background-color: #3c525d; color: white; width: 100%;">
<b>EXAMPLE WEBSITE
<span style="float: right; font-size: 20px;">
<a style="color: white;" href="https://getbootstrap.com/docs/4.0/getting-started/introduction/">
<i class="fas fa-expand"></i>
</a>
</span>
</b>
</div>
<div class="card-body" style="padding: 0;">
<iframe src="https://getbootstrap.com/docs/4.0/getting-started/introduction/" style="width: 100%; height: 600px; border: none;"></iframe>
</div>
</div>
</div>
</div>
</div>
```
You can use the .no-gutters class to knock off the spacing between the columns. I'd do it on the same line as your row so basically :
<div class="row no-gutters">
In your case - the key element is padding and margin added to .card and .card-body classes. Have a look below what happens if you override margins and paddings to 0. The big gap disappears and you can control it by adding your own paddings and margins according to how big the gap between columns you want to create. Code below:
<div class="container">
<div class="row">
<div class="col-6 m-0 p-0">
<div class="card m-0 p-0" style="border: none;">
<div class="card-body m-0 p-0">
<div class="card container-fluid justify-content-center" style="margin-top: 80px; min-width: 44vw; border: 0;">
<div class="card-header" style="background-color: #3c525d; color: white; width: 100%;">
<b>EXAMPLE WEBSITE
<span style="float: right; font-size: 20px;">
<a style="color: white;" href="https://getbootstrap.com/docs/4.0/getting-started/introduction/">
<i class="fas fa-expand"></i>
</a>
</span>
</b>
</div>
<div class="card-body" style="padding: 0;">
<iframe src="https://getbootstrap.com/docs/4.0/getting-started/introduction/" style="width: 100%; height: 600px; border: none;"></iframe>
</div>
</div>
</div>
</div>
</div>
<div class="col-6 m-0 p-0">
<div class="card p-0 m-0" style="border: none;">
<div class="card-body p-0 m-0">
<div class="card container-fluid justify-content-center" style="margin-top: 80px; min-width: 44vw; border: 0;">
<div class="card-header" style="background-color: #3c525d; color: white; width: 100%;">
<b>EXAMPLE WEBSITE
<span style="float: right; font-size: 20px;">
<a style="color: white;" href="https://getbootstrap.com/docs/4.0/getting-started/introduction/">
<i class="fas fa-expand"></i>
</a>
</span>
</b>
</div>
<div class="card-body" style="padding: 0;">
<iframe src="https://getbootstrap.com/docs/4.0/getting-started/introduction/" style="width: 100%; height: 600px; border: none;"></iframe>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Another possibility is to recompile bootstrap from scss and override padding's and margin's of columns at the source. That would probably be a cleaner solution but a bit more time consuming.
Related
<div class="container-fluid" >
<section id="current-weather">
<div class="card text-center text-white bg-dark mb-3 " style="width: 60%;">
<div class="card-header">
weather
</div>
<div class="card-body">
<h2>{{location}}</h2>
<hr style="width: 30%;height: 2px; margin: 20px auto 20px auto;color: black;">
<h5 class="card-title"><i class="wi wi-owm-{{weather_current['weather'][0]['id']}}" style="font-size: 2.2em;"></i>{{weather_current['temp']}}°C</h5>
</div>
</div>
</section>
</div>
I have a problem with alignment text and icon. Look at screenshot
I've already tried to use vertical-align: middle and baseline. Maybe somebody can resolve my problem.
Here I have aligned it vertically and horizontally.
.container-fluid{
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
width: 60%;
}
<div class="container-fluid" >
<section id="current-weather">
<div class="card text-center text-white bg-dark mb-3">
<div class="card-header">
weather
</div>
<div class="card-body">
<h2>{{location}}</h2>
<hr style="width: 30%;height: 2px; margin: 20px auto 20px auto;color: black;">
<h5 class="card-title"><i class="wi wi-owm-{{weather_current['weather'][0]['id']}}" style="font-size: 2.2em;"></i>{{weather_current['temp']}}°C</h5>
</div>
</div>
</section>
</div>
Thanks and best regards!
I really appreciate your work, but I was asking to align icon and text in one line not the whole container on web page.
Check this image
Finally I coped with that. Here is my solution:
.align-inline {
display: flex;
align-items: center;
justify-content: center;
}
<div class="container-fluid" >
<section id="current-weather">
<div class="card text-center text-white bg-dark mb-3">
<div class="card-header">
weather
</div>
<div class="card-body">
<h2>{{location}}</h2>
<hr style="width: 30%;height: 2px; margin: 20px auto 20px auto;color: black;">
<h5 class="card-title align-inline"><i class="wi wi-owm-{{weather_current['weather'][0]['id']}}" style="font-size: 2.2em;"></i>{{weather_current['temp']}}°C</h5>
</div>
</div>
</section>
</div>
This is how result looks like
I am facing a problem in which I want the content which is written on the left half of the screen should be written on the image which is on the right side when decreasing the screen size.
for reference, check the image as I want this problem image
to be like this Solution image when I decrease the size of my screen, But my screen looks like this at present. I need the solution as soon as possible.
Note: I used mostly pre-defined classes of bootstrap4 for this.
code is-
<div class="row">
<div class="col p-0 col-6 bg-creame" style="height: 100vh;">
<div class="h-100 d-flex flex-column justify-content-start pt-5">
<div class="m-5 pt-5 pr-5">
<h1 class="mb-5"><b style="font-weight: 900;"><b>Contact</b></b></h1>
<p class="m-0" style="font-weight: 900;font-size: 18px;">Email Address</p>
<p><a style="color: inherit !important;font-size: 23px;" href="mailto:support#regid.ca">support#XXX.com</a>
</p>
<p class="m-0 mt-5" style="font-weight: 900;font-size: 18px;">Mailing Address</p>
<p style="font-size: 23px;">
XXXXXX, 77 XXXX XXX X,
XXXXXX, XX XXX 6XX
</p>
<div class="d-none d-lg-block">
<button class="text-uppercase btn pr-5 pl-5 color-creame bg-orange"
style="border-radius: 50px; letter-spacing: 1px;font-size: 20px;">
Contact Us
</button>
</div>
</div>
</div>
</div>
<div class="col p-0 col-6 bg-orange" style="height: 100vh;">
<div style="position: absolute; bottom: 0; right: 0;">
<div class="h-50 bg-orange d-flex flex-column justify-content-end" style="padding-top: 14rem;">
<div class="text-center p-4">
<i class="fas fa-arrow-up bg-black" style="font-size: 2rem;"></i>
</div>
</div>
</div>
<div class="d-flex flex-column h-100">
<img height="100%" width="100%" src="./assets/img/Rectangle 8 (2).png" class="img img-responsive">
</div>
</div>
</div>
You could use z-index to push the image behind the text and do something like this
#media (max-width: 600px) {
img {
width: 100%;
z-index: -1;
}
div {
z-index: 1;
}
}
The cards html looks like this:
<div class="container-fluid">
<img src="http://clipart-library.com/img/1279251.png" style="max-width: 100px; filter: invert(1); float: left">
<h1 style="color: white;">Favourite <br>apps </h1>
<div class="row flex-row overflow-auto flex-nowrap" id="favourites" style="max-height: 400px">
<div tabindex="0" class="card" style="max-width: 18rem;" id="ytdroid2">
<img src="https://tse2.mm.bing.net/th?id=OIP.qHEnapkicCACp91KvwDYUAHaFj" class="card-img-top">
<div class="card-body" style="height: 200px;">
<h1 class="card-title" style="color: white;">
<b>Test 2</b>
</h1>
</div>
</div>
<div tabindex="0" class="card" style="max-width: 18rem;" id="ytdroid">
<img src="https://tse2.mm.bing.net/th?id=OIP.qHEnapkicCACp91KvwDYUAHaFj" class="card-img-top">
<div class="card-body" style="height: 200px;">
<h1 class="card-title" style="color: white;">
<b>Test 1</b>
</h1>
</div>
</div>
</div>
</div>
and it creates:
The background color for both the card and the card body is set in a css sheet to white with an opacity of 0.4. As you can see the width of the card is bigger than the width of the image and the card body. If i remove the row related classes from this, they are the same size however this will not work as they stack vertically. I cannot use a card deck because i want these to have a fixed width and be horizontally scrollable which doesn't seem to work with a card deck. How can I make the width of the card match the width of the image and body?
The cards should be placed inside columns.
"Rows are wrappers for columns. Each column has horizontal padding
(called a gutter) for controlling the space between them... "
Also...
"When building grid layouts, all content goes in columns. The
hierarchy of Bootstrap’s grid goes from container to row to column to
your content. "
You don't want to...
Use a col-* without a row as it's immediate parent.
Place content directly inside the row.
Regardless of how you use the grid classes (correctly or incorrectly), in your case the source of the space is padding BS applies to .card.
You can add .p-0 to the .card or otherwise set the padding to zero on the element. In the snippet below I have added .p-0 only to the first card for comparison:
div.container-fluid {
background-color: DarkSlateBlue;
}
div.card,
div.card-body {
background-color: rgba(255, 255, 255, 0.4);
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<div class="container-fluid">
<img src="http://clipart-library.com/img/1279251.png" style="max-width: 100px; filter: invert(1); float: left">
<h1 style="color: white;">Favourite <br>apps </h1>
<div class="row flex-row overflow-auto flex-nowrap" id="favourites" style="max-height: 400px">
<div tabindex="0" class="card p-0" style="max-width: 18rem;" id="ytdroid2">
<img src="https://tse2.mm.bing.net/th?id=OIP.qHEnapkicCACp91KvwDYUAHaFj" class="card-img-top">
<div class="card-body" style="height: 200px;">
<h1 class="card-title" style="color: white;">
<b>Test 2 .card.p-0</b>
</h1>
</div>
</div>
<div tabindex="0" class="card" style="max-width: 18rem;" id="ytdroid">
<img src="https://tse2.mm.bing.net/th?id=OIP.qHEnapkicCACp91KvwDYUAHaFj" class="card-img-top">
<div class="card-body" style="height: 200px;">
<h1 class="card-title" style="color: white;">
<b>Test 1 .card</b>
</h1>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
I tried to search the internet, but I saw nothing. My problem is very easy, I have 2 icons and want one of them to be aligned to the left and the other on to the right. The code follows:
<div class="container">
<div class="row">
<div style="cursor: pointer" onclick="window.history.back()">
<div class="back-button" data-wow-delay="0.2s" style="padding: 0 0 0 25px">
<div class="icon color-1" style="margin-bottom: 0">
<i class="lni-pointer-left"></i>
</div>
</div>
</div>
<div style="cursor: pointer" onclick="window.history.back()">
<div class="back-button" data-wow-delay="0.2s" style="padding: 0 0 0 25px">
<div class="icon color-1" style="margin-bottom: 0">
<i class="lni-pointer-left"></i>
</div>
</div>
</div>
</div>
</div>
P.S.: Float: right didn't help...
Add This Class d-flex justify-content-between
<div class="container">
<div class="d-flex justify-content-between">
<div style="cursor: pointer" onclick="window.history.back()">
<div class="back-button" data-wow-delay="0.2s" style="padding: 0 0 0 25px">
<div class="icon color-1" style="margin-bottom: 0">
<i class="lni-pointer-left">Icon 1</i>
</div>
</div>
</div>
<div style="cursor: pointer" onclick="window.history.back()">
<div class="back-button" data-wow-delay="0.2s" style="padding: 0 0 0 25px">
<div class="icon color-1" style="margin-bottom: 0">
<i class="lni-pointer-left">Icon 2</i>
</div>
</div>
</div>
</div>
</div>
https://jsfiddle.net/lalji1051/th05ad8c/1/
flexbox works best as it offers minimal code. follow the example below:
#icon-row {
display: flex;
justify-content: space-between;
padding: 20px;
border: 1px solid lightgrey;
}
a {
cursor: pointer;
background-color: lightgrey;
padding: 5px;
}
<div id="icon-row">
<a>icon</a>
<a>icon</a>
</div>
I have implemented tabs using uib-tabset. There is issue with alignment of tab.
As you can see in below image, my 'Current' tab is shifted to left and it is moving out of card leaving uncomfortable space between 'Current' and 'Upcoming'.
I want both tabs to aligned perfectly with card.
Is there any way?
I have tried changing CSS in a lot of ways (.nav-tabs especially) but no luck.
HTML:
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="card" style="margin-left:3%;margin-right:3%" ng-controller="AppointmentsCtrl">
<uib-tabset active="active">
<div class="row">
<div class="col-xs-6 nav nav-tabs">
<uib-tab index="0" heading="Current"> <!-- -->
<ul class="list-group">
<li class="list-group-item">
<!-- <div id="accordion" role="tablist" aria-multiselectable="true"> -->
<div class="panel panel-default" style="border-color: white;">
<div class="panel-heading" role="tab" id="headingOne"
style="background-color: #686868; margin-top: 5%;">
<div class="row">
<div class="col-xs-2">
<div class="myimage">
<img id="image" src="img/Calender.png"
style="width: 30px; height: 30px;"></img>
<p id="text">26</p>
</div>
</div>
<div class="col-xs-8">
<p class="panel-title" data-toggle="collapse"
data-parent="#accordion"
ng-click="isCollapsed = !isCollapsed" aria-expanded="true"
aria-controls="collapseOne"
style="color: white; font-size: 15px">
Monday, 26 Sep 2016<br> 02:00 PM
</p>
</div>
<div class="col-xs-2">
<a data-toggle="collapse" data-parent="#accordion"
ng-click="isCollapsed = !isCollapsed" aria-expanded="true"
aria-controls="collapseOne"><img id="arrow"
src="img/Down_Arrow.png" style="width: 30px; height: 30px;"></img></a>
</div>
</div>
</div>
<div id="collapseOne" uib-collapse="isCollapsed"
class="panel-collapse collapse" role="tabpanel"
aria-labelledby="headingOne"
style="background-color: #d5d5d5;">
<div class="row">
<div class="col-xs-6 col-sm-offset-1">
<h5 style="color: #696969; margin-top: 5%;">Visitor
Name</h5>
<h5 style="color: #000; font-weight: bold;">Subodh
Bagade</h5>
<h5 style="color: #696969;">Purpose</h5>
<h5 style="color: #000; font-weight: bold;">Sales
Meeting</h5>
</div>
<div class="col-xs-6">
<img src="img/Gray_User.png"
style="margin-top: 10%; width: 110px; height: 100px;"></img>
</div>
</div>
<hr>
<div class="row">
<div class="col-xs-4">
<!-- <a ng-href="#/viewdetails/appointmentId={{appointment.appointmentId}}"> -->
<a ng-href="#/viewdetails/appointmentId=1"> <img
src="img/more.png" style="width: 30px; height: 30px;"></img>
</a>
</div>
<div class="col-xs-4">
<!-- <a ng-href="#/edit/appointmentId={{appointment.appointmentId}}"> -->
<a ng-href="#/edit/appointmentId=1"> <img
src="img/Edit_White.png" style="width: 30px; height: 30px;"></img>
</a>
</div>
<div class="col-xs-4">
<a ng-href="#" onClick="confirm('Are you sure?')"> <img
src="img/Delete.png" style="width: 30px; height: 30px;"></img>
</a>
</div>
</div>
</div>
</div>
<!-- </div> -->
</li>
</ul>
<!-- --> </uib-tab>
</div>
<div class="col-xs-6 nav nav-tabs">
<uib-tab index="1" heading="Upcoming">
<p>Some text here.</p>
</uib-tab>
</div>
</div>
</uib-tabset>
</div>
</div>
</div>
</div>
A part of my CSS:
.nav-tabs {
border-bottom: 1px solid #ddd;
}
.nav-tabs>li {
/* float: left; */
margin-bottom: -1px;
background-color:#E9880A;
}
.nav-tabs>li>a {
margin-right: 2px;
line-height: 0.42857143;
border: 1px solid transparent;
border-radius: 4px 4px 0 0;
}
this looks more like alignment issue. Once you align the tabs individually it should work fine. I was able to get it aligned by adjusting the tabs individually.