Do you mean it doesn’t full width, if yes you can just remove the
col-sm-12 col-md-6 col-lg-9
.
Anyway i didn’t notice any gap from the left side, i think you may have other css effected.
By the way, i notice a lot of missing open and close tag like </span>
, is better to check properly before live it.
I have designed 6 tabs for address map. but it is not correct responsive after 800px. how to make it correct responsively & looking good in mobiles, tabs, ipad.some gap is coming on the left side of the tab.
I have tried with by adding media queries, but still it’s not responsive in mobile views.
this is the code I have tried.
$('#bologna-list a').on('click', function(e) {
e.preventDefault()
$(this).tab('show')
})
.address {
width: 141px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="col-12 col-lg-9 col-sm-12 col-md-6" style="margin-top: 10px;margin-bottom:14px;">
<div class="card" style="background-color: lightgoldenrodyellow;">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs" id="bologna-list" role="tablist">
<li class="nav-item address">
<a class="nav-link active" href="#description" role="tab" aria-controls="description" aria-selected="true">KalyanNagar</a>
</li>
<li class="nav-item address">
<a id="mm" class="nav-link" href="#history" role="tab" aria-controls="history" aria-selected="false">MS-Palya</a>
</li>
<li class="nav-item address">
<a class="nav-link" href="#deals" role="tab" aria-controls="deals" aria-selected="false">Mysore</a>
</li>
<li class="nav-item address">
<a class="nav-link" href="#aaa" role="tab" aria-controls="history" aria-selected="false">Begur</a>
</li>
<li class="nav-item address">
<a class="nav-link" href="#bbb" role="tab" aria-controls="deals" aria-selected="false">Chamrajpet</a>
</li>
<li class="nav-item address">
<a class="nav-link" href="#ccc" role="tab" aria-controls="history" aria-selected="false">Sarjapur</a>
</li>
</ul>
</div>
<div class="card-body" style="line-height: 1.2;margin-left:26px;margin-top:-46px">
<h4 class="card-title"><b>Royale Concorde International School</b></h4>
<div class="tab-content mt-3">
<div class="tab-pane active" id="description" role="tabpanel">
<p>
<a href="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d15548.642782402585!2d77.6424985!3d13.0254368!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x579ddbfe8e3e88e3!2sRoyale+Concorde+International+School!5e0!3m2!1sen!2sin!4v1463564768212" style="color: black;">
6th 'B' Main, II Block, HRBR Layout, Kalyan Nagar, Bangalore-560043.</a>
</p>
<p>
<a href="tel:080 2543 5454/55 " style="color: black">080 2543 5454/55 </a>
<a href=" tel:+91 9071399 777" style="color: black"> +919071399 777</a>
</p>
<p>
</span>
<a href="mailto:[email protected]" style="color: black;">[email protected] / [email protected]</a></p>
<iframe style="height: 80%; width:100%;" src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d15548.642782402585!2d77.6424985!3d13.0254368!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x579ddbfe8e3e88e3!2sRoyale+Concorde+International+School!5e0!3m2!1sen!2sin!4v1463564768212"
style="color: black;">
</iframe>
</div>
<!-- -------------------------------------------------------------- -->
<div class="tab-pane" id="history" role="tabpanel" aria-labelledby="history-tab">
<p><a href="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d15544.848284314958!2d77.54903!3d13.085742!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x4e1dfc0e19d8fe23!2sRoyale%20Concorde%20International%20School%20-CBSE%20MS.PALYA!5e0!3m2!1sen!2sin!4v1579748882201!5m2!1sen!2sin"
style="color: black;margin-left:20px"> No.14, Sharadha Hills,
Hesarghatta Main Road, Vidyaranya Post, M S Palya,
Bangalore – 560097</a> </p>
<p>
<p>
<a href="tel:+91 9071 399 777" style="color: black;">+91 9071 399 777</a>
</p>
<p>
</span> <a href="mailto:[email protected]" style="color: black;">[email protected]</a></p>
<iframe style="height: 80%; width:100%;" src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d15544.848284314958!2d77.54903!3d13.085742!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x4e1dfc0e19d8fe23!2sRoyale%20Concorde%20International%20School%20-CBSE%20MS.PALYA!5e0!3m2!1sen!2sin!4v1579748882201!5m2!1sen!2sin"
style="color: black;">
</iframe>
</div>
<!-- -------------------------------------------------- -->
<div class="tab-pane" id="deals" role="tabpanel" aria-labelledby="deals-tab">
<p><a href="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d15592.28450488265!2d76.60667!3d12.310997!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x6a6ae97bcd960cb4!2sRoyale%20Concorde%20International%20School%20Mysore!5e0!3m2!1sen!2sin!4v1579748538845!5m2!1sen!2sin"
style="color: black;">
CA-Site No.2, Bogadi 2nd Stage, North Extension,Mysuru – 570026</a>
</p>
<p>
<a href="tel:0821452 1275 " style="color: black;">0821452 1275 </a>
<a href=" tel:+91 9071 399777" style="color: black;"> /+91 9071 399777</a>
<p>
</span> <a href="mailto: [email protected]" style="color: black;">
[email protected] /[email protected]</a></p>
<iframe style="height: 80%; width:100%;" src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d15592.28450488265!2d76.60667!3d12.310997!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x6a6ae97bcd960cb4!2sRoyale%20Concorde%20International%20School%20Mysore!5e0!3m2!1sen!2sin!4v1579748538845!5m2!1sen!2sin"
style="color: black;">
</iframe>
</div>
<!-- -------------------------------------------- -->
<div class="tab-pane" id="aaa" role="tabpanel" aria-labelledby="deals-tab">
<p><a href="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d15557.058144566334!2d77.625737!3d12.890704!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x6d4e932ebf3e735d!2sRoyal%20Concorde%20International%20School!5e0!3m2!1sen!2sin!4v1579748775204!5m2!1sen!2sin"
style="color: black;"> #81/1, Hongasandra, Begur Main Road, Bangalore –
560068</a>
</p>
<p>
<a href="tel:0802574 2060 " style="color: black;">0802574 2060 </a></p>
<a href=" tel:+91 9071 399777" style="color: black;">/ +91 9071 399777</a>
</p>
<p>
</span> <a href="mailto: [email protected]" style="color: black;">
[email protected] /[email protected]</a></p>
<iframe style="height: 80%; width:100%;" src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d15557.058144566334!2d77.625737!3d12.890704!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x6d4e932ebf3e735d!2sRoyal%20Concorde%20International%20School!5e0!3m2!1sen!2sin!4v1579748775204!5m2!1sen!2sin"
style="color: black">
</iframe>
</div>
<!-- ----------------------------------------------- -->
<div class="tab-pane" id="bbb" role="tabpanel" aria-labelledby="deals-tab">
<p><a href="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d15552.711634340067!2d77.569835!3d12.960465!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xe8eb3b993746ce2d!2sRoyale%20Concorde%20International%20School%20-%20CBSE%20%26%20ICSE!5e0!3m2!1sen!2sin!4v1579748918909!5m2!1sen!2sin"
style="color: black;">31, 1st Main Road, Near Prakash Cafe, Chamarajpet,Bangalore – 560018</a>
</p>
<p>
<a href="tel:080-41278855 /" style="color: black;">080-41278855 /a>
<a href="tel:41252448 " style="color: black;"> / 41252448
</a>
<a href="tel:+91 9071 399 777" style="color: black;">/
+91 9071 399 777</a>
</p>
<p>
</span> <a href="mailto: [email protected]" style="color: black;">
[email protected]</a>
<a href="mailto: /[email protected]" style="color: black;">
/[email protected]</a>
</p>
<iframe style="height: 80%; width:100%;" src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d15552.711634340067!2d77.569835!3d12.960465!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xe8eb3b993746ce2d!2sRoyale%20Concorde%20International%20School%20-%20CBSE%20%26%20ICSE!5e0!3m2!1sen!2sin!4v1579748918909!5m2!1sen!2sin"
style="color: black">
</iframe>
</div>
<!-- ------------------------------------------------ -->
<div class="tab-pane" id="ccc" role="tabpanel" aria-labelledby="deals-tab">
<p><a href="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d62220.778654330745!2d77.667818!3d12.920658!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x781b67e13f265205!2sRoyale%20Concorde%20International%20School!5e0!3m2!1sen!2sin!4v1579748735008!5m2!1sen!2sin"
style="color: black;"> Sarjapur, Ring Road Junction, Bangalore</a>
</p>
<p>
<a href="tel:+91 9071 399 777" style="color: black;margin-left:16px">
+91 9071 399 777</a>
<a href="tel:080 41476100" style="color: black;margin-left:16px">
/ 080 41476300 </a>
<a href="tel:080 41476200" style="color: black;margin-left:16px">
/ 080 41476200 </a>
<a href="tel:080 41476300 " style="color: black;margin-left:16px">
/ 080 41476300 </a>
<a href="tel:080 41476400" style="color: black;margin-left:16px">
/ 080 41476400" </a>
<a href="tel:+91 9071 399 777 style=" color: black;margin-left:16px ">
/ 91 9071 399 777" </a>
</p>
<p>
</span> <a href="mailto:[email protected]" style="color: black;">[email protected]</a></p>
<iframe style="height: 80%; width:100%;margin-bottom:-4px" src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d62220.778654330745!2d77.667818!3d12.920658!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x781b67e13f265205!2sRoyale%20Concorde%20International%20School!5e0!3m2!1sen!2sin!4v1579748735008!5m2!1sen!2sin"
style="color: black">
</iframe>
</div>
<!-- ------------------------------------ -->
</div>
</div>
</div>
</div>
this is the image of our UI

all tags are closed. then it is not full width.