• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

remove padding from div

Explorer ,
Oct 31, 2022 Oct 31, 2022

Copy link to clipboard

Copied

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">

<!--latest minified Bootstrap CSS-->
<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">&nbsp;</td>
<td bgcolor="#000000">&nbsp;</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">&nbsp;</td>
</tr>
</tbody>
</table>
</body>
</html>

Views

772

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Oct 31, 2022 Oct 31, 2022

Copy link to clipboard

Copied

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)

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Oct 31, 2022 Oct 31, 2022

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Oct 31, 2022 Oct 31, 2022

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Oct 31, 2022 Oct 31, 2022

Copy link to clipboard

Copied

quote
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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Nov 01, 2022 Nov 01, 2022

Copy link to clipboard

Copied

quote
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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Nov 02, 2022 Nov 02, 2022

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Nov 02, 2022 Nov 02, 2022

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Nov 02, 2022 Nov 02, 2022

Copy link to clipboard

Copied

Only the color has changed.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Nov 02, 2022 Nov 02, 2022

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Nov 02, 2022 Nov 02, 2022

Copy link to clipboard

Copied

Try this:

 

 

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Nov 02, 2022 Nov 02, 2022

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Nov 02, 2022 Nov 02, 2022

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Nov 02, 2022 Nov 02, 2022

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Nov 02, 2022 Nov 02, 2022

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Nov 02, 2022 Nov 02, 2022

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Nov 02, 2022 Nov 02, 2022

Copy link to clipboard

Copied

LATEST

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines