Help - BootStrap not splitting columns into 12 sections

Help - BootStrap not splitting columns into 12 sections

Help - BootStrap not splitting columns into 12 sections

Aim.jpg

Please see the above image - this is what I aim to create, a ‘How it works’ section of a webpage with those three icons and text underneath each one.

However, I am currently getting this:

Errpr.jpg

I am using the following code specifically to create the 12 section columns:

<div class="container">
      <div class="column">
        <div class="col-sm-4">
          <img src="https://svgshare.com/i/Ceb.svg" alt = "Coffee Machine Icon"
        </div>

        <div class="col-sm-4 text-center">
          <img src="https://svgshare.com/i/CdN.svg" alt= = "Coffee Bag"
        </div>

        <div class="col-sm-4 text-center">
          <img src="https://svgshare.com/i/Cd0.svg" alt= = "Coffee Bag"
        </div>

      </div>
      </div>
    </div>

i thought using col-sm-4 for three different divs would mean that each div takes up 4/12 of the row? But that isn’t happening here.

If all of the code for html and css is needed please let me know

Try this

<div class="container">
      <div class="row">
        <div class="col-sm-4">
          <img src="https://svgshare.com/i/Ceb.svg" alt = "Coffee Machine Icon">
        </div>

        <div class="col-sm-4">
          <img src="https://svgshare.com/i/CdN.svg" alt= = "Coffee Bag">
        </div>

        <div class="col-sm-4">
          <img src="https://svgshare.com/i/Cd0.svg" alt= = "Coffee Bag">
        </div>

      </div>
      </div>
    </div>

I’m not good in bootstrap but I think this will solve the issue

thanks this didn’t work but it’s fine I found out how to resolve it

To save another topic from being opened, can someone please advise on how to create css boxes split into three sections that each have text inside with different colors depending on the row as shown in the image below?

@NiSofwareEngineer You have an extra
</div>
tag at the bottom. Look at the syntax highlighting of you editor. It should be off a bit to let you know the syntax needs fixing. You could paste your code into an HTML validator to check for errors also.

Make a list and target the element you want to color?

Not using Bootstrap
https://codepen.io/anon/pen/rbQyRX

1 Like

I don’t have much experience with bootstrap and it’s tables, so I have a question for you to satisfy my curiosities.

Why would you use the Bootstrap functions as opposed to newer features such as CSS Grid? Are there functions that it can achieve greater than that of Grid or even Flex-box?

Thanks for any insight.

@lasjorg Many thanks exactly what I was looking for!

May I ask how can you get a ‘‘Prices’’ heading for this section? As shown in the image below:

Also, how would you get black borders on the left and right side of the page?

@adamcodes
Just using Bootstrap for the sake of practise. Bootstrap library has pre-installed classes which make things look nice.

  1. I assume the problem isn’t adding the heading element, but that if you add it inside the flexbox container it is off to the side? You can just add it outside the flexbox container.

  2. You can put everything inside a wrapper element and give it a max-width, giving the body the black background color and the wrapper the gray color.

https://codepen.io/anon/pen/gyZxMP

1 Like

Many thanks you are a life saver.


Some more questions hope you don’t mind:

1 - How to get the navbar to be transparent and the text positioned as in above image?
2 - How to position ‘‘Recycle your nespresso in style!’’ to where it is in the image as well as the text underneath it?
3 - How to position images for the google play store and apply play store to be in the image above?

These are all questions you should figure out by learning CSS, I can’t show you how to do everything. I hope you understand.

  1. Give it opacity: 0 (edit: don’t know why I would say to use opacity, you should obviously use a transparent background color, my bad) and use some form of positioning (flexbox is a good choice here).

  2. Again, use some form of positioning.

  3. They are likely inside the same container as the text above them.

It looks to me like there is a container around the elements. If you look at the left alignment of the nav logo, the text, and the buttons they all are aligned. Likely from being inside a container with some max-width set (like a Bootstrap container).

Yeah thanks I did give it a go but what I did resulted in the following:

The above is trying to add a Prices heading to that section. If it’s outside the section with class=prices, it leads to me getting a white line underneath the text as shown in the image.

I’m having a similar issue with trying to make the navbar transparent. I used background-color : transparent and I expected that to do the job but again it leaves a white line at the bottom of the nav bar.

Likely some margin making the background (body) color show, try giving the body a background color of red and see if your white lines turn red.

I would really need to see the page, can use put it on Codepen so we can see your code?

I assume this is what you are building

Yes I am nearly there. Just need to make sure I get this positioning right

https://codepen.io/nisofwareengineer/pen/YMBbvN

It looks different on codepen, when run on my local machine the navbar is transparent except for that odd white line at the bottom.

I thought the hardest part would be getting the Map API at the bottom with markers but I managed to do that. Setting up the text and logos to fit nicely inside the background image at the top is the challenge!

For the nav it is caused by the Bootstrap class .navbar-default

.navbar-default {
  background-color: #f8f8f800;
  border-color: #e7e7e7;
}

Your use of Bootstrap mixed with your own CSS actually makes it harder for me to help you.

I have to go through all the HTML and Bootstrap classes/components you are using (and see if they are used correctly). Then I need to check how the CSS you are adding yourself is affecting not only the page but Bootstrap. For example, you are using the navbar-fixed-top Bootstrap class but then you are setting some of the same properties again in the .navbar class. It is a bit of a pain to do within any reasonable time.

I can’t be bothered to try and fix the nav right now but here is something.
https://codepen.io/anon/pen/dLaxXw

The layout should really be made the best you can using Bootstrap components and classes first. I would also have gone with Bootstrap 4 instead of 3.

1 Like

Extra div at the end and instead of column class, you need ‘row’ which will align the divs in one row