How to add margin between elements in side container without pushing to next row


How to add margin between elements in side container without pushing to next row



I have 3 items which are wrapped inside a container. I have added back ground color and padding to them.



Now When I want add some margin between them , it is shifting to next row.


.div-category{
background-color: #2274A5;
padding-left: 50px;
padding-right: 50px;
padding-top: 50px;
padding-bottom: 100px;
border-radius: 3px;
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14);
color: whitesmoke;
//margin-right: 10px; Shifts line to next row.
}



JsFiddle




@import url('https://fonts.googleapis.com/css?family=Baloo+Bhaina');

/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */

body {
padding-top: 3rem;
padding-bottom: 3rem;
color: #231123;
background-color: #F4E04D;
}


/* MARKETING CONTENT
-------------------------------------------------- */

/* Center align the text within the three columns below the carousel */
.marketing .col-lg-4 {
margin-bottom: 1.5rem;
text-align: center;
}
.marketing h2 {
font-weight: 400;
}
.marketing .col-lg-4 p {
margin-right: .75rem;
margin-left: .75rem;
}



.div-category{
background-color: #2274A5;
padding-left: 50px;
padding-right: 50px;
padding-top: 50px;
padding-bottom: 100px;
border-radius: 3px;
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14);
color: whitesmoke;
}


<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>




Generic placeholder image

Text1


Paragraph1


View details »


<!-- /.col-lg-4 -->

Generic placeholder image

Text2


Paragraph2.


View details »


<!-- /.col-lg-4 -->

Generic placeholder image

Text3


Paragraph3


View details »


<!-- /.col-lg-4 -->
</div><!-- /.row -->
</div>





you want 3 divs in same row?
– charan kumar
Jul 3 at 8:50





Yes @charankumar, Need them in same row after adding margin
– Simsons
Jul 3 at 8:51





@Simsons do you want margin in right or bottom??
– לבני מלכה
Jul 3 at 8:56





I want the margin to the right..
– Simsons
Jul 3 at 8:57





Have you looked into this (Bootstrap built-in spacing) or this (adding margin to a column in Bootstrap)?
– James Whiteley
Jul 3 at 9:08





3 Answers
3



You need to change your structure a bit, here is updated fiddle




---

</div>


---

</div>


---

</div>



and little margin like


.col-lg-4 .div-category{
margin: 0 20px;
}



it should work




@import url('http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css');

/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */

body {
padding-top: 3rem;
padding-bottom: 3rem;
color: #231123;
background-color: #F4E04D;
}


/* MARKETING CONTENT
-------------------------------------------------- */

/* Center align the text within the three columns below the carousel */
.marketing .col-lg-4 {
margin-bottom: 1.5rem;
text-align: center;
}
.marketing h2 {
font-weight: 400;
}
.marketing .col-lg-4 p {
margin-right: .75rem;
margin-left: .75rem;
}



.div-category{
background-color: #2274A5;
padding-left: 50px;
padding-right: 50px;
padding-top: 50px;
padding-bottom: 100px;
border-radius: 3px;
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14);
color: whitesmoke;
}
.col-lg-4 .div-category{
margin: 0 20px;
}






Generic placeholder image

Text1


Paragraph1


View details »



</div><!-- /.col-lg-4 -->


Generic placeholder image

Text2


Paragraph2.


View details »



</div><!-- /.col-lg-4 -->


Generic placeholder image

Text3


Paragraph3


View details »



</div><!-- /.col-lg-4 -->
</div><!-- /.row -->
</div>



then add one more div inside and apply margin to that .inside-margin class






</div>

.inside-margin{ margin:0 5px; }





That still shifts it to next row. Please have a look at the jsFiddle or snipper.
– Simsons
Jul 3 at 9:00





you are viewing in medium device, you need to add extra col-md-4 and col-sm-4 along with col-lg-4, i have edited my code
– charan kumar
Jul 3 at 9:01




it is because you have utilised 12 columns of grid and then you are trying to apply margin and because entire space of screen has been utilised by 12 columns it lacks space and wraps to new row.



you can change col-lg-4 to col-lg-3 and then try to give margin.





Thats not the solution . It will squeeze the container too narrow.
– Simsons
Jul 3 at 9:01





@Simsons you can do one thing. wrap the content of each block in another div and apply padding to that div. it will add space between each block items. and also apply background color to that div only
– Umang Patel
Jul 3 at 9:07






@Simsons have a look at this fiddle jsfiddle.net/to5pzqLg and let me know if it serves your purpose.
– Umang Patel
Jul 3 at 9:17







By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

-

Popular posts from this blog

PHP contact form sending but not receiving emails

PHP contact form sending but not receiving emails I have created a contact form using PHP to send the data. The form seems to send fine as there are no errors and success message appears, however I am not receving the emails into the designated inbox. I am using PHPMailer as I originally tried just using the php 'mail' command which I now understand is a bit hit and miss. I cannot see why I would not be receving the emails so I would be very grateful for any help that could be given. I'm quite new to PHP so please be patient with me :) <?php use PHPMailerPHPMailerPHPMailer; use PHPMailerPHPMailerException; $msg = ""; if (isset($_POST['submit'])) { require 'phpmailer/src/Exception.php'; require 'phpmailer/src/PHPMailer.php'; require 'phpmailer/src/SMTP.php'; function sendemail ($to, $from, $body) { $mail = new PHPMailer(true); $mail->setFrom($from); $mail->addAddress($to); $ma...
Read more

Do graphics cards have individual ID by which single devices can be distinguished?

Do graphics cards have individual ID by which single devices can be distinguished? I have several graphics cards of the same manufacturer and same model and I want to distinguish them not only by the pcie socket they reside in but by some individual value I can read from the hardware. Is there such value and if so what would it be called and how could I access it? Right now I'm using modern nvidia cards (10xx series) and nvidia inspector.but I'd prefer if there was any value that was also applicable to amd. I have programming and scripting knowledge. I am running Windows 10 1 Answer 1 This is a powershell example to pull information from video cards. The DeviceID is supposed to be unique but only if the manufacturer supports Windows Display Driver Model (WDDM). (I copied this directly from docs.microsoft.com) $strComputer = "." $colItems = get-wmiobject -class "Win32_VideoC...
Read more

iOS Top Alignment constraint based on screen (superview) height

Image
iOS Top Alignment constraint based on screen (superview) height Let's say for example i want my view's top margin be 30 px for iPhone 6s and for the other screen i want to change this constants from 30 to X where X is proportional to total height of screen i.e. 36.5 for iPhone X, 33 for iPhone 6s plus, 25 for iPhone SE And so on .... I know i can take @IBOutlet of NSLayoutConstraint and change it programmatically but what i want is i want to set it like aspect ratio that we have for height width like subview's heigh width is proportional it's superview it changes with super view's height and width @IBOutlet NSLayoutConstraint 2 Answers 2 The constraint you need here is the superView's centerY set multiplier to 0.5 if you want the top anchor's constant to be 0.25 of screen height from the top , so adjust the multiplier according to this logic which is height_of_scre...
Read more