How to fix images overlapping bootstrapHow do JavaScript closures work?How to horizontally center a <div>?How do I check if an element is hidden in jQuery?How do I remove a property from a JavaScript object?How do I redirect to another webpage?How to disable text selection highlighting?How do I include a JavaScript file in another JavaScript file?How to check whether a string contains a substring in JavaScript?How to decide when to use Node.js?How do I remove a particular element from an array in JavaScript?
How do you glue a text to a point?
Has anyone in space seen or photographed a simple laser pointer from Earth?
How many hours would it take to watch all of Doctor Who?
What steps should I take to lawfully visit the United States as a tourist immediately after visiting on a B-1 visa?
Storming Area 51
Do I have a right to cancel a purchase of foreign currency in the UK?
Why do people keep referring to Leia as Princess Leia, even after the destruction of Alderaan?
How can I get a player to accept that they should stop trying to pull stunts without thinking them through first?
Print the last, middle and first character of your code
US Civil War story: man hanged from a bridge
Is there a way to know which symbolic expression mathematica used
Why was hardware diversification an asset for the IBM PC ecosystem?
Why weren't bootable game disks ever common on the IBM PC?
If your plane is out-of-control, why does military training instruct releasing the joystick to neutralize controls?
Managing and organizing the massively increased number of classes after switching to SOLID?
Are randomly-generated passwords starting with "a" less secure?
Do you know your 'KVZ's?
How to ask for a LinkedIn endorsement?
How to properly say "bail on somebody" in German?
Is the genetic term "polycistronic" still used in modern biology?
Are neural networks prone to catastrophic forgetting?
Constructive proof of existence of free algebras for infinitary equational theories
Credit score and financing new car
Using Newton's shell theorem to accelerate a spaceship
How to fix images overlapping bootstrap
How do JavaScript closures work?How to horizontally center a <div>?How do I check if an element is hidden in jQuery?How do I remove a property from a JavaScript object?How do I redirect to another webpage?How to disable text selection highlighting?How do I include a JavaScript file in another JavaScript file?How to check whether a string contains a substring in JavaScript?How to decide when to use Node.js?How do I remove a particular element from an array in JavaScript?
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;
I have written a node.js code to display 3 images and I am using bootstrap to style these images next to each other but the are overlapping when I use col-mid-"any number".
<% include partials/header %>
<div class="container">
<header class="jumbotron">
<div class="container">
<h1>Welcome to our locations</h1>
<p>View our Camp grounds</p>
<p>
<a class="btn btn-primary btn-large" href="/">Home</a>
<a class="btn btn-primary brn-large" href="/campgrounds/new">Add a new CampGround</a>
</p>
</div>
</header>
<div class="row text-center" style="display:flex; flex-wrap:wrap;">
<% campgrounds.forEach(function(campground) %>
<div class="col-md-3">
<div class="img-thumbnail img-fluid">
<img src="<%= campground.image %>">
<div class="caption">
<h4><%= campground.name %></h4>
</div>
</div>
</div>
<% ) %>
</div>
javascript css node.js twitter-bootstrap web-applications
edited Mar 26 at 1:35
Shiladitya
9,6399 gold badges20 silver badges31 bronze badges
asked Mar 26 at 1:30
Tarek RoukozTarek Roukoz
164 bronze badges
add a comment |
I have written a node.js code to display 3 images and I am using bootstrap to style these images next to each other but the are overlapping when I use col-mid-"any number".
<% include partials/header %>
<div class="container">
<header class="jumbotron">
<div class="container">
<h1>Welcome to our locations</h1>
<p>View our Camp grounds</p>
<p>
<a class="btn btn-primary btn-large" href="/">Home</a>
<a class="btn btn-primary brn-large" href="/campgrounds/new">Add a new CampGround</a>
</p>
</div>
</header>
<div class="row text-center" style="display:flex; flex-wrap:wrap;">
<% campgrounds.forEach(function(campground) %>
<div class="col-md-3">
<div class="img-thumbnail img-fluid">
<img src="<%= campground.image %>">
<div class="caption">
<h4><%= campground.name %></h4>
</div>
</div>
</div>
<% ) %>
</div>
javascript css node.js twitter-bootstrap web-applications
edited Mar 26 at 1:35
Shiladitya
9,6399 gold badges20 silver badges31 bronze badges
asked Mar 26 at 1:30
Tarek RoukozTarek Roukoz
164 bronze badges
Post the CSS please.
– Raymond
Mar 26 at 1:34
add a comment |
I have written a node.js code to display 3 images and I am using bootstrap to style these images next to each other but the are overlapping when I use col-mid-"any number".
<% include partials/header %>
<div class="container">
<header class="jumbotron">
<div class="container">
<h1>Welcome to our locations</h1>
<p>View our Camp grounds</p>
<p>
<a class="btn btn-primary btn-large" href="/">Home</a>
<a class="btn btn-primary brn-large" href="/campgrounds/new">Add a new CampGround</a>
</p>
</div>
</header>
<div class="row text-center" style="display:flex; flex-wrap:wrap;">
<% campgrounds.forEach(function(campground) %>
<div class="col-md-3">
<div class="img-thumbnail img-fluid">
<img src="<%= campground.image %>">
<div class="caption">
<h4><%= campground.name %></h4>
</div>
</div>
</div>
<% ) %>
</div>
javascript css node.js twitter-bootstrap web-applications
edited Mar 26 at 1:35
Shiladitya
9,6399 gold badges20 silver badges31 bronze badges
asked Mar 26 at 1:30
Tarek RoukozTarek Roukoz
164 bronze badges
I have written a node.js code to display 3 images and I am using bootstrap to style these images next to each other but the are overlapping when I use col-mid-"any number".
<% include partials/header %>
<div class="container">
<header class="jumbotron">
<div class="container">
<h1>Welcome to our locations</h1>
<p>View our Camp grounds</p>
<p>
<a class="btn btn-primary btn-large" href="/">Home</a>
<a class="btn btn-primary brn-large" href="/campgrounds/new">Add a new CampGround</a>
</p>
</div>
</header>
<div class="row text-center" style="display:flex; flex-wrap:wrap;">
<% campgrounds.forEach(function(campground) %>
<div class="col-md-3">
<div class="img-thumbnail img-fluid">
<img src="<%= campground.image %>">
<div class="caption">
<h4><%= campground.name %></h4>
</div>
</div>
</div>
<% ) %>
</div>
javascript css node.js twitter-bootstrap web-applications
javascript css node.js twitter-bootstrap web-applications
edited Mar 26 at 1:35
Shiladitya
9,6399 gold badges20 silver badges31 bronze badges
asked Mar 26 at 1:30
Tarek RoukozTarek Roukoz
164 bronze badges
edited Mar 26 at 1:35
Shiladitya
9,6399 gold badges20 silver badges31 bronze badges
asked Mar 26 at 1:30
Tarek RoukozTarek Roukoz
164 bronze badges
edited Mar 26 at 1:35
Shiladitya
9,6399 gold badges20 silver badges31 bronze badges
edited Mar 26 at 1:35
Shiladitya
9,6399 gold badges20 silver badges31 bronze badges
edited Mar 26 at 1:35
Shiladitya
9,6399 gold badges20 silver badges31 bronze badges
9,6399 gold badges20 silver badges31 bronze badges
asked Mar 26 at 1:30
Tarek RoukozTarek Roukoz
164 bronze badges
asked Mar 26 at 1:30
Tarek RoukozTarek Roukoz
164 bronze badges
asked Mar 26 at 1:30
Tarek RoukozTarek Roukoz
164 bronze badges
164 bronze badges
Post the CSS please.
– Raymond
Mar 26 at 1:34
add a comment |
Post the CSS please.
– Raymond
Mar 26 at 1:34
Post the CSS please.
– Raymond
Mar 26 at 1:34
Post the CSS please.
– Raymond
Mar 26 at 1:34
add a comment |
1 Answer
1
active
oldest
votes
Try setting the img-fluid css class on the img element itself rather than it's parent element.
<img class="img-fluid" src="<%= campground.image %>">
You were restricting the width of the image's parent element rather than the width of the image itself.
<div class="row text-center" style="display:flex; flex-wrap:wrap;">
<% campgrounds.forEach(function(campground) %>
<div class="col-md-3">
<div class="img-thumbnail">
<img class="img-fluid" src="<%= campground.image %>">
<div class="caption">
<h4><%= campground.name %></h4>
</div>
</div>
</div>
<% ) %>
</div>
Here's a CodePen as an example: https://codepen.io/anon/pen/QoPNdb
Alternatively, you could set a broad css style like this if you just want to restrict all images inside bootstrap grids to fit within their containers.
.container > .row img,
.container-fluid > .row img max-width: 100%;
answered Mar 26 at 1:55
TxRegexTxRegex
1,79014 silver badges17 bronze badges
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%2f55348627%2fhow-to-fix-images-overlapping-bootstrap%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
Try setting the img-fluid css class on the img element itself rather than it's parent element.
<img class="img-fluid" src="<%= campground.image %>">
You were restricting the width of the image's parent element rather than the width of the image itself.
<div class="row text-center" style="display:flex; flex-wrap:wrap;">
<% campgrounds.forEach(function(campground) %>
<div class="col-md-3">
<div class="img-thumbnail">
<img class="img-fluid" src="<%= campground.image %>">
<div class="caption">
<h4><%= campground.name %></h4>
</div>
</div>
</div>
<% ) %>
</div>
Here's a CodePen as an example: https://codepen.io/anon/pen/QoPNdb
Alternatively, you could set a broad css style like this if you just want to restrict all images inside bootstrap grids to fit within their containers.
.container > .row img,
.container-fluid > .row img max-width: 100%;
answered Mar 26 at 1:55
TxRegexTxRegex
1,79014 silver badges17 bronze badges
add a comment |
Try setting the img-fluid css class on the img element itself rather than it's parent element.
<img class="img-fluid" src="<%= campground.image %>">
You were restricting the width of the image's parent element rather than the width of the image itself.
<div class="row text-center" style="display:flex; flex-wrap:wrap;">
<% campgrounds.forEach(function(campground) %>
<div class="col-md-3">
<div class="img-thumbnail">
<img class="img-fluid" src="<%= campground.image %>">
<div class="caption">
<h4><%= campground.name %></h4>
</div>
</div>
</div>
<% ) %>
</div>
Here's a CodePen as an example: https://codepen.io/anon/pen/QoPNdb
Alternatively, you could set a broad css style like this if you just want to restrict all images inside bootstrap grids to fit within their containers.
.container > .row img,
.container-fluid > .row img max-width: 100%;
answered Mar 26 at 1:55
TxRegexTxRegex
1,79014 silver badges17 bronze badges
add a comment |
Try setting the img-fluid css class on the img element itself rather than it's parent element.
<img class="img-fluid" src="<%= campground.image %>">
You were restricting the width of the image's parent element rather than the width of the image itself.
<div class="row text-center" style="display:flex; flex-wrap:wrap;">
<% campgrounds.forEach(function(campground) %>
<div class="col-md-3">
<div class="img-thumbnail">
<img class="img-fluid" src="<%= campground.image %>">
<div class="caption">
<h4><%= campground.name %></h4>
</div>
</div>
</div>
<% ) %>
</div>
Here's a CodePen as an example: https://codepen.io/anon/pen/QoPNdb
Alternatively, you could set a broad css style like this if you just want to restrict all images inside bootstrap grids to fit within their containers.
.container > .row img,
.container-fluid > .row img max-width: 100%;
answered Mar 26 at 1:55
TxRegexTxRegex
1,79014 silver badges17 bronze badges
Try setting the img-fluid css class on the img element itself rather than it's parent element.
<img class="img-fluid" src="<%= campground.image %>">
You were restricting the width of the image's parent element rather than the width of the image itself.
<div class="row text-center" style="display:flex; flex-wrap:wrap;">
<% campgrounds.forEach(function(campground) %>
<div class="col-md-3">
<div class="img-thumbnail">
<img class="img-fluid" src="<%= campground.image %>">
<div class="caption">
<h4><%= campground.name %></h4>
</div>
</div>
</div>
<% ) %>
</div>
Here's a CodePen as an example: https://codepen.io/anon/pen/QoPNdb
Alternatively, you could set a broad css style like this if you just want to restrict all images inside bootstrap grids to fit within their containers.
.container > .row img,
.container-fluid > .row img max-width: 100%;
answered Mar 26 at 1:55
TxRegexTxRegex
1,79014 silver badges17 bronze badges
edited Mar 26 at 2:00
answered Mar 26 at 1:55
TxRegexTxRegex
1,79014 silver badges17 bronze badges
answered Mar 26 at 1:55
TxRegexTxRegex
1,79014 silver badges17 bronze badges
answered Mar 26 at 1:55
TxRegexTxRegex
1,79014 silver badges17 bronze badges
1,79014 silver badges17 bronze badges
add a comment |
add a comment |
Got a question that you can’t ask on public Stack Overflow? Learn more about sharing private information with Stack Overflow for Teams.
Got a question that you can’t ask on public Stack Overflow? Learn more about sharing private information with Stack Overflow for Teams.
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%2f55348627%2fhow-to-fix-images-overlapping-bootstrap%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
Post the CSS please.
– Raymond
Mar 26 at 1:34