I have the following code with a screen attached.
As you can see there are 3-col with the image and title but they are not aligned either their padding is the same.
The overall section is on the left side and has a lot of space from the right.
Any idea how to make them equal in height and width?
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.0/css/bootstrap.min.css" integrity="sha512-XWTTruHZEYJsxV3W/lSXG1n3Q39YIWOstqvmFsdNEEQfHoZ6vm6E9GK2OrF6DSJSpIbRbi+Nn0WDPID9O7xB2Q==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<div id="section-top-homepage">
<!-- vission -->
<div class="col-md-4 col-sm-4">
<div class="whitecolor">
<img alt="" data-entity-type="file" data-entity-uuid="3afd4d82-63ca-4046-b77c-1d3815e959cf" src="/tilesw/sites/default/files/inline-images/vision.svg" />
<h3 class="top25">Vision</h3>
</div>
</div>
<!-- objectives -->
<div class="col-md-4 col-sm-4">
<div class="whitecolor">
<img alt="" data-entity-type="file" data-entity-uuid="6e0a289f-a866-4d46-81c8-6f2f6aceecd8" src="/tilesw/sites/default/files/inline-images/objectives.svg" />
<h3 class="top25">Objectives</h3>
</div>
</div>
<!-- mission -->
<div class="col-md-4 col-sm-4">
<div class=" whitecolor">
<img alt="" data-entity-type="file" data-entity-uuid="aeaa7c28-c987-4174-a2c2-5fa45de0ab83" src="/tilesw/sites/default/files/inline-images/mission.svg" />
<h3 class="top25">Mission</h3>
</div>
</div>
</div>
I use bootstrap, but the red section showing the three icons has the following code which i think affected the entire row content not be organized.
section#block-counterboxstyle3 {
display: block;
box-sizing: border-box;
height: 300px;
background-color: #e00021;
clip-path: ellipse(550% 100% at 400% 100%);
margin-top: -200px;
}
Are you using bootstrap ?
When you set a class like col-4, you only set the width of each bloc, you need to set a max-heigth on css or in tag IMG using height.
Example:
Set the width of the wrapping div with id id="section-top-homepage to 100% of the page. You can confirm this by setting its border to 1px solid red. This worked for me.
I have a hidden popout menu that toggles its visibility on the click of a button. When the popout menu becomes visible it displaces the main content to the bottom of the page. The idea would be to have the popout menu is displayed over the content div.
HTML:
<!------- Pop out menu for Side Navigation Bar ------->
<div class = "popout_navbar_align_center">
<div class = "menu_nav_inner align-center pad-2">
<ul>
<li><button class="static_nav_btn">THE MISSION</button></li>
<li><button class="static_nav_btn">OUR WORK</button></li>
<li><button class="static_nav_btn">WHO WE ARE</button></li>
<li><button class="static_nav_btn">MISS ROSIE</button></li>
<li><button class="static_nav_btn">SCHOLARSHIP</button></li>
<li><button class="static_nav_btn">CONTACT</button></li>
</ul>
<div class="box">
DONATE
</div>
</div>
</div>
<!------- Hamburger Top Navigation Bar for 768px and smaller screens ------->
<div class = "navBar_top">
<div class = "hamburger-bar-center" id ="topNavId" onclick="myFunction(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
</div>
<!------- Main body ------->
<main id="content" class="flex-grow">
<div id="homepage-banner">
<div class="page-banner">
<h2 class="small-hidden">
FOUNDATION
</h2>
</div>
</div>
</main>
CSS:
(Popout menu)
.popout_navbar_align_center {
background-image: url("Assets/Textures/sandpaper.png");
background-color:;
width: 240px;
height: 100%;
top: 0;
left: 0;
display: none;
overflow-x: hidden;
}
.popout_navbar_align_center .menu_nav_inner {
padding-top: 60px;
}
**JAVASCRIPT: **
$("#sideNavId").on("click", function() {
if($(".popout_navbar_align_center").is(":visible"))
{
$(".popout_navbar_align_center").hide("slow");
}
else {
$(".popout_navbar_align_center").show("slow");
}
});
I've tried manipulating the css for the main content div but everything I've tried doesn't seem to work in regards to that approach. I'm not sure which divs properties should be manipulated to get the desired effect.
You can try to use the top and left css values along with position: absolute to achieve your popup not moving the rest of the content, but instead floating in front of it
I just want my all images from my instafeed will all be the same size, shouldn't be distorted and image will resize freely (responsive), and i want it to look exactly like this: instagram images , we can zoom the image a bit and make overflow hidden, its just i dont know the tricks :)
here is my work: http://jsfiddle.net/jazzu20/1c9yf61x/
img {
max-width: 100%;
border: 0;
}
.col-md-3 {
width: 25%;
float: left;
}
.livery-instafeed-section {
min-height: 285px;
}
<div class="livery-instafeed-section col-md-12">
<div id="instafeed">
<div class="col-md-3" style="padding:0;">
<a href="https://instagram.com/p/9JOiOdMLo5/" target="_blank">
<img src="https://scontent.cdninstagram.com/hphotos-xaf1/t51.2885-15/s640x640/sh0.08/e35/11251638_621920521284538_937019183_n.jpg">
</a>
</div>
<div class="col-md-3" style="padding:0;">
<a href="https://instagram.com/p/9Gp4RjMLgE/" target="_blank">
<img src="https://scontent.cdninstagram.com/hphotos-xpf1/t51.2885-15/s640x640/sh0.08/e35/1390058_175285799480082_576833592_n.jpg">
</a>
</div>
<div class="col-md-3" style="padding:0;">
<a href="https://instagram.com/p/9FJpd7MLts/" target="_blank">
<img src="https://scontent.cdninstagram.com/hphotos-xfa1/t51.2885-15/s640x640/sh0.08/e35/12093236_443227142549068_286565452_n.jpg">
</a>
</div>
<div class="col-md-3" style="padding:0;">
<a href="https://instagram.com/p/9D_lqkMLqV/" target="_blank">
<img src="https://scontent.cdninstagram.com/hphotos-xaf1/t51.2885-15/s640x640/sh0.08/e35/12145135_1069396733117579_706096349_n.jpg">
</a>
</div>
<div class="col-md-3" style="padding:0;">
<a href="https://instagram.com/p/9Bb92JMLhh/" target="_blank">
<img src="https://scontent.cdninstagram.com/hphotos-xaf1/t51.2885-15/s640x640/sh0.08/e35/12093429_1668694736699760_1827692759_n.jpg">
</a>
</div>
<div class="col-md-3" style="padding:0;">
<a href="https://instagram.com/p/9ACbbHMLlD/" target="_blank">
<img src="https://scontent.cdninstagram.com/hphotos-xfa1/t51.2885-15/s640x640/sh0.08/e35/12135431_1733638416868070_1024332902_n.jpg">
</a>
</div>
<div class="col-md-3" style="padding:0;">
<a href="https://instagram.com/p/8_BXkSsLn5/" target="_blank">
<img src="https://scontent.cdninstagram.com/hphotos-xaf1/t51.2885-15/s640x640/sh0.08/e35/12105054_849750965144841_2082888771_n.jpg">
</a>
</div>
<div class="col-md-3" style="padding:0;">
<a href="https://instagram.com/p/89fRuosLje/" target="_blank">
<img src="https://scontent.cdninstagram.com/hphotos-xaf1/t51.2885-15/s640x640/sh0.08/e35/12107557_866233773472414_1869843871_n.jpg">
</a>
</div>
</div>
Here's a fiddle.
Explanation of what happens here:
First of all, I've moved the images to be a background image of the anchor (<a>) tag. That gives you a lot more flexibility, because you can make use of the background-position and background-size properties.
Next I've positioned the anchor absolute (and the column relative to make sure the anchor is taking account of it's parents size) and made it as heigh and wide as the column.
Now you have the same width, but not the same height, as the column doesn't have a height from itself. Giving it a percentual height doesn't help you, because that would be relative to the parent, while you want to have the column to have a height relative to it's own height. And now kicks in the classic padding trick; give the element a bottom-padding and make it's child 100% the height of it's parent, like so:
.parent { width: 25%; padding-bottom: 25%; } /* .col-md-3 in your case */
.child { position: absolute; width: 100%; height: 100%; }
So now we have perfectly square elements, with the images as a background. This would normally suffice, because with background-size: cover the browser would make sure the image would span the whole div. But as you have images with white borders (to the side and the top/bottom) you'll have to zoom those to correct it. And the larger the borders (eg. for panorama images) the bigger the zoom size. That's why I have created the .zoom and .zoom2 classes, which just increases the background-size property.
There you go!
I tried to create a full page horizontal slider by using fullpage.js plugin. I use only one section with 3 slides.
I tried to add a fixed navigation to slides in the top of page, so user can open the slides directly from the top navigation, but it doesn't work. Can anyone help me how to make it works?
HTML:
<div id="header">
Link to slide 1
Link to slide 2
Link to slide 3
<div>
<div class="section" id="section0">
<div class="slide" data-anchor="slide1">
<h1>Slide 1.js</h1>
This is slide 1
</div>
<div class="slide" data-anchor="slide2">
<h1>Slide 2</h1>
this is slide 2
</div>
<div class="slide" data-anchor="slide3">
<h1>Slide 3</h1>
</div>
</div>
Javascript:
$.fn.fullpage();
CSS
body{
color: #fff;
}
h1{
font-size:3em;
}
.section {
text-align: center;
}
#section0{
background: -webkit-gradient(linear, top left, bottom left, from(#4bbfc3), to(#7baabe));
background: -webkit-linear-gradient(#4BBFC3, #7BAABE);
background: linear-gradient(#4BBFC3,#7BAABE);
}
#header{
position:fixed;
height: 50px;
display:block;
width: 100%;
background: #333;
z-index:9;
text-align:center;
color: #f2f2f2;
padding: 20px 0 0 0;
}
#header{
top:0px;
}
Here's the jsfiddle
Thank you!
Download the last version of the plugin (2.0.7) and use the new HTML markup which uses a wrapper for the plugin:
<div id="fullpage">
<div class="section">Some section</div>
<div class="section">Some section</div>
<div class="section">Some section</div>
<div class="section">Some section</div>
</div>
Then initialize it this way:
$('#fullpage').fullpage();
And then to create a fixed element just put it outside the plugin wrapper like you can see in this live example sourcecode.
In order to create the links, don't use toSlide, use a normal URL link in case you are using anchors. (such as /#section/slide, for example: http://alvarotrigo.com/fullPage/#secondPage/2)
If you don't want to update your fullpage version for whatever reason, just use the option fixedElements as detailed in the documentation.
I know the topic is already 2 years old yet I faced the very same problem today and stumbled upon this article. Now that I´ve found a solution I thought it would be nice to share it with you guys!
<div class="wrap">
<nav class="nav">
<ul>
<li><a class="nav__item active" href="#firstPage/slide1">1</a></li>
<li><a class="nav__item" href="#firstPage/slide2">2</a></li>
<li><a class="nav__item" href="#firstPage/slide3">3</a></li>
<li><a class="nav__item" href="#firstPage/slide4">4</a></li>
</ul>
</nav>
</div>
<div id="fullpage">
<div class="section">
<div class="slide" data-anchor="slide1"></div>
<div class="slide" data-anchor="slide2"></div>
<div class="slide" data-anchor="slide3"></div>
<div class="slide" data-anchor="slide4"></div>
</div>
</div>
Don´t forget to give the active class to the first anchor.
Note that if you want to set position:fixed; on the navigation outside you probably want to adjust your z-index (I set the z-index:1000; for the the wrap but do as you like)
And for .js I just used what already comes along with the FullPage.js
$('#fullpage').fullpage({
anchors: ['firstPage'],
afterSlideLoad: function( anchorLink, index, slideAnchor, slideIndex){
$('.nav__item.active').removeClass('active');
$('.nav__item').eq(slideIndex).addClass('active');
}
});
Now our navigation anchors have an active class depending on the current slide
though I´m not sure if the href targets are best practise yet it works.
Of course you could just initalize the FullPage given navigation but this gives you full control over the markup.
Please take a look at the following image, we are using bootstrap carousel to rotate the images.
However, when the window width is large, the image doesn't align with the border properly.
But the carousel example provided by bootstrap always works fine, no matter the width of the window. Following the code.
Can someone explain why carousel is behaving differently?
Is this anything to do with Image size or some bootstrap config is missing?
<section id="carousel">
<div class="hero-unit span6 columns">
<h2>Welcome to TACT !</h2>
<div id="myCarousel" class="carousel slide" >
<!-- Carousel items -->
<div class="carousel-inner">
<div class="item active" >
<img alt="" src="/eboxapps/img/3pp-1.png">
<div class="carousel-caption">
<h4>1. Need a 3rd party jar?</h4>
</div>
</div>
<div class="item">
<img alt="" src="/eboxapps/img/3pp-2.png">
<div class="carousel-caption">
<h4>2. Create Request</h4>
</div>
</div>
<div class="item">
<img alt="" src="/eboxapps/img/3pp-3.png">
<div class="carousel-caption">
<h4>3. What happens?</h4>
</div>
</div>
<div class="item">
<img alt="" src="/eboxapps/img/3pp-4.png">
<div class="carousel-caption">
<h4>4. Status is Emailed</h4>
</div>
</div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
</div>
The solution is to put this CSS code into your custom CSS file:
.carousel-inner > .item > img {
margin: 0 auto;
}
With bootstrap 3, just add the responsive and center classes:
<img class="img-responsive center-block" src="img/....jpg" alt="First slide">
This automatically does image resizing, and centers the picture.
Edit:
With bootstrap 4, just add the img-fluid class
<img class="img-fluid" src="img/....jpg">
I faced the same problem and solved it this way:
It's possible to insert non-image content to Carousel, so we can use it.
You should first insert div.inner-item (where you will make center alignment), and then insert image inside this div.
Here is my code (Ruby):
<div id="myCarousel" class="carousel slide">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item">
<%= image_tag "couples/1.jpg" %>
</div>
<% (2..55).each do |t|%>
<div class="item">
<div class='inner-item'>
<%= image_tag "couples/#{t}.jpg" %>
</div>
</div>
<% end -%>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
And my css-code(.scss):
.inner-item {
text-align: center;
img {
margin: 0 auto;
}
}
While vekozlov's answer will work in Bootstrap 3 to center your image, it will break when the carousel is scaled down: the image retains its size instead of scaling down with the carousel.
Instead, do this on the top-level carousel div:
<div id="my-carousel" class="carousel slide"
style="max-width: 900px; margin: 0 auto">
...
</div>
This will center the entire carousel and prevent it from growing beyond the width of your images (i.e. 900 px or whatever you want to set it to). However, when the carousel is scaled down the images scale down with it.
You should put this styling info in your CSS/LESS file, of course.
In Bootstrap 4, you can add mx-auto class to your img tag.
For instance, if your image has a width of 75%, it should look like this:
<img class="d-block w-75 mx-auto" src="image.jpg" alt="First slide">
Bootstrap will automatically translate mx-auto to:
ml-auto, .mx-auto {
margin-left: auto !important;
}
.mr-auto, .mx-auto {
margin-right: auto !important;
}
Does your images have exactly a 460px width as the span6 ? In my case, with different image sizes, I put a height attribute on my images to be sure they are all the same height and the carousel don't resize between images.
In your case, try to set a height so the ratio between this height and the width of your carousel-inner div is the same as the aspectRatio of your images
It could have something to do with your styles. In my case, I am using a link within the parent "item" div, so I had to change my stylesheet to say the following:
.carousel .item a > img {
display: block;
line-height: 1;
}
under the preexisting boostrap code:
.carousel .item > img {
display: block;
line-height: 1;
}
and my image looks like:
<div class="active item" id="2"><img src="rimages/2.jpg"><div class="carousel-caption"><p>This restaurant is featured blah blah blah blah blah.</p></div></div>
I think I have a solution:
In your personal style sheet page, assign the width & height to match your image dimensions.
Create an additional separate "class" on that top div that appropriates the space with spans...(Shown below)
<div class="span6 columns" class="carousel">
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
Without touching the bootstrap.css, in your own style sheet, call "carousel"(or whatever label you choose) to match the width and height of your original pix!
.carousel {
width: 320px;
height: 200px;
}
So in my case, I am using small 320x200 images to carousel with. There is probably preset dimensions in the bootstrap.css, but I don't like changing that so I can try to stay current with future releases. Hope this helps~~
I am facing the same problem with you. Based on the hint of #thuliha, the following codes has solved my issues.
In the html file, modify as the following sample:
<img class="img-responsive center-block" src=".....png" alt="Third slide">
In the carousel.css, modify the class:
.carousel .item {
text-align: center;
height: 470px;
background-color: #777;
}
Try this
.item img{
max-height: 300px;
margin: auto;
}
#Art L. Richards 's solution didn't work out.
now in bootstrap.css, original code has become like this.
.carousel .item > img {
display: block;
line-height: 1;
}
#rnaka530 's code would break the fluid feature of bootstrap.
I don't have a good solution but I did fix it. I observed the bootstrap's carousel example very carefully http://twitter.github.com/bootstrap/javascript.html#carousel.
I find out that img width has to be larger than the grid width. In span9, width is up to 870px, so you have to prepare a image larger than 870px. If you have more container outside the img, as all the container has border or margin something, you can use image with smaller width.
For the carousel, I believe all images have to be exactly the same height and width.
Also, when you refer back to the scaffolding page from bootstrap, I'm pretty sure that span16 = 940px. With this in mind, I think we can assume that if you have a
<div class="row">
<div class="span4">
<!--left content div guessing around 235px in width -->
</div>
<div class="span8">
<!--right content div guessing around 470px in width -->
</div>
</div>
So yes, you have to be careful when setting the spans space within a row because if the image width is to large, it will send your div over into the next "row" and that is no fun :P
Link 1
Insert this on the css parent div class where your carousel is.
<div class="parent_div">
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<img src="assets/img/slider_1.png" alt="">
<div class="carousel-caption">
</div>
</div>
</div>
</div>
</div>
CSS
.parent_div {
margin: 0 auto;
min-width: [desired width];
max-width: [desired width];
}