I'm relatively new to the twitter bootstrap world and % based widths and am confusing myself greatly with what should be an easy thing to accomplish.
I'm trying to center each of the left floated .subimg on my page. Obviously margin:0 auto won't work because it's not a static grid. I've used text-align centers on parent divs to no avail. My markup is below:
<style>
.subimg{float:left;}
.row-fluid{text-align:center;}
</style>
<div class="row-fluid"><!-- begin row -->
<div class="span12 subimgstrip">
<div class="subimg">
<a href="#">
<img src="/wp-content/themes/wordpress-bootstrap/img/products/infection/1.jpg"/>
<h6>Customize Settings</h6>
</a>
</div>
<div class="subimg">
<a href="#">
<img src="/wp-content/themes/wordpress-bootstrap/img/products/infection/2.jpg"/>
<h6>Set Specific Criteria</h6>
</a>
</div>
<div class="subimg">
<a href="#">
<img src="/wp-content/themes/wordpress-bootstrap/img/products/infection/3.jpg"/>
<h6>Customize Alerts</h6>
</a>
</div>
<div class="subimg">
<a href="#">
<img src="/wp-content/themes/wordpress-bootstrap/img/products/infection/4.jpg"/>
<h6>Create Antibiograms</h6>
</a>
</div>
<div class="subimg">
<a href="#">
<img src="/wp-content/themes/wordpress-bootstrap/img/products/infection/5.jpg"/>
<h6>Isolate Information</h6>
</a>
</div>
</div>
</div><!-- end row -->
Best way to center floated content with twitter bootstrap is to give the floated items a style of display:inline-block; and give the parent div a style of text-align:center
Related
I'm trying to modify an existing component which inherits the Flexbox concept.
Currently it looks like this:
Now what I'm trying to achieve is regardless of content size inside the box:
The box will have the same height - aligned to each other
The button will stay at the bottom even if the top contents are long.
Here is the existing structure that I'm trying to fix:
<section class="container counsellor-list">
<div class="row">
<div class="col-12 col-sm-12 col-lg-6 col-xl-4 mb-30 counsellor-list-item">
<div class="state_chosen">
<img class="img-fluid" src="https://st.depositphotos.com/1771835/1477/i/950/depositphotos_14779771-stock-photo-portrait-of-confident-young-doctor.jpg" />
<div class="bg-blue20 p-30 counsellor-list-item-content">
<div class="text-coral subtitle-small text-bold text-uppercase mb-24 d-flex flex-wrap">
<span class="">
Wien
</span>
<span class="ml-16">
St. Polten
</span>
<span class="ml-auto language">
<span>
DE
<span> | </span>
EN
</span>
</span>
</div>
<h2 class="mb-24">Jan Faustio</h2>
<div class="">
<a class="btn btn-coral" href="#"> Button </a>
</div>
</div>
</div>
</div>
...
</section>
Codepen link
I tried a lot of stuff but didn't work as I'm expecting it to be/result.
Check this, I hope I understood what you want to achieve https://codepen.io/IvanBisultanov/pen/PoQmXqX
I also added .btn-wrap classname, and wrapped all HTML above in div
.counsellor-list-item-content {
flex-grow: 1;
display: flex;
flex-direction: column;
}
.btn-wrap {
margin-top: auto;
}
It's probably a silly question, but I don't understand why it doesn't work.
I need to create a bootstrap menu where each item is an image on the left and several lines of text on the right.
I wrote the following HTML for this:
<div class="btn-group">
<ul class="dropdown-menu" style="display: block;">
<li>
<a href="#" class="clearfix">
<div class="pull-left">
<span>My image</span>
</div>
<div class="pull-left">
<div>Text on the right</div>
<div>Second line of text</div>
</div>
</a>
</li>
</ul>
</div>
Link to jsfiddle: https://jsfiddle.net/brucecat5/rr71xmry/
However, width is not calculated properly and the second floated block is moved below the first block.
I don't understand why it happens and what to do to fix this.
P.S. I know I can implement it with display: table-cell, but I just don't understand the reason why my approach doesn't work.
I think problem is how you use dropdown-menu class, try this:
<div class="btn-group">
<ul style="display: block;">
<li>
<a href="#" class="clearfix">
<div class="pull-left">
<img src="smiley.gif" alt="Smiley face" width="42" height="42">
</div>
<div class="pull-right">
<p>Text on the right</p>
<p>Second line of text</p>
</div>
</a>
</li>
</ul>
If you want use a dropdown-menu, you can look an example in this page:
https://www.w3schools.com/bootstrap/bootstrap_button_groups.asp
Hope it helps.
I am having trouble with grid in bootstrap grid. I have empty spaces in a row. this is shown on desktop and on mobile is like .
The code which I am using is
<div class="row">
<div class="col-xs-6 col-md-3 col-sm-4 portfolio-item">
<a href="#">
<img class="img-responsive" src="image/book image/book1.png" alt="">
</a>
</div>
<div class="col-xs-6 col-md-3 col-sm-4 portfolio-item">
<a href="#">
<img class="img-responsive" src="image/book image/book2.png" alt="">
</a>
</div>
<div class="col-xs-6 col-md-3 col-sm-4 portfolio-item">
<a href="#">
<img class="img-responsive" src="image/book image/book3.png" alt="">
</a>
</div>
<div class="col-xs-6 col-md-3 col-sm-4 portfolio-item">
<a href="#">
<img class="img-responsive" src="image/book image/book4.png" alt="">
</a>
</div>
<div class="col-xs-6 col-md-3 col-sm-4 portfolio-item">
<a href="#">
<img class="img-responsive" src="image/book image/book4.png" alt="">
</a>
</div>
</div>
I don't really know how I could fix that, so I hope somebody can give me some advice.
You have to set min-height for the columns since the columns have different heights.
.portfolio-item {
min-height: 200px;
}
Change 200px for a minimum that would fit the columns in their respective places.
This is due to different heights on your divs. You have a few possible fixes for this:
Set all divs to equal heights manually.
Use something like https://github.com/liabru/jquery-match-height to set the heights of divs for you. There are different settings you can use such as on a row per row basis.
Use flexbox grids. Unfortunately flexbox isn't widely available yet 😵
Use a mixture of flexbox with JavaScript like this http://osvaldas.info/flexbox-based-responsive-equal-height-blocks-with-javascript-fallback
make sure all the book images are same size...or just set min-height to "portfolio-item" class.
Just add class clearfix after every row
I'm trying to develop a website with Materialize and there is a slider in site. Materialize is responsive and working well at various resolutions. However, When I decrease the screen size, the slider width is decreasing as well (as it should be). But the image in it just getting cropped instead of scaling it to the size of the slider. I added the responsive-img class to the img but nothing changed.
Slider code
<div class="slider">
<ul class="slides">
<li>
<img src="images/slider/slide_1.jpg">
<div class="caption center-align">
<h3>Eraltek Kurumsal</h3>
<h5 class="light grey-text text-lighten-3">Sitemize hoşgeldiniz</h5>
</div>
</li>
<li>
<a href="panoramic/panoramic.html">
<img src="images/slider/slide_2.jpg">
<div class="caption right-align">
<h3>Eraltek Mağaza</h3>
<h5 class="light yellow-text text-darken-1">360 derece mağaza turu için tıklayınız</h5>
</div>
</a>
</li>
<li>
<img src="images/slider/slide_3.jpg">
</li>
<li>
<img src="images/slider/slide_4.jpg">
</li>
<li>
<img src="images/slider/slide_5.jpg">
</li>
</ul>
</div>
Try to define in your css file
.slider .slides li img {
background-size:100% auto;
background-repeat: no-repeat;
}
You should try adding a css
max-width : 100%;
to the <img> tag. Hope this will resolve the issue. Also don't forget to add responsive-img class to <img>
Use img-responsive class with img tag.(you are using responsive-img, It is a bootstrap class. It is not working in materialize design)
$(document).ready(function () {
$('.slider').slider({full_width: true});
});
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<div class="slider">
<ul class="slides">
<li>
<img class="img-responsive" src="http://lorempixel.com/580/250/nature/1">
<div class="caption center-align">
<h3>This is our big Tagline!</h3>
<h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
</div>
</li>
<li>
<img class="img-responsive" src="http://lorempixel.com/580/250/nature/2">
<div class="caption left-align">
<h3>Left Aligned Caption</h3>
<h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
</div>
</li>
</ul>
</div>
Try
.slider li img{max-width:100%;height:auto;}
Hi so I'm working on a site with an image gallery and I decided to use a Codeigniter and a library called Image CRUD for some of the backend stuff, and Twitter Bootstrap for the front end. Its pretty basic stuff. The problem is Image CRUD generates a lot of its own code for the front end so I'm having trouble getting it to look the way I want. Im trying to make a responsive gallery that resizes and stays centered on a bunch of different devices. This should be a piece of cake with bootstrap, but for some reason it just won't work. Any help would be greatly appreciated!
Heres the code for the images that Image CRUD outputs:
<ul class='photos-crud'>
<li id="photos_206">
<div class='photo-box'>
<img src='link_to_thumb__b551b-6.jpg' width='290' height='260' class="img-responsive basic-image" />
<div class="clear"></div>
</div>
</li>
<li id="photos_203">
<div class='photo-box'>
<img src='link_to_thumb.jpg' width='290' height='260' class="img-responsive basic-image" />
<div class="clear"></div>
</div>
</li>
<li id="photos_204">
<div class='photo-box'>
<img src='link_to_thumb.jpg' width='290' height='260' class="img-responsive basic-image" />
<div class="clear"></div>
</div>
</li>
<li id="photos_205">
<div class='photo-box'>
<img src='link_to_thumb.jpg' width='290' height='260' class="img-responsive basic-image" />
<div class="clear"></div>
</div>
</li>
<li id="photos_202">
<div class='photo-box'>
<img src='link_to_thumb.jpg' width='290' height='260' class="img-responsive basic-image" />
<div class="clear"></div>
</div>
</li>
<li id="photos_201">
<div class='photo-box'>
<img src='link_to_thumb.jpg' width='290' height='260' class="img-responsive basic-image" />
<div class="clear"></div>
</div>
</li>
</ul>
The issue may be with your image width/height having exact dimensions. If you can get rid of that and let bootstrap take over, that'd be great. Responsive images are usually 100% of the parent width and that parent having a percentage of something else. Maybe you can use SASS to #extend bootstrap styles into the generated elements so..
.photos-crud { #extend .row }
.photos-crud > li { #extend .col-md-3}
Something like that will setup the grid for laying out the images, then if you can remove the auto-generated dimensions, great, but if not maybe use !important to override the dimensions like..
.photos-crud > li img {width:100% !important; height:auto !important;}