Image does not float with bootstrap 4

Asked

Viewed 58 times

1

I’m trying to get the image to be next to the content on devices bigger than large but this does not occur:

Follows my code:

<div class="container">
        <div class="row">
            <div class="col-xs-12 col-sm-6 mt-5 float-left">

                <h2><em>COMO COMPRAR?</em></h2>
                <p>
                    Você pode escolher os bolos e doces de nossa linha fixa, que possui mais de 20 sabores e decorações.
                    Clique acima na categoria "Produtos" para conferir as delícias que oferecemos.
                    Os pedidos devem ser feitos por telefone, com pelo menos 24 horas de antecedência, dependendo da ocasião (datas especiais e feriados). 
                </p>
                <div class="col-xs-12 col-sm-12 mt-5 float-right">
                    <img class="" src="../assets/img/producaoartesanal.png" style="max-width:450px" alt="">
                </div>
            </div>

        </div>
        <div class="row">
            <div class="col-xs-12 col-sm-6 float-left">
                <h2><em>LINHA PERSONALIZADA</em></h2>
                <p>
                    Caso queira um bolo diferente ou personalizado para sua festa, entre em contato conosco com, no mínimo, uma semana de antecedência.
                    Desenhamos e montamos bolos e doces temáticos para todos os tipos de eventos, festas e feiras.Solicite orçamento.
                </p>
            </div>
            <div class="col-xs-12 col-sm-12">
                <img class="float-right" src="../assets/img/ingredientesveganos.png" style="max-width:450px" alt="">
            </div>
        </div>
css html5 twitter-bootstrap

  • Young in Bootstrap 4 there is no measure XS, type col-Xs, are sure it is the version 4 that you are using even?

  • Actually version 4 is by force of habit the col-xs-* kkk

1 answer

1


Its HTML structure was somewhat disorganized, according to the Bootstrap Grid models. I made only small adjustments and now it’s in line with what I believe is your idea. No need to use any CSS, just organizing the HTML and using the default Bootstrap classes was in the way.

What was actually done is a Grid nesting, including account in the Official Bootstrap Grid documentation https://getbootstrap.com/docs/4.0/layout/grid/#nesting

See the result, and also test in different screen sizes!

<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />

<div class="container">
	<div class="row">
		<div class="col-12 col-sm-6 mt-5">
			<div class="row">
				<div class="col-12 col-lg-6">
					<h2><em>LINHA PERSONALIZADA</em></h2>
					<p>
						Caso queira um bolo diferente ou personalizado para sua festa, entre em contato conosco com, no mínimo, uma semana de antecedência.
						Desenhamos e montamos bolos e doces temáticos para todos os tipos de eventos, festas e feiras.Solicite orçamento.
					</p>
				</div>
				<div class="col-12 col-lg-6">
					<img class="" src="http://unsplash.it/100/100" style="max-width:450px" alt="">
				</div>
			</div>
		</div>

		<div class="col-12 col-sm-6 mt-5">
			<div class="row">
				<div class="col-12 col-lg-6">
					<h2><em>LINHA PERSONALIZADA</em></h2>
					<p>
						Caso queira um bolo diferente ou personalizado para sua festa, entre em contato conosco com, no mínimo, uma semana de antecedência.
						Desenhamos e montamos bolos e doces temáticos para todos os tipos de eventos, festas e feiras.Solicite orçamento.
					</p>
				</div>
				<div class="col-12 col-lg-6">
					<img class="" src="http://unsplash.it/100/100" style="max-width:450px" alt="">
				</div>
			</div>
		</div>
	</div>
</div>

Browser other questions tagged css html5 twitter-bootstrap

You are not signed in. Login or sign up in order to post.