Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Column use fill width even if it has col-6 class #241

Open
danielriosb opened this issue Sep 21, 2023 · 2 comments
Open

Column use fill width even if it has col-6 class #241

danielriosb opened this issue Sep 21, 2023 · 2 comments

Comments

@danielriosb
Copy link

danielriosb commented Sep 21, 2023 •
edited

What version of Bootstrap Email are you using?

1.4.0

How are you compiling?

Online Editor

Code example

<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style>
        .bg-green {
            background-color: #009845;
        }
    </style>
</head>

<body class="bg-light">
    <div class="container">
        <div class="card my-10">
            <div class="card-body border-bottom bg-green">
                <h3 class="card-title text-center text-white my-10">Product Updates</h3>
            </div>
            <div class="card-body">
                <div class="space-y-3">
                    <p class="text-gray-700">Lorem ipsum dolor sit amet consectetur adipisicing elit.
                    </p>
                    <div class="row pb-5">
                        <div class="col-6">
                            <div class="card">
                                <div class="card-body">
                                    <strong>Title</strong>
                                    <p>Description</p>
                                </div>
                                <div class="card-footer border-top bg-green text-white">
                                    <div class="row">
                                        <div class="col-6">
                                            <small class="py-2 px-5 text-left">Text</small>
                                        </div>
                                        <div class="col-6">
                                            <small class="py-2 px-5 text-right">Aug 2023</small>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="card">
                                <div class="card-body">
                                    <strong>Title</strong>
                                    <p>Description</p>
                                </div>
                                <div class="card-footer border-top bg-green text-white">
                                    <div class="row">
                                        <div class="col-6">
                                            <small class="py-2 px-5 text-left">Text</small>
                                        </div>
                                        <div class="col-6">
                                            <small class="py-2 px-5 text-right">Aug 2023</small>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row pb-5">
                        <div class="col-lg-6">
                            <div class="card">
                                <div class="card-body">
                                    <strong>Title</strong>
                                    <p>Description</p>
                                </div>
                                <div class="card-footer border-top bg-green text-white">
                                    <div class="row">
                                        <div class="col-6">
                                            <small class="py-2 px-5 text-left">Text</small>
                                        </div>
                                        <div class="col-6">
                                            <small class="py-2 px-5 text-right">Aug 2023</small>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card-body border-top">
                <small class="text-gray-700">
                    Text
                </small>
            </div>
        </div>
    </div>
</body>

</html>

Describe your issue

As you can see in the example code, the second row has a column 6 that is using the full width instead of just half of it.
Would you be able to make this work?
Thank you so much in advance.
@stuyam
Copy link
Member

stuyam commented Oct 8, 2023

I just tested the code above in the online editor and it looked as I would expect, what email client are you seeing the issues in?
image

@danielriosb
Copy link
Author

If I set one column to use col-6, shouldn't it use half of the container? Maybe I am wrong.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@stuyam @danielriosb