I'm trying to make a table with divs but it won't show properly. This is what I'm getting: the second cell isn't aligned with the first one. I tried everything but I just couldn't make it work.
Here's my code:
<div style="display: table; width:100%">
<div style="display: table-cell;">
<img src="" style="width:400px;">
</div>
<div style="display: table-cell;">
Lorem ipsum dolor
</div>
</div>
<div style="display: table; width:100%">
<div style="display: table-cell;">
<img src="" style="width:400px;">
</div>
<div style="display: table-cell; vertical-align: top;">
Lorem ipsum dolor
</div>
</div>
In second div use "vertical-align: top;" property.
Related
I have a button that has been set as position:fixed to the right of the page.
When its clicked it should open the modal however it doesn't do anything when clicked.
If i remove the position:fixed it works fine and the modal shows however this is not what I want as it needs to be fixed to the side
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script type="text/javascript" src="https://netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css"
rel="stylesheet" type="text/css">
<link href="https://pingendo.github.io/pingendo-bootstrap/themes/default/bootstrap.css"
rel="stylesheet" type="text/css">
</head>
<body>
<div class="navbar navbar-default navbar-static-top" style="height:80px;background-color:white;border-bottom:0px;">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-ex-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" style="padding-top:0px;"><img height="75" alt="Brand" src="logo260x80-2.png"></a>
</div>
<div class="collapse navbar-collapse" id="navbar-ex-collapse" style="border-top:0px;border-bottom:0px;">
<ul class="nav navbar-nav navbar-right" style="padding-top:20px;border-top:0px;border-bottom:0px;">
<li class="active">
Home
</li>
<li>
Contacts
</li>
</ul>
</div>
</div>
</div>
<div class="section">
<div class="background-image" style="background-image : url('headerbg3.jpg');"></div>
<div class="container">
<div class="row">
<div class="col-md-12" style="height:200px;"></div>
</div>
</div>
</div>
<button data-toggle="modal" data-target="#demo" type="button" style="position:fixed;right:0px;"
tab-index="1" id="showmodal" class="btn btn-lg btn-success">
<i class="fa fa-envelope fa-2x"></i>
</button>
<div class="section">
<div class="container">
<div class="row">
<div class="col-md-12">
<h1 class="text-center">Gallery</h1>
</div>
</div>
<div class="row">
<div class="col-md-4">
<a><img src="http://pingendo.github.io/pingendo-bootstrap/assets/placeholder.png" class="img-responsive"></a>
<h3>A title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisici elit, </p>
</div>
<div class="col-md-4">
<a><img src="http://pingendo.github.io/pingendo-bootstrap/assets/placeholder.png" class="img-responsive"></a>
<h2>A title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisici elit, </p>
</div>
<div class="col-md-4">
<a><img src="http://pingendo.github.io/pingendo-bootstrap/assets/placeholder.png" class="img-responsive"></a>
<h2>A ttile</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisici elit, </p>
</div>
</div>
<div class="row">
<div class="col-md-4">
<a><img src="http://pingendo.github.io/pingendo-bootstrap/assets/placeholder.png" class="img-responsive"></a>
<h3>A title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisici elit, </p>
</div>
<div class="col-md-4">
<a><img src="http://pingendo.github.io/pingendo-bootstrap/assets/placeholder.png" class="img-responsive"></a>
<h3>A title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisici elit, </p>
</div>
<div class="col-md-4">
<a><img src="http://pingendo.github.io/pingendo-bootstrap/assets/placeholder.png" class="img-responsive"></a>
<h2>A title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisici elit, </p>
</div>
</div>
</div>
</div>
<div class="modal fade" id="demo" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body...</p>
</div>
<div class="modal-footer">
<a class="btn btn-default" data-dismiss="modal">Close</a>
<a class="btn btn-primary">Save changes</a>
</div>
</div>
</div>
</div>
</body>
</html>
Above is the complete HTMl code of the page
The problem is that the button is hiding behind the section div and become unclickable. So to make the button appear before the section we apply z-index:1; style to the button and the code will look like:
<button data-toggle="modal" data-target="#demo" type="button" style="z-index:1;position:fixed;right:0px;" tab-index="1" id="showmodal" class="btn btn-lg btn-success">
or JSfiddle demo.
Note: Here you can read more about the z-index property.
I have been trying to make my grid to fill the panel it is contained it but I am having issues. I want to two divs representing the grid in the panel body to fill the parent which is the panel body. Here is the markup below:
<div class="container">
<div class="row">
<div class="col-md-8 col-lg-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading">Welcome</div>
<div class="panel-body" id="app">
<div class="row">
<div class=" col-lg-4 col-lg-4">
<ul class="list-group">
<li class="list-group-item" v-for="li in list">
</li>
</ul>
</div>
<div class="col-md-8 col-lg-8 ">
<ul class="list-group">
<li class="list-group-item" v-for="li in list"> {{ li.body }}
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
Bootstrap columns automatically include left and right padding. You can remove this by adding a class to the columns as done so by Julien Melissas.
http://julienmelissas.com/no-gutter-column-trick-for-bootstrap/
.row.no-gutters {
margin-right: 0;
margin-left: 0;
}
.row.no-gutters > [class^="col-"],
.row.no-gutters > [class*=" col-"] {
padding-right: 0;
padding-left: 0;
}
Adding these classes to your css file will allow you to add a no-gutters class to your rows.
Here's a Pen to show how it works.
http://codepen.io/mutualdesigns/pen/jAXRKm
If you want to remove the spaces to the left and right of the row inside of the panel, you'll need to override that element's padding in a similar fashion.
You can see from the jfiddle link below what I'm trying to do and what the problem is. On a large screen I get a big space at the bottom which I can't remove. On the mobile I'd like each of the four images to take up the full screen but can't get it to work. Been trying to sort this for a day and I'm just going in circles now. Any help would be appreciated.
cheers
mike.
http://jsfiddle.net/batman13/wpnLjsuo/`
<div class="col-sm-6 fill50 hidden-xs" style=
"background-image:url('http://ajsroofingsolutions.com/images/sony_xperia-wallpaper-1920x1080.jpg');">
<div class="carousel-caption">
<h2>Jonny 5 Alive Big Screen </h2>
</div>
</div>
<div class="col-xs-12 fill100 visible-xs" style=
"background-image:url('http://ajsroofingsolutions.com/images/sony_xperia-wallpaper-1920x1080.jpg');">
<div class="carousel-caption">
<h2>Jonny 5 Alive mobile</h2>
</div>
</div>
<div class="col-sm-6 fill50 hidden-xs" style=
"background-image:url('http://ajsroofingsolutions.com/images/branding.jpg');">
<div class="carousel-caption">
<h2>Jonny 5 Alive2 Big Screen</h2>
</div>
</div>
<div class="col-xs-12 fill100 visible-xs" style=
"background-image:url('http://ajsroofingsolutions.com/images/branding.jpg');">
<div class="carousel-caption">
<h2>Jonny 5 Alive mobile</h2>
</div>
</div>
</div>
<div class="row" style="height:50%">
<div class="col-sm-12 fill100 hidden-xs" style=
"background-image:url('http://ajsroofingsolutions.com/images/apple_wooden-wallpaper-1920x1080.jpg');">
<div class="carousel-caption">
<h2>Jonny 5 Alive3 Big Screen</h2>
</div>
</div>
</div>
<div class="row" style="height:50%">
<div class="col-xs-12 fill100 visible-xs" style=
"background-image:url('http://ajsroofingsolutions.com/images/apple_wooden-wallpaper-1920x1080.jpg');">
<div class="carousel-caption">
<h2>Jonny 5 Alive3 Mobile</h2>
</div>
</div>
</div>
</div>
<div class="col-sm-6 fill50 hidden-xs" style=
"background-image:url('http://ajsroofingsolutions.com/images/background.jpg');">
<div class="carousel-caption">
<h2>Jonny 5 Alive Big Screen</h2>
</div>
</div>
<div class="col-xs-12 fill100 visible-xs" style=
"background-image:url('http://ajsroofingsolutions.com/images/background.jpg');">
<div class="carousel-caption">
<h2>Jonny 5 Alive Mobile</h2>
</div>
</div>
</div>`
White space issue is because of this:
<div class="row" style="height:50%">
<div class="col-sm-12 col-xs-12 fill100 visible-xs" style=
"background-image:url('http://ajsroofingsolutions.com/images/apple_wooden-wallpaper-1920x1080.jpg');">
<div class="carousel-caption">
<h2>Jonny 5 Alive3 Mobile3</h2>
</div>
</div>
</div>
You are setting the height of the row and hiding the content, so the row is still showing. You need to hide the row so move your .visible-xs and .hidden-xs to the rows. After that wanting the full viewport height on the mobile is going to require you to set up a media query and move your inline height styling out into a CSS file. For example:
<div class="row visible-xs" id="test">
<div class="col-sm-12 col-xs-12 fill100" style=
"background-image:url('http://ajsroofingsolutions.com/images/apple_wooden-wallpaper-1920x1080.jpg');">
<div class="carousel-caption">
<h2>Jonny 5 Alive3 Mobile3</h2>
</div>
</div>
</div>
CSS:
#test{
height: 50%;
}
#media(max-width: 500px){
#test{
height: 100vh;
}
}
i have one image in a page which is inside of a thumbnail(using bootstrap 3) i want to center this image, but it goes to the left of the page. how can i center this thumbnail?
here's the code:
<div class="container">
<div class="row-fluid">
<div class="col-sm-12">
<div class="img-thumbnail">
<img class="img-responsive center-block" src="images/winning logo.png"
alt="...">
<div class="container">
<div class="caption">
<h5>Logo Design</h5>
</div>
</div>
</div>
</div>
</div>
</div>
to brian: it didn't work with my thumbnail inside a carousel. the width of the thumbnail extend(right and left) inside the carousel.
<div class="carousel-inner">
<div class="item active">
<div class="row text-center">
<div class="col-sm-12">
<a href="" class="thumbnail">
<img class="img-responsive center-block" src="images/winning
logo.png" alt="Slide">
<div class="carousel-caption">
<h4>CANYONLAND RENTALS</h4>
<p>Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. </p>
</div>
</a>
</div><!--END OF COL-SM-12-->
</div><!--END OF ROW-->
</div>
</div>
it resolved, need to change the word "thumbnail" to "img-thumbnail".
I,m trying to make a responsive website using bootstrap3 that is 3-column in large screens and 2-column in medium:
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-4" id="sidebar1"></div>
<div class="col-lg-6 col-md-8" id="main"></div>
<div class="col-lg-3 col-md-4" id="sidebar2"></div>
</div>
</div>
http://www.bootply.com/yfJF1flD0V
but this code not working properly and on medium size, sidebar2 goes in a new row and i want sidebar2 goes below sidebar1 directly. how can i do that?
You've got to duplicate some of your content and use hidden-lg and visible-lg.
DEMO ON BOOTPLY
<div class="container">
<div class="row">
<!-- on md only -->
<div class="col-md-4 hidden-lg">
<div class="row">
<div class="col-md-12 grey1">
Sidebar 1 md - Lorem ipsum dolor sit amet...
</div>
<div class="col-md-12 grey2">
Sidebar 2 md - Lorem ipsum dolor sit amet...
</div>
</div>
</div>
<!-- on lg only -->
<div class="col-lg-2 visible-lg">
Sidebar 1 lg - Lorem ipsum dolor sit amet...
</div>
<div class="col-lg-2 col-lg-push-8 visible-lg">
Sidebar 2 lg - Lorem ipsum dolor sit amet...
</div>
<!-- on all -->
<div class="col-md-8 col-lg-pull-2">
Main all - Lorem ipsum dolor sit amet...
</div>
</div>
</div>
Because of the requirement to stack your sidebars on md screens with main content to their right, you've got to put the sidebars in a containing column. But that containing column then makes it so you can't bookend your sidebars around that same main content in lg screens. Hence the need to use visible and hidden. I always feel like they're a bit clunky, but otherwise I think you won't get exactly what you want...
I do it with jQuery.
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-4" id="sidebar1"></div>
<div class="col-lg-6 col-md-8" id="main"></div>
<div class="col-lg-3 col-md-4" id="sidebar2"></div>
</div>
</div>
and jQuery:
function mediumResponsive() {
// Reset everything
$( '#main>div' ).removeClass('col-md-8');
$("#sidebar1").next().andSelf().unwrap();
$( "#sidebar2" ).insertAfter( $( "#main" ) );
if ($('#is-md').is(":visible")) {
// Do medium responsive
$( "#sidebar2" ).insertAfter( $( "#sidbar1" ) );
$("#sidebar1").next().andSelf().wrapAll('<div class="col-md-4"><div class="container-fluid"');
$( '#main>div' ).addClass('col-md-8');
};
};
$(document).ready(mediumResponsive);
$(window).bind( "resize", mediumResponsive );
and it works.
Please tell me your comments.