trouble with bootstrap 4 and media queryMedia Queries: How to target desktop, tablet and mobile?@media media query and ASP.NET MVC razor syntax clashWhat is the difference between “screen” and “only screen” in media queries?CSS media queries: max-width OR max-heightCan media queries resize based on a div element instead of the screen?Twitter Bootstrap 3: how to use media queries?Change navbar color in Twitter Bootstrap$(window).width() not the same as media queryBootstrap 3 breakpoints and media queriesWhat is the difference among col-lg-*, col-md-* and col-sm-* in Bootstrap?
What should I use for Mishna study?
Identify a stage play about a VR experience in which participants are encouraged to simulate performing horrific activities
Should my PhD thesis be submitted under my legal name?
What does the "3am" section means in manpages?
For airliners, what prevents wing strikes on landing in bad weather?
Can a malicious addon access internet history and such in chrome/firefox?
Is it okay / does it make sense for another player to join a running game of Munchkin?
Is there an Impartial Brexit Deal comparison site?
Invariance of results when scaling explanatory variables in logistic regression, is there a proof?
A social experiment. What is the worst that can happen?
Can the electrostatic force be infinite in magnitude?
word describing multiple paths to the same abstract outcome
What is the opposite of 'gravitas'?
Is it possible to build a CPA Secure encryption scheme which remains secure even when the encryption of secret key is given?
Latex for-and in equation
I'm in charge of equipment buying but no one's ever happy with what I choose. How to fix this?
Who must act to prevent Brexit on March 29th?
My boss asked me to take a one-day class, then signs it up as a day off
Are taller landing gear bad for aircraft, particulary large airliners?
Can a controlled ghast be a leader of a pack of ghouls?
Did US corporations pay demonstrators in the German demonstrations against article 13?
Partial sums of primes
Have I saved too much for retirement so far?
Why are on-board computers allowed to change controls without notifying the pilots?
trouble with bootstrap 4 and media query
Media Queries: How to target desktop, tablet and mobile?@media media query and ASP.NET MVC razor syntax clashWhat is the difference between “screen” and “only screen” in media queries?CSS media queries: max-width OR max-heightCan media queries resize based on a div element instead of the screen?Twitter Bootstrap 3: how to use media queries?Change navbar color in Twitter Bootstrap$(window).width() not the same as media queryBootstrap 3 breakpoints and media queriesWhat is the difference among col-lg-*, col-md-* and col-sm-* in Bootstrap?
0
this is my code for one of the sections of my website.
<div id="pricing" class="pricing container gap-double">
<!--Row-->
<div class="row">
<div class="col-sm-4">
<div class="block-member">
<h6 class="mb-0 h6 light">sculpt your dream body</h6>
<h3 class="italic">12 week package</h3>
<div class="block-price">
<span class="dollar italic coloured">£</span>
<span class="price colored bold">100</span>
<span class="terms italic colored ">per month</span>
</div>
<h6 class="h6">become a member</h6>
<a href="#" class="but round lg text-center">buy package now</a>
</div>
</div>
<div class="col-sm-4">
<div class="block-feature">
<div class="block-body">
<h4 class=" mb-0 text-center">meal plan</h4>
<p class="text-center">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
<div class="block-feature">
<div class="block-body">
<h4 class=" mb-0">meal plan</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
<div class="block-feature">
<div class="block-body">
<h4 class=" mb-0">meal plan</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="block-feature">
<div class="block-body">
<h4 class=" mb-0">meal plan</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
<div class="block-feature">
<div class="block-body">
<h4 class=" mb-0">meal plan</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
<div class="block-feature">
<div class="block-body">
<h4 class=" mb-0">meal plan</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
</div>
</div>
</div>
<!--End container-->
this code is to break my website in three rows of pricing offers. however, when it is full screen it is perfect. (see the pic below)
but when it is on mobile screen mode, I cannot seem to move my blocks to the center of the screen. (see pic below)
what am i doing wrong here?
CSS
/* Pricing section*/
.block-price
margin-bottom: 2em;
font-family: 'Roboto Condensed', "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
.block-price span.price
font-size: 140px;
line-height: 140px;
.block-price span.dollar
font-size: 20px;
position: relative;
bottom: 4.2em;
font-weight: 300;
left: 0.5em;
.block-price span.terms
bottom: .5em;
display: block;
font-size: 18px;
position: relative;
font-weight: 300;
.block-feature,
.block-faq
margin-bottom: 3em;
overflow: hidden;
.pricing .col-md-8 .col-sm-6:last-child .block-feature,
.pricing .col-md-8 .col-sm-6:nth-last-child(2n) .block-feature,
.faq .row:last-child .col-sm-5 .block-faq,
.faq .row .col-sm-5:nth-last-child(2n) .block-faq
margin-bottom: 0
.icon
font-size: 38px;
.block-feature .block-body
float: left;
width: 50%;
text-align: center;
.block-feature .block-body p,
.block-faq p
margin-bottom: 0;
/* End pricing section*/
bootstrap-4 media-queries
asked Mar 8 at 8:03
RossRoss
166
add a comment |
0
this is my code for one of the sections of my website.
<div id="pricing" class="pricing container gap-double">
<!--Row-->
<div class="row">
<div class="col-sm-4">
<div class="block-member">
<h6 class="mb-0 h6 light">sculpt your dream body</h6>
<h3 class="italic">12 week package</h3>
<div class="block-price">
<span class="dollar italic coloured">£</span>
<span class="price colored bold">100</span>
<span class="terms italic colored ">per month</span>
</div>
<h6 class="h6">become a member</h6>
<a href="#" class="but round lg text-center">buy package now</a>
</div>
</div>
<div class="col-sm-4">
<div class="block-feature">
<div class="block-body">
<h4 class=" mb-0 text-center">meal plan</h4>
<p class="text-center">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
<div class="block-feature">
<div class="block-body">
<h4 class=" mb-0">meal plan</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
<div class="block-feature">
<div class="block-body">
<h4 class=" mb-0">meal plan</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="block-feature">
<div class="block-body">
<h4 class=" mb-0">meal plan</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
<div class="block-feature">
<div class="block-body">
<h4 class=" mb-0">meal plan</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
<div class="block-feature">
<div class="block-body">
<h4 class=" mb-0">meal plan</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
</div>
</div>
</div>
<!--End container-->
this code is to break my website in three rows of pricing offers. however, when it is full screen it is perfect. (see the pic below)
but when it is on mobile screen mode, I cannot seem to move my blocks to the center of the screen. (see pic below)
what am i doing wrong here?
CSS
/* Pricing section*/
.block-price
margin-bottom: 2em;
font-family: 'Roboto Condensed', "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
.block-price span.price
font-size: 140px;
line-height: 140px;
.block-price span.dollar
font-size: 20px;
position: relative;
bottom: 4.2em;
font-weight: 300;
left: 0.5em;
.block-price span.terms
bottom: .5em;
display: block;
font-size: 18px;
position: relative;
font-weight: 300;
.block-feature,
.block-faq
margin-bottom: 3em;
overflow: hidden;
.pricing .col-md-8 .col-sm-6:last-child .block-feature,
.pricing .col-md-8 .col-sm-6:nth-last-child(2n) .block-feature,
.faq .row:last-child .col-sm-5 .block-faq,
.faq .row .col-sm-5:nth-last-child(2n) .block-faq
margin-bottom: 0
.icon
font-size: 38px;
.block-feature .block-body
float: left;
width: 50%;
text-align: center;
.block-feature .block-body p,
.block-faq p
margin-bottom: 0;
/* End pricing section*/
bootstrap-4 media-queries
asked Mar 8 at 8:03
RossRoss
166
Did you try to add align="center" to your column ? <div class="col-sm-4" align="center"> or tried to use bootstrap3 class <div class="col-sm-4 text-center"> ?
– Andrew21111
Mar 8 at 8:26
Could you provide a snippet code with you HTML/CSS ?
– bep42
Mar 8 at 9:14
have added the CSS code
– Ross
Mar 8 at 9:24
add a comment |
0
0
0
this is my code for one of the sections of my website.
<div id="pricing" class="pricing container gap-double">
<!--Row-->
<div class="row">
<div class="col-sm-4">
<div class="block-member">
<h6 class="mb-0 h6 light">sculpt your dream body</h6>
<h3 class="italic">12 week package</h3>
<div class="block-price">
<span class="dollar italic coloured">£</span>
<span class="price colored bold">100</span>
<span class="terms italic colored ">per month</span>
</div>
<h6 class="h6">become a member</h6>
<a href="#" class="but round lg text-center">buy package now</a>
</div>
</div>
<div class="col-sm-4">
<div class="block-feature">
<div class="block-body">
<h4 class=" mb-0 text-center">meal plan</h4>
<p class="text-center">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
<div class="block-feature">
<div class="block-body">
<h4 class=" mb-0">meal plan</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
<div class="block-feature">
<div class="block-body">
<h4 class=" mb-0">meal plan</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="block-feature">
<div class="block-body">
<h4 class=" mb-0">meal plan</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
<div class="block-feature">
<div class="block-body">
<h4 class=" mb-0">meal plan</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
<div class="block-feature">
<div class="block-body">
<h4 class=" mb-0">meal plan</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
</div>
</div>
</div>
<!--End container-->
this code is to break my website in three rows of pricing offers. however, when it is full screen it is perfect. (see the pic below)
but when it is on mobile screen mode, I cannot seem to move my blocks to the center of the screen. (see pic below)
what am i doing wrong here?
CSS
/* Pricing section*/
.block-price
margin-bottom: 2em;
font-family: 'Roboto Condensed', "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
.block-price span.price
font-size: 140px;
line-height: 140px;
.block-price span.dollar
font-size: 20px;
position: relative;
bottom: 4.2em;
font-weight: 300;
left: 0.5em;
.block-price span.terms
bottom: .5em;
display: block;
font-size: 18px;
position: relative;
font-weight: 300;
.block-feature,
.block-faq
margin-bottom: 3em;
overflow: hidden;
.pricing .col-md-8 .col-sm-6:last-child .block-feature,
.pricing .col-md-8 .col-sm-6:nth-last-child(2n) .block-feature,
.faq .row:last-child .col-sm-5 .block-faq,
.faq .row .col-sm-5:nth-last-child(2n) .block-faq
margin-bottom: 0
.icon
font-size: 38px;
.block-feature .block-body
float: left;
width: 50%;
text-align: center;
.block-feature .block-body p,
.block-faq p
margin-bottom: 0;
/* End pricing section*/
bootstrap-4 media-queries
asked Mar 8 at 8:03
RossRoss
166
this is my code for one of the sections of my website.
<div id="pricing" class="pricing container gap-double">
<!--Row-->
<div class="row">
<div class="col-sm-4">
<div class="block-member">
<h6 class="mb-0 h6 light">sculpt your dream body</h6>
<h3 class="italic">12 week package</h3>
<div class="block-price">
<span class="dollar italic coloured">£</span>
<span class="price colored bold">100</span>
<span class="terms italic colored ">per month</span>
</div>
<h6 class="h6">become a member</h6>
<a href="#" class="but round lg text-center">buy package now</a>
</div>
</div>
<div class="col-sm-4">
<div class="block-feature">
<div class="block-body">
<h4 class=" mb-0 text-center">meal plan</h4>
<p class="text-center">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
<div class="block-feature">
<div class="block-body">
<h4 class=" mb-0">meal plan</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
<div class="block-feature">
<div class="block-body">
<h4 class=" mb-0">meal plan</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="block-feature">
<div class="block-body">
<h4 class=" mb-0">meal plan</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
<div class="block-feature">
<div class="block-body">
<h4 class=" mb-0">meal plan</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
<div class="block-feature">
<div class="block-body">
<h4 class=" mb-0">meal plan</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
</div>
</div>
</div>
<!--End container-->
this code is to break my website in three rows of pricing offers. however, when it is full screen it is perfect. (see the pic below)
but when it is on mobile screen mode, I cannot seem to move my blocks to the center of the screen. (see pic below)
what am i doing wrong here?
CSS
/* Pricing section*/
.block-price
margin-bottom: 2em;
font-family: 'Roboto Condensed', "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
.block-price span.price
font-size: 140px;
line-height: 140px;
.block-price span.dollar
font-size: 20px;
position: relative;
bottom: 4.2em;
font-weight: 300;
left: 0.5em;
.block-price span.terms
bottom: .5em;
display: block;
font-size: 18px;
position: relative;
font-weight: 300;
.block-feature,
.block-faq
margin-bottom: 3em;
overflow: hidden;
.pricing .col-md-8 .col-sm-6:last-child .block-feature,
.pricing .col-md-8 .col-sm-6:nth-last-child(2n) .block-feature,
.faq .row:last-child .col-sm-5 .block-faq,
.faq .row .col-sm-5:nth-last-child(2n) .block-faq
margin-bottom: 0
.icon
font-size: 38px;
.block-feature .block-body
float: left;
width: 50%;
text-align: center;
.block-feature .block-body p,
.block-faq p
margin-bottom: 0;
/* End pricing section*/
bootstrap-4 media-queries
bootstrap-4 media-queries
asked Mar 8 at 8:03
RossRoss
166
asked Mar 8 at 8:03
RossRoss
166
edited Mar 8 at 9:23
Ross
asked Mar 8 at 8:03
RossRoss
166
asked Mar 8 at 8:03
RossRoss
166
asked Mar 8 at 8:03
RossRoss
166
166
Did you try to add align="center" to your column ? <div class="col-sm-4" align="center"> or tried to use bootstrap3 class <div class="col-sm-4 text-center"> ?
– Andrew21111
Mar 8 at 8:26
Could you provide a snippet code with you HTML/CSS ?
– bep42
Mar 8 at 9:14
have added the CSS code
– Ross
Mar 8 at 9:24
add a comment |
Did you try to add align="center" to your column ? <div class="col-sm-4" align="center"> or tried to use bootstrap3 class <div class="col-sm-4 text-center"> ?
– Andrew21111
Mar 8 at 8:26
Could you provide a snippet code with you HTML/CSS ?
– bep42
Mar 8 at 9:14
have added the CSS code
– Ross
Mar 8 at 9:24
Did you try to add align="center" to your column ? <div class="col-sm-4" align="center"> or tried to use bootstrap3 class <div class="col-sm-4 text-center"> ?
– Andrew21111
Mar 8 at 8:26
Did you try to add align="center" to your column ? <div class="col-sm-4" align="center"> or tried to use bootstrap3 class <div class="col-sm-4 text-center"> ?
– Andrew21111
Mar 8 at 8:26
Could you provide a snippet code with you HTML/CSS ?
– bep42
Mar 8 at 9:14
Could you provide a snippet code with you HTML/CSS ?
– bep42
Mar 8 at 9:14
have added the CSS code
– Ross
Mar 8 at 9:24
have added the CSS code
– Ross
Mar 8 at 9:24
add a comment |
1 Answer
1
active
oldest
votes
0
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Hello, world!</title>
<style>
.block-price
margin-bottom: 2em;
font-family: 'Roboto Condensed', "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
.block-price span.price
font-size: 140px;
line-height: 140px;
.block-price span.dollar
font-size: 20px;
position: relative;
bottom: 4.2em;
font-weight: 300;
left: 0.5em;
.block-price span.terms
bottom: .5em;
display: block;
font-size: 18px;
position: relative;
font-weight: 300;
.block-feature,
.block-faq
margin-bottom: 3em;
overflow: hidden;
.pricing .col-md-8 .col-sm-6:last-child .block-feature,
.pricing .col-md-8 .col-sm-6:nth-last-child(2n) .block-feature,
.faq .row:last-child .col-sm-5 .block-faq,
.faq .row .col-sm-5:nth-last-child(2n) .block-faq
margin-bottom: 0
.icon
font-size: 38px;
.block-feature .block-body
float: left;
width: 50%;
text-align: center;
.block-feature .block-body p,
.block-faq p
margin-bottom: 0;
</style>
</head>
<body>
<div id="pricing" class="pricing container gap-double">
<!--Row-->
<div class="row text-center">
<div class="col-sm-4">
<div class="block-member">
<h6 class="mb-0 h6 light">sculpt your dream body</h6>
<h3 class="italic">12 week package</h3>
<div class="block-price">
<span class="dollar italic coloured">£</span>
<span class="price colored bold">100</span>
<span class="terms italic colored ">per month</span>
</div>
<h6 class="h6">become a member</h6>
<a href="#" class="but round lg text-center">buy package now</a>
</div>
</div>
<div class="col-sm-4">
<div class="block-feature">
<div class="">
<h4 class=" mb-0 text-center">meal plan</h4>
<p class="text-center">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
<div class="block-feature">
<div class="">
<h4 class=" mb-0">meal plan</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
<div class="block-feature">
<div class="">
<h4 class=" mb-0">meal plan</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="block-feature">
<div class="">
<h4 class=" mb-0">meal plan</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
<div class="block-feature">
<div class="">
<h4 class=" mb-0">meal plan</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
<div class="block-feature">
<div class="">
<h4 class=" mb-0">meal plan</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
</div>
</div>
</div>
<!--End container-->
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>Add text-center bootstrap class to align your text to center div,also you need to remove or override block-body as it is setting div width to 50% hence result text to align in left side.
answered Mar 8 at 11:14
Deepak VermaDeepak Verma
449115
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55058979%2ftrouble-with-bootstrap-4-and-media-query%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Hello, world!</title>
<style>
.block-price
margin-bottom: 2em;
font-family: 'Roboto Condensed', "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
.block-price span.price
font-size: 140px;
line-height: 140px;
.block-price span.dollar
font-size: 20px;
position: relative;
bottom: 4.2em;
font-weight: 300;
left: 0.5em;
.block-price span.terms
bottom: .5em;
display: block;
font-size: 18px;
position: relative;
font-weight: 300;
.block-feature,
.block-faq
margin-bottom: 3em;
overflow: hidden;
.pricing .col-md-8 .col-sm-6:last-child .block-feature,
.pricing .col-md-8 .col-sm-6:nth-last-child(2n) .block-feature,
.faq .row:last-child .col-sm-5 .block-faq,
.faq .row .col-sm-5:nth-last-child(2n) .block-faq
margin-bottom: 0
.icon
font-size: 38px;
.block-feature .block-body
float: left;
width: 50%;
text-align: center;
.block-feature .block-body p,
.block-faq p
margin-bottom: 0;
</style>
</head>
<body>
<div id="pricing" class="pricing container gap-double">
<!--Row-->
<div class="row text-center">
<div class="col-sm-4">
<div class="block-member">
<h6 class="mb-0 h6 light">sculpt your dream body</h6>
<h3 class="italic">12 week package</h3>
<div class="block-price">
<span class="dollar italic coloured">£</span>
<span class="price colored bold">100</span>
<span class="terms italic colored ">per month</span>
</div>
<h6 class="h6">become a member</h6>
<a href="#" class="but round lg text-center">buy package now</a>
</div>
</div>
<div class="col-sm-4">
<div class="block-feature">
<div class="">
<h4 class=" mb-0 text-center">meal plan</h4>
<p class="text-center">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
<div class="block-feature">
<div class="">
<h4 class=" mb-0">meal plan</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
<div class="block-feature">
<div class="">
<h4 class=" mb-0">meal plan</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="block-feature">
<div class="">
<h4 class=" mb-0">meal plan</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
<div class="block-feature">
<div class="">
<h4 class=" mb-0">meal plan</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
<div class="block-feature">
<div class="">
<h4 class=" mb-0">meal plan</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
</div>
</div>
</div>
<!--End container-->
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>Add text-center bootstrap class to align your text to center div,also you need to remove or override block-body as it is setting div width to 50% hence result text to align in left side.
answered Mar 8 at 11:14
Deepak VermaDeepak Verma
449115
add a comment |
0
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Hello, world!</title>
<style>
.block-price
margin-bottom: 2em;
font-family: 'Roboto Condensed', "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
.block-price span.price
font-size: 140px;
line-height: 140px;
.block-price span.dollar
font-size: 20px;
position: relative;
bottom: 4.2em;
font-weight: 300;
left: 0.5em;
.block-price span.terms
bottom: .5em;
display: block;
font-size: 18px;
position: relative;
font-weight: 300;
.block-feature,
.block-faq
margin-bottom: 3em;
overflow: hidden;
.pricing .col-md-8 .col-sm-6:last-child .block-feature,
.pricing .col-md-8 .col-sm-6:nth-last-child(2n) .block-feature,
.faq .row:last-child .col-sm-5 .block-faq,
.faq .row .col-sm-5:nth-last-child(2n) .block-faq
margin-bottom: 0
.icon
font-size: 38px;
.block-feature .block-body
float: left;
width: 50%;
text-align: center;
.block-feature .block-body p,
.block-faq p
margin-bottom: 0;
</style>
</head>
<body>
<div id="pricing" class="pricing container gap-double">
<!--Row-->
<div class="row text-center">
<div class="col-sm-4">
<div class="block-member">
<h6 class="mb-0 h6 light">sculpt your dream body</h6>
<h3 class="italic">12 week package</h3>
<div class="block-price">
<span class="dollar italic coloured">£</span>
<span class="price colored bold">100</span>
<span class="terms italic colored ">per month</span>
</div>
<h6 class="h6">become a member</h6>
<a href="#" class="but round lg text-center">buy package now</a>
</div>
</div>
<div class="col-sm-4">
<div class="block-feature">
<div class="">
<h4 class=" mb-0 text-center">meal plan</h4>
<p class="text-center">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
<div class="block-feature">
<div class="">
<h4 class=" mb-0">meal plan</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
<div class="block-feature">
<div class="">
<h4 class=" mb-0">meal plan</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="block-feature">
<div class="">
<h4 class=" mb-0">meal plan</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
<div class="block-feature">
<div class="">
<h4 class=" mb-0">meal plan</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
<div class="block-feature">
<div class="">
<h4 class=" mb-0">meal plan</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
</div>
</div>
</div>
<!--End container-->
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>Add text-center bootstrap class to align your text to center div,also you need to remove or override block-body as it is setting div width to 50% hence result text to align in left side.
answered Mar 8 at 11:14
Deepak VermaDeepak Verma
449115
add a comment |
0
0
0
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Hello, world!</title>
<style>
.block-price
margin-bottom: 2em;
font-family: 'Roboto Condensed', "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
.block-price span.price
font-size: 140px;
line-height: 140px;
.block-price span.dollar
font-size: 20px;
position: relative;
bottom: 4.2em;
font-weight: 300;
left: 0.5em;
.block-price span.terms
bottom: .5em;
display: block;
font-size: 18px;
position: relative;
font-weight: 300;
.block-feature,
.block-faq
margin-bottom: 3em;
overflow: hidden;
.pricing .col-md-8 .col-sm-6:last-child .block-feature,
.pricing .col-md-8 .col-sm-6:nth-last-child(2n) .block-feature,
.faq .row:last-child .col-sm-5 .block-faq,
.faq .row .col-sm-5:nth-last-child(2n) .block-faq
margin-bottom: 0
.icon
font-size: 38px;
.block-feature .block-body
float: left;
width: 50%;
text-align: center;
.block-feature .block-body p,
.block-faq p
margin-bottom: 0;
</style>
</head>
<body>
<div id="pricing" class="pricing container gap-double">
<!--Row-->
<div class="row text-center">
<div class="col-sm-4">
<div class="block-member">
<h6 class="mb-0 h6 light">sculpt your dream body</h6>
<h3 class="italic">12 week package</h3>
<div class="block-price">
<span class="dollar italic coloured">£</span>
<span class="price colored bold">100</span>
<span class="terms italic colored ">per month</span>
</div>
<h6 class="h6">become a member</h6>
<a href="#" class="but round lg text-center">buy package now</a>
</div>
</div>
<div class="col-sm-4">
<div class="block-feature">
<div class="">
<h4 class=" mb-0 text-center">meal plan</h4>
<p class="text-center">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
<div class="block-feature">
<div class="">
<h4 class=" mb-0">meal plan</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
<div class="block-feature">
<div class="">
<h4 class=" mb-0">meal plan</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="block-feature">
<div class="">
<h4 class=" mb-0">meal plan</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
<div class="block-feature">
<div class="">
<h4 class=" mb-0">meal plan</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
<div class="block-feature">
<div class="">
<h4 class=" mb-0">meal plan</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
</div>
</div>
</div>
<!--End container-->
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>Add text-center bootstrap class to align your text to center div,also you need to remove or override block-body as it is setting div width to 50% hence result text to align in left side.
answered Mar 8 at 11:14
Deepak VermaDeepak Verma
449115
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Hello, world!</title>
<style>
.block-price
margin-bottom: 2em;
font-family: 'Roboto Condensed', "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
.block-price span.price
font-size: 140px;
line-height: 140px;
.block-price span.dollar
font-size: 20px;
position: relative;
bottom: 4.2em;
font-weight: 300;
left: 0.5em;
.block-price span.terms
bottom: .5em;
display: block;
font-size: 18px;
position: relative;
font-weight: 300;
.block-feature,
.block-faq
margin-bottom: 3em;
overflow: hidden;
.pricing .col-md-8 .col-sm-6:last-child .block-feature,
.pricing .col-md-8 .col-sm-6:nth-last-child(2n) .block-feature,
.faq .row:last-child .col-sm-5 .block-faq,
.faq .row .col-sm-5:nth-last-child(2n) .block-faq
margin-bottom: 0
.icon
font-size: 38px;
.block-feature .block-body
float: left;
width: 50%;
text-align: center;
.block-feature .block-body p,
.block-faq p
margin-bottom: 0;
</style>
</head>
<body>
<div id="pricing" class="pricing container gap-double">
<!--Row-->
<div class="row text-center">
<div class="col-sm-4">
<div class="block-member">
<h6 class="mb-0 h6 light">sculpt your dream body</h6>
<h3 class="italic">12 week package</h3>
<div class="block-price">
<span class="dollar italic coloured">£</span>
<span class="price colored bold">100</span>
<span class="terms italic colored ">per month</span>
</div>
<h6 class="h6">become a member</h6>
<a href="#" class="but round lg text-center">buy package now</a>
</div>
</div>
<div class="col-sm-4">
<div class="block-feature">
<div class="">
<h4 class=" mb-0 text-center">meal plan</h4>
<p class="text-center">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
<div class="block-feature">
<div class="">
<h4 class=" mb-0">meal plan</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
<div class="block-feature">
<div class="">
<h4 class=" mb-0">meal plan</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="block-feature">
<div class="">
<h4 class=" mb-0">meal plan</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
<div class="block-feature">
<div class="">
<h4 class=" mb-0">meal plan</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
<div class="block-feature">
<div class="">
<h4 class=" mb-0">meal plan</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
</div>
</div>
</div>
<!--End container-->
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>Add text-center bootstrap class to align your text to center div,also you need to remove or override block-body as it is setting div width to 50% hence result text to align in left side.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Hello, world!</title>
<style>
.block-price
margin-bottom: 2em;
font-family: 'Roboto Condensed', "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
.block-price span.price
font-size: 140px;
line-height: 140px;
.block-price span.dollar
font-size: 20px;
position: relative;
bottom: 4.2em;
font-weight: 300;
left: 0.5em;
.block-price span.terms
bottom: .5em;
display: block;
font-size: 18px;
position: relative;
font-weight: 300;
.block-feature,
.block-faq
margin-bottom: 3em;
overflow: hidden;
.pricing .col-md-8 .col-sm-6:last-child .block-feature,
.pricing .col-md-8 .col-sm-6:nth-last-child(2n) .block-feature,
.faq .row:last-child .col-sm-5 .block-faq,
.faq .row .col-sm-5:nth-last-child(2n) .block-faq
margin-bottom: 0
.icon
font-size: 38px;
.block-feature .block-body
float: left;
width: 50%;
text-align: center;
.block-feature .block-body p,
.block-faq p
margin-bottom: 0;
</style>
</head>
<body>
<div id="pricing" class="pricing container gap-double">
<!--Row-->
<div class="row text-center">
<div class="col-sm-4">
<div class="block-member">
<h6 class="mb-0 h6 light">sculpt your dream body</h6>
<h3 class="italic">12 week package</h3>
<div class="block-price">
<span class="dollar italic coloured">£</span>
<span class="price colored bold">100</span>
<span class="terms italic colored ">per month</span>
</div>
<h6 class="h6">become a member</h6>
<a href="#" class="but round lg text-center">buy package now</a>
</div>
</div>
<div class="col-sm-4">
<div class="block-feature">
<div class="">
<h4 class=" mb-0 text-center">meal plan</h4>
<p class="text-center">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
<div class="block-feature">
<div class="">
<h4 class=" mb-0">meal plan</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
<div class="block-feature">
<div class="">
<h4 class=" mb-0">meal plan</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="block-feature">
<div class="">
<h4 class=" mb-0">meal plan</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
<div class="block-feature">
<div class="">
<h4 class=" mb-0">meal plan</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
<div class="block-feature">
<div class="">
<h4 class=" mb-0">meal plan</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
</div>
</div>
</div>
<!--End container-->
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html><!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Hello, world!</title>
<style>
.block-price
margin-bottom: 2em;
font-family: 'Roboto Condensed', "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
.block-price span.price
font-size: 140px;
line-height: 140px;
.block-price span.dollar
font-size: 20px;
position: relative;
bottom: 4.2em;
font-weight: 300;
left: 0.5em;
.block-price span.terms
bottom: .5em;
display: block;
font-size: 18px;
position: relative;
font-weight: 300;
.block-feature,
.block-faq
margin-bottom: 3em;
overflow: hidden;
.pricing .col-md-8 .col-sm-6:last-child .block-feature,
.pricing .col-md-8 .col-sm-6:nth-last-child(2n) .block-feature,
.faq .row:last-child .col-sm-5 .block-faq,
.faq .row .col-sm-5:nth-last-child(2n) .block-faq
margin-bottom: 0
.icon
font-size: 38px;
.block-feature .block-body
float: left;
width: 50%;
text-align: center;
.block-feature .block-body p,
.block-faq p
margin-bottom: 0;
</style>
</head>
<body>
<div id="pricing" class="pricing container gap-double">
<!--Row-->
<div class="row text-center">
<div class="col-sm-4">
<div class="block-member">
<h6 class="mb-0 h6 light">sculpt your dream body</h6>
<h3 class="italic">12 week package</h3>
<div class="block-price">
<span class="dollar italic coloured">£</span>
<span class="price colored bold">100</span>
<span class="terms italic colored ">per month</span>
</div>
<h6 class="h6">become a member</h6>
<a href="#" class="but round lg text-center">buy package now</a>
</div>
</div>
<div class="col-sm-4">
<div class="block-feature">
<div class="">
<h4 class=" mb-0 text-center">meal plan</h4>
<p class="text-center">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
<div class="block-feature">
<div class="">
<h4 class=" mb-0">meal plan</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
<div class="block-feature">
<div class="">
<h4 class=" mb-0">meal plan</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="block-feature">
<div class="">
<h4 class=" mb-0">meal plan</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
<div class="block-feature">
<div class="">
<h4 class=" mb-0">meal plan</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
<div class="block-feature">
<div class="">
<h4 class=" mb-0">meal plan</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
</div>
</div>
</div>
<!--End container-->
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>answered Mar 8 at 11:14
Deepak VermaDeepak Verma
449115
answered Mar 8 at 11:14
Deepak VermaDeepak Verma
449115
answered Mar 8 at 11:14
Deepak VermaDeepak Verma
449115
answered Mar 8 at 11:14
Deepak VermaDeepak Verma
449115
449115
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55058979%2ftrouble-with-bootstrap-4-and-media-query%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Did you try to add align="center" to your column ? <div class="col-sm-4" align="center"> or tried to use bootstrap3 class <div class="col-sm-4 text-center"> ?
– Andrew21111
Mar 8 at 8:26
Could you provide a snippet code with you HTML/CSS ?
– bep42
Mar 8 at 9:14
have added the CSS code
– Ross
Mar 8 at 9:24