I use Polo - Responsive Multi-Purpose HTML5 Template.
I can't center my object
I did try many solutions, and nothing work for me still on left side.
See screenshot
<!--Single image lightbox -->
<div class="hr-title hr-long center"><abbr>Single image lightbox</abbr> </div>
<div class="row col-no-margin">
<div class="col-md-4">
<div class="grid-item">
<div class="grid-item-wrap">
<div class="grid-image"> <img alt="Image Lightbox" src="https://via.placeholder.com/300x200" /> </div>
<div class="grid-description">
<a title="Paper Pouch!" data-lightbox="image" href="https://via.placeholder.com/300x200" class="btn btn-light btn-rounded">Zoom</a>
</div>
</div>
</div>
</div>
<!--Single image lightbox -->
<hr class="space">
</div>
Add below CSS to center align the image
img {
margin-left: 50%;
transform: translateX(-50%);
}
<!--Single image lightbox -->
<div class="hr-title hr-long center"><abbr>Single image lightbox</abbr> </div>
<div class="row col-no-margin">
<div class="col-md-4">
<div class="grid-item">
<div class="grid-item-wrap">
<div class="grid-image"> <img alt="Image Lightbox" src="https://via.placeholder.com/600x400" /> </div>
<div class="grid-description">
<a title="Paper Pouch!" data-lightbox="image" href="images/mockup/1.jpg" class="btn btn-light btn-rounded">Zoom</a>
</div>
</div>
</div>
</div>
</div>
<!--Single image lightbox -->
<hr class="space">
This is not the only solution, this is a suggestion :)
You can just use class offset-md-4 combined with text-center and it should work.
Also think about mobile. I have added offset-2 and col-8 to make sure it looks good on small screen too.
img {
max-width: 100%;
margin: auto;
display: block;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="hr-title hr-long center">
<abbr>Single image lightbox</abbr>
</div>
<div class="container">
<div class="row col-no-margin">
<div class="offset-2 col-8 offset-md-4 col-md-4 text-center">
<div class="grid-item">
<div class="grid-item-wrap">
<div class="grid-image"> <img alt="Image Lightbox" src="https://via.placeholder.com/300x200" /></div>
<div class="grid-description">
<a title="Paper Pouch!" data-lightbox="image" href="https://via.placeholder.com/300x200" class="btn btn-light btn-rounded">Zoom</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!--Single image lightbox -->
<hr class="space">
Instead of
<div class="col-md-4">
Do the following:
<div class="col-md-12 text-center">
.text-center is the bootstrap class which will center the image with respect to the column
.col-md-12 will imply there is only 1 column in the entire row
Related
I added a new advertising block to the header visible here: https://musebycl.io/test_page. This made the navigation block move to the far right. I can't figure out why that is happening, even though these elements are supposedly in separate divs.
How do I modify the header ad or the navigation HTML/CSS to bring the navigation back to its normal position as visible on the home page (https://musebycl.io/)?
Your framework applies flex rules on the .row element that push your navigation block to the right, as it has no defined width.
Try to move your add .block-content one level up in your rows into div.container.py-2.row
with this html it works:
<div class="container py-2">
<div class="row justify-content-between align-items-center">
<div class="block-content">
<div
class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item">
...
</div>
</div>
<div class="col-auto">
<div class="row justify-content-between align-items-center">
<div class="col-auto">
<div class="region region-logo">
<div id="block-headerad"
class="block block-block-content block-block-content98569f6a-2644-4a93-a22a-d735717c7cda">
</div>
<div id="block-muse-sitebranding-3" class="block block-system block-system-branding-block">
<a href="/" rel="home" class="site-logo">
<img src="https://cdn.musebycl.io/compact-muse-logo.png" alt="Home">
</a>
</div>
</div>
</div>
<div class="col-auto d-none d-lg-block">
<div class="region region-header-primary-menu">
...
</div>
</div>
</div>
</div>
<div class="col-auto">
<div class="row justify-content-between align-items-center no-gutters">
<div class="col-auto d-none d-lg-block">
<div class="social-menu d-flex align-items-center">
...
</div>
<div class="col-auto">
<div id="user-action-menu" class="user-action-menu d-flex align-items-center">
...
</div>
</div>
<div class="d-lg-none">
...
</div>
</div>
</div>
</div>
</div>
You can create external CSS like
#advertising-nav-bar {
position: fixed;
top: 0px;
}
HTML :
<div id="advertising-nav-bar">
<!--content -->
</div>
You have to give your block-content a width.
Like:
.block-content{
width: 500px;
}
I have the following bootstrap code:
<div class="container-fluid">
<div class="row">
<div class="col-xs-2 col-md-2 col-sm-2">
<div style="width: 75px; background-color: #ccc">
<img width="75" alt="picture" src="https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300" />
</div>
</div>
<div class="col-xs-10 col-md-10 col-sm-10" style="">
Right content
</div>
</div>
</div>
On tablets and desktops, this code looks good. However, on smaller devices, xs, the right content flows into the image. I am trying to make the text just wrap on the right and not collide with the image.
I have a fiddle here so you can see what I'm talking about. If you open the fiddle and resize the browser small enough, you'll see the right text overlap onto the image. How can I prevent this?
Try this.
<div class="container-fluid">
<div class="row">
<div class="col-xs-3 col-md-2 col-sm-2">
<div style="width: 75px; background-color: #ccc">
<img class="img-responsive" alt="picture" src="https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300" />
</div>
</div>
<div class="col-xs-9 col-md-10 col-sm-10" style="">
Right content
</div>
</div>
</div>
It is because of the width set.
Try this.
JSFiddle
HTML
<div class="container-fluid">
<div class="row">
<div class="col-xs-2 col-md-2 col-sm-2">
<div style="background-color: #ccc">
<img class="test-image" alt="picture" src="https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300" />
</div>
</div>
<div class="col-xs-10 col-md-10 col-sm-10" style="">
Right content
</div>
</div>
</div>
CSS
.test-image{
width:100%;
height:auto;
min-width:25px;
}
Easiest way I know is to apply a direct width to element. You could theoretically alter the bootstrap 3 SCSS or LESS (whichever you use) and add in a special column class, but this is the most direct method.
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<div style="width:75px" class="col-xs-2">
<div style="width: 75px; background-color: #ccc">
<img width="75" alt="picture" src="https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300" />
</div>
</div>
<div class="col-xs-10 col-md-10 col-sm-10" style="">
Right content
</div>
</div>
</div>
It is becaue of the width of the col-xs-2.You can chage that.Or try an alternative solution like this
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<div style="width: 75px; background-color: #ccc;display:table-cell;">
<img width="75" alt="picture" src="https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300" />
</div>
<div class=" " style="display:table-cell;vertical-align:middle;">
Right content
</div>
</div></div></div>
Or with css flexboxes like
<div class="container-fluid">
<div class="row">
<div class="col-xs-12" style="display:flex">
<div style="width: 75px; background-color: #ccc;flex:1;">
<img width="75" alt="picture" src="https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300" />
</div>
<div class=" " style="flex:1;vertical-align:middle;">
Right content
</div></div></div></div>
here's my markup:
<div class="row">
<div class="col-md-3">
<div class="row">
<a href="#">
<div class="col-md-6 col-xs-6">
<img class="img-responsive" src="/images/foo.jpg">
</div>
<div class="col-md-6 col-xs-6 vorteil">
text
</div>
</a>
</div>
</div>
<! -- plus 3 more items -->
</div>
which will look like this:
the problem however is - when reducing the browser width it will turn out like this:
the image will overflow its container although it should be responsive ..
any ideas what's wrong?
thanks
Wrap the red and grey divs in a DIV tag, not a link. Give the following style to your containing div:
.containing-div {display:block; overflow:auto;}
you are missing the parent class .container form bootstrap. look at bootstrap docs
.container {
border: 1px grey solid
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="row">
<a href="#">
<div class="col-md-6 col-xs-6">
<img class="img-responsive" src="///dummyimage.com/300x600">
</div>
<div class="col-md-6 col-xs-6 vorteil">
text
</div>
</a>
</div>
</div>
<! -- plus 3 more items -->
</div>
</div>
here's my markup:
<style>
a.item
{
border:1px solid #aaa;
background:#ddd;
padding:10px;
display:block;
}
span.price
{
display:block;
text-align:center;
background:#555;
color:white;
}
</style>
<div class="main">
<div class="row">
<div class="col-md-3">
<a class="item" href="#">
<div class="row">
<div class="col-md-6">
IMAGE
</div>
<div class="col-md-6">
<span class='price'>123.45</span>
</div>
</div>
</a>
</div>
<div class="col-md-3">
<a class="item" href="#">
<div class="row">
<div class="col-md-6">
IMAGE
</div>
<div class="col-md-6">
<span class='price'>123.45</span>
</div>
</div>
</a>
</div>
<div class="col-md-3">
<a class="item" href="#">
<div class="row">
<div class="col-md-6">
IMAGE
</div>
<div class="col-md-6">
<span class='price'>123.45</span>
</div>
</div>
</a>
</div>
<div class="col-md-3">
<a class="item" href="#">
<div class="row">
<div class="col-md-6">
IMAGE
</div>
<div class="col-md-6">
<span class='price'>123.45</span>
</div>
</div>
</a>
</div>
</div>
</div>
it looks fine - like this:
the problem however is - when decreasing the browser window's width, it will destroy the layout and will look like this:
"image" and price are not side-bye-side anymore .. any ideas what's wrong with my code?
thanks
Include col-xs-6 next to col-md-6.
https://jsfiddle.net/gqmarfkh/ jsFiddle - I changed 2 of them as an example.
If you change .col-md-6 to col-xs-6 it should solve your problem. The class col-md-6 has no value untill the screen size is medium and up. Class col-xs-* will have a value from x-small and up. Check out this link: http://getbootstrap.com/css/#grid-options
I'm new at bootstrap and trying to place a simple grid of images on the webpage. I'd like borders between the images but NOT the edges of the browser. By default bootstrap puts padding on all 4 sides of the col-md elements.
I cant 'hardcode' the padding since the cells change position when the browser size changes according the responsive design. Is there a way for bootstrap to automatically only add padding to the insides?
HTML
<div class="row">
<div class="col-md-8">
<img src="~/Content/images/saucer.jpg" />
</div>
<div class="col-md-4">
<img src="~/Content/images/metalbranch.jpg" />
</div>
</div>
<div class="row" >
<div class="col-md-4">
<img src="~/Content/images/moon.jpg" />
</div>
<div class="col-md-4">
<img src="~/Content/images/peacockOnWood.jpg" />
</div>
<div class="col-md-4">
<img src="~/Content/images/appleGlass.jpg" />
</div>
</div>
<div class="row">
<div class="col-md-4">
<img src="~/Content/images/pianoKeysNecklace.jpg" />
</div>
<div class="col-md-8">
<img src="~/Content/images/treeWithNecklace.jpg" />
</div>
</div>
<div class="row">
<div class="col-md-8">
<img src="~/Content/images/gridOfCorks.jpg" />
</div>
<div class="col-md-4">
<img src="~/Content/images/trees.jpg" />
</div>
</div>
CSS
.col-md-4 img, .col-md-8 img {
width:100%;
margin: 20px 0 0 0;
padding: 0;
}
Have a look here : http://www.helloerik.com/the-subtle-magic-behind-why-the-bootstrap-3-grid-works
So it should be something like :
<div class='container'>
<div class='row'>
<ul>
<li>...</li>
<li>...</li>
</ul>
</div>
</div>