/    Sign up×
Community /Pin to ProfileBookmark

How do we make cards appear lined up, auto centered and bootstrapped?

Copy linkTweet thisAlerts:
Jun 01.2017

Hello.

How do we make cards appear lined up, auto centered and bootstrapped?

Here is one card, I would like to have nine of them.

[url]https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_cards_depth[/url]

Could you, please, post a code for this quest?

Thank you

to post a comment
HTML

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@jedaisoulJun 02.2017 — Hi and welcome to the site. This is a CSS problem, not HTML, except for the reference to bootstrap, which is a JavaScript framework. And we don't write your code for you anyway. Have a go at writing the code yourself, and we may be able to help you fix any issues that arise...
Copy linkTweet thisAlerts:
@JMRKERJun 03.2017 — What OP is asking for is almost too easy.

Mostly copy and paste.

I changed the display to be "responsive", but is easy to make 9 linear card displays.
<i>
</i>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;title&gt;W3.CSS&lt;/title&gt;
&lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;

&lt;link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"&gt;
&lt;!-- Modified from: https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_cards_depth --&gt;
&lt;style type="text/css"&gt;
/* .cardwidth { width: 30%; } /* not needed with flex-item*/

.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
.flex-item {
list-style: none;
width: 325px;
min-height: 150px;
margin: 1em;
}
&lt;/style&gt;

&lt;body&gt;

&lt;h2&gt;Card Content&lt;/h2&gt;
&lt;p&gt;Add containers inside the card to create different sections:&lt;/p&gt;

&lt;div class="w3-container flex-container"&gt;

&lt;div class="w3-card-4 cardwidth flex-item"&gt;
&lt;header class="w3-container w3-blue"&gt;
&lt;h1&gt;Header 1&lt;/h1&gt;
&lt;/header&gt;

<i> </i>&lt;div class="w3-container"&gt;
<i> </i> &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.&lt;/p&gt;
<i> </i>&lt;/div&gt;

<i> </i>&lt;footer class="w3-container w3-blue"&gt;
<i> </i> &lt;h5&gt;Footer&lt;/h5&gt;
<i> </i>&lt;/footer&gt;
&lt;/div&gt;

&lt;div class="w3-card-4 cardwidth flex-item"&gt;
&lt;header class="w3-container w3-blue"&gt;
&lt;h1&gt;Header 2&lt;/h1&gt;
&lt;/header&gt;

<i> </i>&lt;div class="w3-container"&gt;
<i> </i> &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.&lt;/p&gt;
<i> </i>&lt;/div&gt;

<i> </i>&lt;footer class="w3-container w3-blue"&gt;
<i> </i> &lt;h5&gt;Footer&lt;/h5&gt;
<i> </i>&lt;/footer&gt;
&lt;/div&gt;

&lt;div class="w3-card-4 cardwidth flex-item"&gt;
&lt;header class="w3-container w3-blue"&gt;
&lt;h1&gt;Header 3&lt;/h1&gt;
&lt;/header&gt;

<i> </i>&lt;div class="w3-container"&gt;
<i> </i> &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.&lt;/p&gt;
<i> </i>&lt;/div&gt;

<i> </i>&lt;footer class="w3-container w3-blue"&gt;
<i> </i> &lt;h5&gt;Footer&lt;/h5&gt;
<i> </i>&lt;/footer&gt;
&lt;/div&gt;

&lt;div class="w3-card-4 cardwidth flex-item"&gt;
&lt;header class="w3-container w3-blue"&gt;
&lt;h1&gt;Header 4&lt;/h1&gt;
&lt;/header&gt;

<i> </i>&lt;div class="w3-container"&gt;
<i> </i> &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.&lt;/p&gt;
<i> </i>&lt;/div&gt;

<i> </i>&lt;footer class="w3-container w3-blue"&gt;
<i> </i> &lt;h5&gt;Footer&lt;/h5&gt;
<i> </i>&lt;/footer&gt;
&lt;/div&gt;


&lt;/div&gt;

&lt;/body&gt;
&lt;/html&gt;
Copy linkTweet thisAlerts:
@chattyfishauthorJun 04.2017 — JMRKER , you are awesome!

Thank you so much.

Your cards fit just fine on my webpage.

Thank you
Copy linkTweet thisAlerts:
@JMRKERJun 04.2017 — You're most welcome.

Happy to help.

Good Luck! ?
×

Success!

Help @chattyfish spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.2,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,
)...