Mixing
Bootstap carousel is being overridden by custom css and shows all images
I've tried to get Bootstrap carousel to work but the problem is that the carousel slider shows all images among each other. I can't see there is something wrong with my code, everything seems correct. Hope someone could help me.
I'm working on a wordpress theme and the carousel is for a gallery post format. What I tried is, I put my custom css above the bootstrap css in the head and than carousel works fine but my custom css not working fine anymore, so I had to put my custom css above my bootstrap css again like it should be. I don't know what's wrong.
...
<article id="post-<?php the_ID(); ?>" <?php post_class( 'minimal-format-gallery' ); ?>>
<header class="entry-header text-center">
<?php if( minimal_get_attachment() ):
$attachments = minimal_get_attachment(3);
?>
<div id="post-gallery-<?php the_ID(); ?>" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<?php
$i = 0;
foreach( $attachments as $attachment ):
$active = ( $i == 0 ? ' active' : '' );
?>
<div class="carousel-item<?php echo $active; ?> background-image standard-featured" style="background-image: url( <?php echo wp_get_attachment_url( $attachment->ID ); ?> );"></div>
<?php $i++; endforeach; ?>
</div><!-- .carousel-inner -->
<a class="carousel-control-prev" href="#post-gallery-<?php the_ID(); ?>" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#post-gallery-<?php the_ID(); ?>" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div><!-- .carousel -->
<?php endif; ?>
html wordpress bootstrap-4
asked Jan 1 at 15:15
ChuckChuck
51
add a comment |
I've tried to get Bootstrap carousel to work but the problem is that the carousel slider shows all images among each other. I can't see there is something wrong with my code, everything seems correct. Hope someone could help me.
I'm working on a wordpress theme and the carousel is for a gallery post format. What I tried is, I put my custom css above the bootstrap css in the head and than carousel works fine but my custom css not working fine anymore, so I had to put my custom css above my bootstrap css again like it should be. I don't know what's wrong.
...
<article id="post-<?php the_ID(); ?>" <?php post_class( 'minimal-format-gallery' ); ?>>
<header class="entry-header text-center">
<?php if( minimal_get_attachment() ):
$attachments = minimal_get_attachment(3);
?>
<div id="post-gallery-<?php the_ID(); ?>" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<?php
$i = 0;
foreach( $attachments as $attachment ):
$active = ( $i == 0 ? ' active' : '' );
?>
<div class="carousel-item<?php echo $active; ?> background-image standard-featured" style="background-image: url( <?php echo wp_get_attachment_url( $attachment->ID ); ?> );"></div>
<?php $i++; endforeach; ?>
</div><!-- .carousel-inner -->
<a class="carousel-control-prev" href="#post-gallery-<?php the_ID(); ?>" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#post-gallery-<?php the_ID(); ?>" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div><!-- .carousel -->
<?php endif; ?>
html wordpress bootstrap-4
asked Jan 1 at 15:15
ChuckChuck
51
add a comment |
I've tried to get Bootstrap carousel to work but the problem is that the carousel slider shows all images among each other. I can't see there is something wrong with my code, everything seems correct. Hope someone could help me.
I'm working on a wordpress theme and the carousel is for a gallery post format. What I tried is, I put my custom css above the bootstrap css in the head and than carousel works fine but my custom css not working fine anymore, so I had to put my custom css above my bootstrap css again like it should be. I don't know what's wrong.
...
<article id="post-<?php the_ID(); ?>" <?php post_class( 'minimal-format-gallery' ); ?>>
<header class="entry-header text-center">
<?php if( minimal_get_attachment() ):
$attachments = minimal_get_attachment(3);
?>
<div id="post-gallery-<?php the_ID(); ?>" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<?php
$i = 0;
foreach( $attachments as $attachment ):
$active = ( $i == 0 ? ' active' : '' );
?>
<div class="carousel-item<?php echo $active; ?> background-image standard-featured" style="background-image: url( <?php echo wp_get_attachment_url( $attachment->ID ); ?> );"></div>
<?php $i++; endforeach; ?>
</div><!-- .carousel-inner -->
<a class="carousel-control-prev" href="#post-gallery-<?php the_ID(); ?>" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#post-gallery-<?php the_ID(); ?>" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div><!-- .carousel -->
<?php endif; ?>
html wordpress bootstrap-4
asked Jan 1 at 15:15
ChuckChuck
51
I've tried to get Bootstrap carousel to work but the problem is that the carousel slider shows all images among each other. I can't see there is something wrong with my code, everything seems correct. Hope someone could help me.
I'm working on a wordpress theme and the carousel is for a gallery post format. What I tried is, I put my custom css above the bootstrap css in the head and than carousel works fine but my custom css not working fine anymore, so I had to put my custom css above my bootstrap css again like it should be. I don't know what's wrong.
...
<article id="post-<?php the_ID(); ?>" <?php post_class( 'minimal-format-gallery' ); ?>>
<header class="entry-header text-center">
<?php if( minimal_get_attachment() ):
$attachments = minimal_get_attachment(3);
?>
<div id="post-gallery-<?php the_ID(); ?>" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<?php
$i = 0;
foreach( $attachments as $attachment ):
$active = ( $i == 0 ? ' active' : '' );
?>
<div class="carousel-item<?php echo $active; ?> background-image standard-featured" style="background-image: url( <?php echo wp_get_attachment_url( $attachment->ID ); ?> );"></div>
<?php $i++; endforeach; ?>
</div><!-- .carousel-inner -->
<a class="carousel-control-prev" href="#post-gallery-<?php the_ID(); ?>" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#post-gallery-<?php the_ID(); ?>" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div><!-- .carousel -->
<?php endif; ?>
html wordpress bootstrap-4
html wordpress bootstrap-4
asked Jan 1 at 15:15
ChuckChuck
51
asked Jan 1 at 15:15
ChuckChuck
51
asked Jan 1 at 15:15
ChuckChuck
51
asked Jan 1 at 15:15
ChuckChuck
51
asked Jan 1 at 15:15
ChuckChuck
51
51
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
The problem is in your css file because you have defined a class with the same name as a bootstrap class. You should rename your custom css class or id and make sure it doesn't match with any predefined class or id. I hope after that it will work. If the problem is not resolved, edit your question and leave a comment for me.
edited Jan 2 at 17:46
Pradeep
3,26631216
answered Jan 2 at 10:15
vipul Patelvipul Patel
724
Oh man, yes I had to rename a class, because the old class I put in had an display: block attribute and bootstrap didn't override that. Thx.
– Chuck
Jan 2 at 14:04
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53996581%2fbootstap-carousel-is-being-overridden-by-custom-css-and-shows-all-images%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
The problem is in your css file because you have defined a class with the same name as a bootstrap class. You should rename your custom css class or id and make sure it doesn't match with any predefined class or id. I hope after that it will work. If the problem is not resolved, edit your question and leave a comment for me.
edited Jan 2 at 17:46
Pradeep
3,26631216
answered Jan 2 at 10:15
vipul Patelvipul Patel
724
Oh man, yes I had to rename a class, because the old class I put in had an display: block attribute and bootstrap didn't override that. Thx.
– Chuck
Jan 2 at 14:04
add a comment |
The problem is in your css file because you have defined a class with the same name as a bootstrap class. You should rename your custom css class or id and make sure it doesn't match with any predefined class or id. I hope after that it will work. If the problem is not resolved, edit your question and leave a comment for me.
edited Jan 2 at 17:46
Pradeep
3,26631216
answered Jan 2 at 10:15
vipul Patelvipul Patel
724
Oh man, yes I had to rename a class, because the old class I put in had an display: block attribute and bootstrap didn't override that. Thx.
– Chuck
Jan 2 at 14:04
add a comment |
The problem is in your css file because you have defined a class with the same name as a bootstrap class. You should rename your custom css class or id and make sure it doesn't match with any predefined class or id. I hope after that it will work. If the problem is not resolved, edit your question and leave a comment for me.
edited Jan 2 at 17:46
Pradeep
3,26631216
answered Jan 2 at 10:15
vipul Patelvipul Patel
724
The problem is in your css file because you have defined a class with the same name as a bootstrap class. You should rename your custom css class or id and make sure it doesn't match with any predefined class or id. I hope after that it will work. If the problem is not resolved, edit your question and leave a comment for me.
edited Jan 2 at 17:46
Pradeep
3,26631216
answered Jan 2 at 10:15
vipul Patelvipul Patel
724
edited Jan 2 at 17:46
Pradeep
3,26631216
edited Jan 2 at 17:46
Pradeep
3,26631216
edited Jan 2 at 17:46
Pradeep
3,26631216
3,26631216
answered Jan 2 at 10:15
vipul Patelvipul Patel
724
answered Jan 2 at 10:15
vipul Patelvipul Patel
724
answered Jan 2 at 10:15
vipul Patelvipul Patel
724
724
Oh man, yes I had to rename a class, because the old class I put in had an display: block attribute and bootstrap didn't override that. Thx.
– Chuck
Jan 2 at 14:04
add a comment |
Oh man, yes I had to rename a class, because the old class I put in had an display: block attribute and bootstrap didn't override that. Thx.
– Chuck
Jan 2 at 14:04
Oh man, yes I had to rename a class, because the old class I put in had an display: block attribute and bootstrap didn't override that. Thx.
– Chuck
Jan 2 at 14:04
Oh man, yes I had to rename a class, because the old class I put in had an display: block attribute and bootstrap didn't override that. Thx.
– Chuck
Jan 2 at 14:04
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53996581%2fbootstap-carousel-is-being-overridden-by-custom-css-and-shows-all-images%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
