I have a bootstrap row with n number of 150x150 images. I have this js fiddle here: https://jsfiddle.net/tzachary89/4dnva3p4/
Whenever one of these images is clicked I'm trying to have something that looks like this: https://i.imgur.com/j7gaLLt.png
So whenever I have an image that is clicked I want a div to show that covers the underlying rows. The div may end up being taller than the one in the picture.
how can I get my dropdown menu to span the entire row and to cover the row beneath it? (without pushing the below row down)
<div class="container">
<div class="row" style="background-color:#8faad8;">
<div class="col-xl-2 col-lg-2 col-md-3 col-sm-4 col-5" style="margin: 2px 0px 0px 0px;" id="tile1">
<img src="https://rfclipart.com/image2/thumbnail/3b-3b-f2/head-with-beard-and-hair-Download-Royalty-free-Vector-File-EPS-359793.jpg">
<div class="container" style="background-color: white;">
<div class="row">
<div class="col-md-2">
<button class="btn btn-primary">asdf</button>
<button class="btn btn-primary">asdf</button>
</div>
</div>
</div>
</div>
</div>
</div>
Related
I used bootstrap 3 -row and column class to separate the buttons. The second button is collapsible which shows the google map. But I want that the collapsible map will take the whole area of the row though it's in a column of that row. Is it possible? Here is my code below:
<div class="row text-center c-green">
<div class="col-md-6">
<button class="btn-large btn-form" data-toggle= "modal" data-target= "#contact-modal">Contact with us</button>
</div>
<div class="col-md-6">
Click the button to see our batch location</button>
<div id="map" class= "collapse"></div>
</div>
</div>
Here is the output image
You have to wrap map outside of col-md-6.
Try this.
.map-wrapper {
width: 100%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class="row text-center c-green">
<div class="col-xs-6 col-md-6">
<button class="btn btn-large btn-form" data-toggle= "modal" data-target="#contact-modal">Contact with us</button>
</div>
<div class="col-xs-6 col-md-6">
Click the button to see our batch location</button>
</div>
<div id="map" class= "collapse map-wrapper">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d243647.31729967444!2d78.26761827225342!3d17.41229956311145!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3bcb99daeaebd2c7%3A0xae93b78392bafbc2!2sHyderabad%2C%20Telangana!5e0!3m2!1sen!2sin!4v1602912235163!5m2!1sen!2sin" width="100%" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
</div>
</div>
I have an HTML table which is as following
Some of the code is below:
<table>
<tr>
<td>
<div style="width: 4.999999998%;" class="col-md-.6 col-sm-6">
<div style="height: 103px; width:80px;" class="location-block">
<div class="city-img">
<img src="worldwide-location.png" class="img-responsive" alt="city">
<div class="overlay-bg"></div>
</div>
<div class="city-dtl text-center">
Read More
</div>
</div>
</div>
</td>
<td>
<div style=" width: 4.999999998%;" class="col-md-.6 col-sm-6">
<div style="height: 50px; width:80px;" class="location-block">
<div class="city-img">
<img src="images/wedding-location/location-1.jpg" class="img-responsive" alt="city">
<div class="overlay-bg"></div>
</div>
<div class="city-dtl text-center">
Read More
</div>
</div>
<div style="height: 50px; width:80px; margin-top: -27px;" class="location-block">
<div class="city-img">
<img src="images/wedding-location/location-1.jpg" class="img-responsive" alt="city">
<div class="overlay-bg"></div>
</div>
<div class="city-dtl text-center">
Read More
</div>
</div>
</div>
</td>
the table looks like the following:
enter image description here
As you can see the white space between each column, I am trying to reduce the white spaces between them, but this is not happening, I have tried padding-left and also gave cell spacing to the table, its not changing, can anyone tell me whats wrong with my code? Thanks in advance.
If you decide to use Bootstrap grid you can avoid to use HTML table tag, and use a structure like this:
<div class="row">
<div class="col margin-col">
<div>Images and content 1</div>
</div>
<div class="col margin-col">
<div>Images and content 2</div>
</div>
</div>
usign a proper CSS rule like this to set padding (inside columns) and margin (outside columns):
.margin-col{
padding: 10px;
margin: 20px;
}
I have an issue whereby due to the structure of my html, when one div is expanded the whole row moves down. I am having a bit of a hard time finding a fix for this. I have looked on here but could not find a resolution. Any ideas would be great. This is my structure (with div 1 expanded to show the nature of the issue):
expandable div 1 | expandable div 2
|
| expandable div 4
|
expandable div 3 |
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6">
<div class="panel panel-primary">
expandable div 1
</div>
</div>
<div class="col-xs-12 col-sm-6">
<div class="panel">
expandable div 2
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-6">
<div class="panel">
expandable div 3
</div>
</div>
<div class="col-xs-12 col-sm-6">
<div class="panel">
expandable div 4
</div>
</div>
</div>
</div>
As you mentioned you don't want to use the bootstrap collapse I suggest to do this with jQuery (see below for an example).
Your HTML:
<div class="container">
<div class="header"><span>Expand</span>
</div>
<div class="content" style="display: none;"padding : 10px;>
Suprise!
</div>
</div>
Now the jQuery:
$(".header").click(function () {
$header = $(this);
$content = $header.next();
$content.slideToggle(300, function () {
$header.text(function () {
return $content.is(":visible") ? "Collapse" : "Expand";
});
});
});
Something like this will work.
Consider CSS for the style display.
I'm having an issue trying to get two divs that are side by side the same height when the content for each of the divs are generated using an ng-repeat.
Flex box stops the site being responsive and i can't work out when would be a suitable time to call a Jquery function as the views are nested and the page doesn't actually load when the new html is displayed. I have tried ng-repeat-start and end to no avail.
Ideally once the content has loaded i would the div on the right to be the same height as the div on the left.
Would really appreciate any help with the problem.
Cheers
EDIT - Code Included
<div class="row">
<div class="noSpacing col-xs-6">
<div class="col-xs-12 noSpacing rottnestGreen">
<div ng-repeat="bh in bikeHire" class="row">
<p class="col-xs-6">{{bh.type}}</p>
<select class="inline col-xs-3 noSpacing np" ng-model="bikeHire[$index].quantity" ng-options="ddl for ddl in ddlNumbers" ng-change="addOps(bh.type, bikeHire[$index].quantity, bh.price)"></select>
<p class="col-xs-3 blueText">{{bh.price | currency}}</p>
</div>
</div>
</div>
<div class="noSpacing col-xs-6">
<div class="col-xs-12 noSpacing np rottnestGreen">
<div ng-repeat="sf in sAndF" class="row">
<p class="col-xs-6">{{sf.type}}</p>
<select class="inline col-xs-3 noSpacing np" ng-model="sf.quantity" ng-options="ddl for ddl in ddlNumbers" ng-change="addOps(sf.type, sf.quantity, sf.price)"></select>
<p class="blueText col-xs-3">{{sf.price | currency}}</p>
</div>
</div>
</div>
<div class="clearfix"></div>
</div>
Is it something like this you are looking for? https://jsfiddle.net/yczgaLgm/2/
Wrapping everything in a container:
<div class="row container">
And then styling the container to use flexing is the way I usually do this
.container {
display: flex;
flex-wrap: wrap;
}
The biggest downside though is IE support, I dont hope you are supporting below IE10?
I need to center align every divs in Bootstrap3. To make it an accounting report. There're 3 level of divs - Header, subheader and detail list. Each level I use col-md-* to limit the width. I've tried text-align but it's not help.
Here's the code :
<div class="container">
<div class="header text-info">
<h1>Heading</h1><br />
<h2>Acc. Type</h2><br />
<h3>Month</h3>
</div>
<legend>Income</legend>
<div class="acc-content row">
<div class="col-md-12">
<b>col-md-12</b>
<span class="pull-right">###</span>
</div>
</div>
<legend>Expense</legend>
<div class="acc-content row">
<div class="col-md-12">
<b>col-md-12</b>
<span class="pull-right">###</span>
</div><!-- /col-md-12 -->
<div class="col-md-10">
<b>col-md-10</b>
<span class="pull-right">###</span>
</div><!-- /col-md-10 -->
<div class="col-md-8">
<b>col-md-8</b>
<span class="pull-right">###</span>
</div><!-- /col-md-8 -->
</div><!-- /acc-content -->
</div>
DEMO : http://fiddle.jshell.net/nobuts/mshwa1yt/1/show/ (please view in desktop).
I expect all the divs to center aligned like this : (red border is just a test)
Please be adviced.
Add col-md-offset-*. For example:
<div class="col-md-10 col-md-offset-1">
and
<div class="col-md-8 col-md-offset-2">
You must also change your margin: 5px on .acc-content div[class*='col-md-'] to margin-top: 5px; margin-bottom: 5px because it overwrites Bootstrap's margin-left for col-md-offset-*.
DEMO: http://jsfiddle.net/mshwa1yt/5/embedded/result/
DOCS: http://getbootstrap.com/css/#grid-offsetting
using block-center class wrapping using row
all the col classes from bootstrap have the float left property. either remove them (not adivsed) and add margin:auto to the divs...or add more divs:
if u have a col-8 add col-2 left and col-2 right (offsets)...so you keep the grid system in place
You need to add this to the divs:
.acc-content div[class*='col-md-'] {
float: none;
margin: 5px auto;
}
First one overwrites the float: left rule that's pretty much the opposite of center aligning it, the second one actually aligns it to center.
Bootstrap 3 has a mixin called center-block found in utilities.less.
First, add class center-block to elements that should be centered.
Then, if using Less, add to CSS:
.center-block {
.center-block();
}
If using plain CSS, add:
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
in this example replace this
<div class="col-md-10">
<b>col-md-10</b>
<span class="pull-right">###</span>
</div><!-- /col-md-10 -->
<div class="col-md-8">
<b>col-md-8</b>
<span class="pull-right">###</span>
</div><!-- /col-md-8 -->
with this
<div class="col-md-10 col-md-offset-1">
<b>col-md-10</b>
<span class="pull-right">###</span>
</div><!-- /col-md-10 -->
<div class="col-md-8 col-md-offset-2">
<b>col-md-8</b>
<span class="pull-right">###</span>
</div><!-- /col-md-8 -->
add class col-md-offset-"number of cols" to col- divs