Jump to content
Please Use CODE Tags

Please, help me fix my bootstrap

suha04
By suha04
in Programming
 Share
Posted

Hi mates!

 

After the last topic, I started searching the web on how to use bootstrap, but no matter how hard I try at my button-row, the responsivity doesn't work the way I'd like it. It's just a few lines of coding, but I'd be very grateful if someone'd help me fix it.

 

Thanks!

 

 

 

Link to comment
https://linustechtips.com/topic/1337635-please-help-me-fix-my-bootstrap/
Share on other sites
Link to post
Share on other sites
Posted

Just say no to RAR.

CPU: AMD Ryzen 9 9950X3D · Cooler: Noctua NH-D15S Chromax.black · Motherboard: Gigabyte Auros X670 Elite AX · RAM: G.Skill Flare X5 64GB (2 x 32GB) DDR5 6000MHz CL30 · Graphics Card: Zotac NVIDIA GeForce RTX 4070 Super Twin Edge OC 12GB · Boot Drive: 1TB XPG Gammix S70 Blade NVMe SSD · Game Drive: 2TB WD SN850X NVMe SSD · PSU: Seasonic Focus GX V3 1000W 80+ Gold · Case: Fractal Design North Mesh · Monitor: MSI Optix MAG342CQR 34” UWQHD 3440x1440 144Hz · Keyboard: EPOMAKER x Aula F99 Wireless Mechanical Keyboard · Mouse: Logitech G309 Lightspeed Wireless Gaming Mouse

Link to post
Share on other sites
Posted
  • Author
20 minutes ago, Chris Pratt said:

Just say no to RAR.

Okay then, here's the code:

 

html:

 

<!DOCTYPE html>

<head>

    <title>Website</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=yes>

    <link rel="stylesheet" href="bootstrap.min.css">

    <link rel="stylesheet" href="website.css">

</head>

<body>

    <div class="container">

        <div class="row">            

            <div class="col-1"><a href="placeholder1.html" class="left" class="text" role="button" id="placeholder1">Button1</a></div>

            <div class="col-1"><a href="placeholder2.html" class="others" class="text" role="button" id="placeholder2">Button2</a></div>

            <div class="col-1"><a href="placeholder3.html" class="others" class="text" role="button" id="placeholder3">Button3</a></div>

            <div class="col-1"><a href="placeholder4.html" class="others" class="text" role="button" id="placeholder4">Button4</a></div>

            <div class="col-1"><a href="placeholder5.html" class="others" class="text" role="button" id="placeholder5">Button5</a></div>

            <div class="col-1"><a href="placeholder6.html" class="right" class="text" role="button" id="placeholder6">Button6</a></div>

            <img class="col-1" src="Logo.png">           

        </div>  

    </div>

</body>

 

css:

 

.others

{

display: block;

position: Fixed;

border: 3px solid rgb(184, 8, 90);

background-color: black;

color: white;

font-size: 200%;

font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;

height: 55px;

width:250px;

text-align: center;

}

 

.text

{

    font-size: 30px;

    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;

}

 

.left

{

display: block;

position: Fixed;

border-radius: 100px 0px 0px 100px;

color: white;

font-size: 200%;

font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;

background-color: black;

border: 3px solid rgb(184, 8, 90);

height: 55px;

width:250px;

text-align: center;

}

 

.right

{

display: block;

position: Fixed;

border-radius: 0px 100px 100px 0px;

color: white;

font-size: 200%;

font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;

background-color: black;

border: 3px solid rgb(184, 8, 90);

height: 55px;

width:250px;

text-align: center;

}

 

#placeholder3

{

    left: 500px;

    

}

 

#placeholder2

{

    left: 250px;

}

 

#placeholder1

{

    left: 0px;

}

 

#placeholder4

{

    right: 500px;

    

}

 

#placeholder5

{

    right: 250px;

}

 

#placeholder6

{

    right: 0px;

}

 

img

{

    display: block;

    background-color: black;

    margin: auto;

    width: 400px;

    height: auto;

    

    border: 3px solid rgb(184, 8, 90);

}

 

 

