Home made bootstrap navbar/boxes does unexpected things

HTML & CSS
,
1

Hi
my name is frank and I have home made bootstrap template that after modification, the boxes displaying images and text breaks the bootstrap rule. I guess it is because of image height or text ‘height’. I’ve done some investigation, I found some solutions but does are not really for bootstrap. so my first question is how can I handle that situation where height difference breaks the line of boxes in bootstrap?
ps the images are not posted , I don’t know how to do that. please help me, thank you.
software2

2

Hi,

If you are talking about the boxes snagging when the columns wrap then you need to add in the appropriate clearfix classes at the correct points in the html. You can find this in the documentation.

You would add this after every second div in that section.

 <!-- Add the extra clearfix for only the required viewport -->
  <div class="clearfix visible-sm-block"></div>

e.g.

<div class="container-fluid">
	<div class="row">
		<div class="col-md-3 col-sm-6 col-sm-push-6 col-md-push-3">
			<div class="box">
				<img src="res_9421b49745a13f23b0ff13c9a1417764.webp" alt="Operacios rendszerek" class="img-thumbnail" >
				<h2>Operacios rendszer</h2>
				<p>A piacvezeto operacios rendszer jelenleg 2021ben a Microsoft windows, 
				igy ennek elerhetosege a legfontosabb. 
				.</p>
			</div>
		</div>
		
		<div class="col-md-3 col-sm-6 col-sm-pull-6 col-md-pull-3">
			<div class="box">
				<img src="JCBQyBmDc62E8xWfF88ZGP-1200-80.jpg" alt="Irodiai alkalmazasok" class="img-thumbnail">
				<h2>Irodiai alkalmazasok</h2>
				<p>A piacvezeto it is a Microsoft, Ms Office.</p>
			</div>
		</div>
		 <!-- Add the extra clearfix for only the required viewport -->
  <div class="clearfix visible-sm-block"></div>

    <div class="col-md-3 col-sm-6">
			<div class="box">
				<img src="Halo-2-Free-Download-3.jpg" alt="Egyeb programok" class="img-thumbnail">
				<h2>Egyeb programok</h2>
				<p>Az elso szamu csoport a jatek programok, nagy nepszerusegnek orvendenek.
				.</p>
			</div>
		</div>
		
		<div class="col-md-3 col-sm-6">
			<div class="box">
				<img src="best-cad-software1.png" alt="Tervezo programok" class="img-thumbnail">
				<h2>Tervezo programok</h2>
				<p>A tervezo programmok renkivul fontosak mint az epitoipar mint a gepipar meg az elektronika teruleten.
				Lehetoseg szerint itt is boseges a valasztek
				</p>
			</div>
		</div>
</div>

If you started using Bootstrap4 then you would not have this problem as it uses flex and not old fashioned floats.

3

Hi
thank you for help. at the moment it as a home made ‘bootstrap template’, taking a course, it was given to us in the school to make our work/learning faster and more efficient.
how can I make it? I guess I have to code it can I get help?.thank you

4

I’m a bit confused as I gave the actual code to fix the wrapping problem inserted into your html.

What else do you need help with?

5

ok thank you for that but I mean clearfix and visible-sm-block classes. I guess I need to code it. that is where I need help. with bs 4 it is different as you mentioned but with home made bootstrap I think I need to my own classes to use it,thank you

6

I already coded it for you. It’s in the big block of code I posted.

Why would you need your own classes when you already have the bootstrap classes in place.

Unless you mean you’ve been tasked with creating the same layout but without bootstrap?

If so and as this is for homework then you need to make a start yourself first.

If that’s not what you meant then please clarify?

2 Likes
7

thank you for help. yes it works, thank you…
another thing is the slider stopped working, I don’t understand. can you help me please?thank you.

8

Please start a new thread for a new question, in the appropriate section of the forum.

As this issue has been resolved, I will close this thread to avoid muddying the waters.

1 Like