remove padding from div

Report · Oct 31, 2022

Hi

I have code (Attached)

for the top object, i'd like to change the padding to 0

<!doctype html>
<html lang="en">
<head>
<title>Bootstrap 5.1.3 Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>

<body class="d-flex flex-column min-vh-100" >
<nav class="navbar navbar-expand-md bg-dark navbar-dark sticky-top" >
<table width="400" border="0" cellpadding="0" cellspacing="0" class="card-footer">
<tbody>
<tr>
<td width="97"><span class="nav-item dropdown text-light"><img src="Screen Shot 2022-10-29 at 23.43.19.png" width="68" height="64" alt=""/></span></td>
<td width="303"><div class="container-fluid">
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"><img src="Screen Shot 2022-10-29 at 23.43.19.png" width="68" height="64" alt=""/></a>
<ul class="dropdown-menu">
<li> <a class="dropdown-item" href="#link1">Link</a> </li>
<li> <a class="dropdown-item" href="#"> <img src="Screen Shot 2022-10-29 at 23.43.19.png" width="97" height="64"></a> </li>
<li> <a class="dropdown-item" href="#">A third link</a> </li>
</ul>
</li>
</ul>
</div>
</div></td>
</tr>
<tr>
<td height="59" bgcolor="#000000"> </td>
<td bgcolor="#000000"> </td>
</tr>
</tbody>
</table>
</nav>
<table width="400" height="362" border="0" cellpadding="0" cellspacing="0" class="dropdown-menu-dark">
<tbody>
<tr>
<td bgcolor="#000000"> </td>
</tr>
</tbody>
</table>
</body>
</html>

Report · Oct 31, 2022

Currently, youy have no <div> tag to remove the padding from. You appear to be using a table for layout, that's really not the way to do websites anymore. Tables are pretty unresponsive to the many, many screen sizes on the internet these days. That being said...

The best way to add new css to a page, especially one that uses Bootstrap, would be to create a second .css file. You then link to that new css file right after the bootstrap .css in the <head> of the page.

All of your custom css should go in that second file, leaving the bootstrap file untouched.

Then you just add one of the following...

div {padding:0;} (affects all div tags)
.nopadding {padding:0;} (affects only elements with class="nopadding" in them)
#nopadding {padding:0;} (affects only the element with id="nopadding" in it)

Report · Oct 31, 2022

Look, I don't understand that much, I would be very grateful if you could help me change the code,
I only know how to use tables.

Report · Oct 31, 2022

Dreamweaver really assumes that you understand the basics of html and css, and to a lesser extent javascript, to work with the program. Without those under your belt, even the most basic items are going to be a struggle to get done.

Take the time to understand those basics. Burn a day or two going through the tutorials here:

HTML: https://www.w3schools.com/html/

CSS: https://www.w3schools.com/css/

Once you understand the basics, the answer I gave will make a lot more sense (it's really a "designers choice, cut and paste" type of thing), and you'll be able to take care of other simple issues without pausing your work.

Report · Oct 31, 2022

I only know how to use tables.

============

That's the problem! You're trapped in 1990's web design. That thinking won't work in 2022.

Bootstrap doesn't need tables and neither do you. Get rid of them.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Nov 01, 2022

Look, I don't understand that much, I would be very grateful if you could help me change the code,
I only know how to use tables.

By @aviel222

<!doctype html>
<html class="h-100">

<head>
    <meta charset="UTF-8">
    <title>Bootstrap 5.1.3 Example</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous" />
    <link rel="stylesheet" href="css/style.css" />
</head>

<body class="h-100 d-flex flex-column">
    <header class="bg-dark">
        <div class="container">
            <div class="row">
                <div class="col">
                    <nav class="navbar navbar-expand-lg bg-dark navbar-dark">
                        <a class="navbar-brand ms-auto" href="#">Navbar</a>
                        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar1_collapse" aria-controls="navbar1_collapse" aria-expanded="false" aria-label="Toggle navigation">
                            <span class="navbar-toggler-icon"></span>
                        </button>
                        <div class="collapse navbar-collapse" id="navbar1_collapse">
                            <div class="navbar-nav">
                                <a class="nav-item nav-link active" href="#"><i class="fas fa-home"></i>&nbsp;Home</a>
                                <a class="nav-item nav-link" href="#"><i class="fas fa-user-graduate"></i>&nbsp;About</a>
                                <a class="nav-item nav-link" href="#"><i class="fas fa-address-card"></i>&nbsp;Contact</a>
                            </div>
                        </div>
                    </nav>
                </div>
            </div>
        </div>
    </header>
    <main class="flex-grow-1">
        <div class="container">
            <div class="row">
                <div class="col">
                    <h1>Welcome to my Site</h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                </div>
            </div>
        </div>
    </main>
    <footer class="bg-dark">
        <div class="container">
            <div class="row">
                <div class="col">
                    <p class="text-secondary text-center small mb-0 p-1">&copy; Copyright 2022. All Rights Reserved.</p>
                </div>
            </div>
        </div>
    </footer>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>

</html>

Wappler, the only real Dreamweaver alternative.

Report · Nov 02, 2022

Hey BenPleysier
Thank you for sending me, but I have a few comments, I would appreciate it if you could help me:
1. The top menu should always remain at the top even if you scroll down.
2. I wanted there to be only one button at the top, and when you click on it, a pop up menu will open.
3. The top menu will be light black, and everything else will be dark black.

Report · Nov 02, 2022

NAVBAR:

1. Add sticky-top.

2. Change expand-lg to expand-xxl.

3. Change bg-dark to bg-secondary.

CODE:

<nav class="navbar sticky-top navbar-expand-xxl navbar-dark bg-secondary">

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Nov 02, 2022

Only the color has changed.

Report · Nov 02, 2022

Hi, now I see that the screen needs to be reduced so that they can see the menu.

Report · Nov 02, 2022

Try this:

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Nov 02, 2022

Hey, maybe I'll show you exactly what I need, and you can help me (even for a nominal fee?)

Report · Nov 02, 2022

If you agree, please give me your email and I will send you explanations tomorrow. and give me a price

Report · Nov 02, 2022

I have other projects I'm working on right now.

1. Play with the code we gave you.

2. Consult the Bootstrap documentation.

https://getbootstrap.com/docs/5.1/customize/color/

3. Find a Bootswatch Theme you like. There are 26 FREE Themes to choose from.

https://bootswatch.com/

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Nov 02, 2022

Do you know someone good that can do it for me for a low price?

Report · Nov 02, 2022

Adobe Talent/Behance:

https://www.behance.net/joblist

Fiverr:

https://www.fiverr.com/search/gigs?query=Website%20bootstrap&source=main_banner&search_in=everywhere...

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Nov 02, 2022

Have a look at this playlist.

https://www.youtube.com/watch?v=g5hrTPcGOSg&list=PLUjqTJN3byC-4U6FX9_b-x46pdtffuyG-&index=1

Note that the video is based on an ancient version of Wappler using a previous version of Bootstrap. The latest versions have better features but it will give you an idea of how easy it is to create the site yourself.

Wappler, the only real Dreamweaver alternative.

Adobe Community

remove padding from div