And the logo picture is attached.

 

Logo.png

bootstrap.min.js jquery-3.5.1.min.js bootstrap.min.css

Link to post
Share on other sites
  • 2 weeks later...
Posted

@suha04 

 

Not exactly sure what you are trying to achieve, but I took your code snippets and edited the code. Most of the issues with the responsivity came from your `.left` and `.right` class being fixed, in which I removed.

 

With my example, you can take and copy it into a codepen in which you will see the buttons wrap as the page shrinks with the help of good ole CSS flex. The bootstrap class you placed `.col-1` has a max width of 8.3% which is definitely not going to fit the text. 

 

I hope this helps give you an idea of what needed to be tweaked, for the buttons to be wrapped properly.

  

<div class="container">

    <a href="placeholder1.html" class="others" class="text" role="button" id="placeholder1">Button1</a>

    <a href="placeholder2.html" class="others" class="text" role="button" id="placeholder2">Button2</a>

    <a href="placeholder3.html" class="others" class="text" role="button" id="placeholder3">Button3</a>

    <a href="placeholder4.html" class="others" class="text" role="button" id="placeholder4">Button4</a>

    <a href="placeholder5.html" class="others" class="text" role="button" id="placeholder5">Button5</a>

    <a href="placeholder6.html" class="others" class="text" role="button" id="placeholder6">Button6</a>
</div>

  

.container {
  position: relative;
  display: flex;
  flex-flow: wrap row;
  align-items: center;
  justify-content: center;
  margin: auto;
}

.others {
  display: block;
  flex-shrink: 0;
  border: 3px solid rgb(184, 8, 90);

  background-color: black;

  color: white;

  font-size: 200%;

  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;

  height: 55px;

  width: 250px;

  text-align: center;
}

.others:first-of-type {
  border-radius: 100px 0px 0px 100px;
}

.others:last-of-type {
  border-radius: 0 100px 100px 0;
}

.text {
  font-size: 30px;

  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
}

 

Link to post
Share on other sites
Posted
  • Author
On 5/26/2021 at 6:01 PM, scrottiemcwebdev said:

@suha04 

 

Not exactly sure what you are trying to achieve, but I took your code snippets and edited the code. Most of the issues with the responsivity came from your `.left` and `.right` class being fixed, in which I removed.

 

With my example, you can take and copy it into a codepen in which you will see the buttons wrap as the page shrinks with the help of good ole CSS flex. The bootstrap class you placed `.col-1` has a max width of 8.3% which is definitely not going to fit the text. 

 

I hope this helps give you an idea of what needed to be tweaked, for the buttons to be wrapped properly.

  


<div class="container">

    <a href="placeholder1.html" class="others" class="text" role="button" id="placeholder1">Button1</a>

    <a href="placeholder2.html" class="others" class="text" role="button" id="placeholder2">Button2</a>

    <a href="placeholder3.html" class="others" class="text" role="button" id="placeholder3">Button3</a>

    <a href="placeholder4.html" class="others" class="text" role="button" id="placeholder4">Button4</a>

    <a href="placeholder5.html" class="others" class="text" role="button" id="placeholder5">Button5</a>

    <a href="placeholder6.html" class="others" class="text" role="button" id="placeholder6">Button6</a>
</div>

  


.container {
  position: relative;
  display: flex;
  flex-flow: wrap row;
  align-items: center;
  justify-content: center;
  margin: auto;
}

.others {
  display: block;
  flex-shrink: 0;
  border: 3px solid rgb(184, 8, 90);

  background-color: black;

  color: white;

  font-size: 200%;

  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;

  height: 55px;

  width: 250px;

  text-align: center;
}

.others:first-of-type {
  border-radius: 100px 0px 0px 100px;
}

.others:last-of-type {
  border-radius: 0 100px 100px 0;
}

.text {
  font-size: 30px;

  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
}

 

Hi mate!

 

Sorry for the late reply, I had a breakdown moment a few days after my post, and since then I forgot I even asked it. However, this was exactly the problem I needed to fix, so thank you for pointing it out for me 😛

 

Cheers!

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing Programming

×