I am facing a problem with the Bootstrap-4 grid system. There are 12 columns, and whenever I use less than 12 columns, the rows are automatically centered. I want left alignment, how can this be fixed?
A snippet of my code:
<div class="row justify-content-start con-flex">
<?php foreach($books as $book):?>
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
<div id="single-book">
<div id="book-image">
<?php print '<img src = "'.strip_tags($book->book_image).'" alt = "">';?>
<div id="addto-cart"><i class="fas fa-shopping-cart"></i> Add to cart</div>
</div>
<div class="book-text">
<div id="book-name"><?= substr(htmlentities($book->book_name),0,21) ?></div>
<div id="author">By <i><?= htmlentities($book->author) ?></i></div>
<div id="price"><?= htmlentities($book->price) ?>.TK</div>
<div id="book-details">
<?php print 'View details'; ?>
</div>
</div>
</div>
</div>
<?php endforeach;?>
</div>
image of code:
enter image description here
According to Bootstrap doc that should solve your problem
<div class="container">
<div class="row justify-content-start">
<div class="col-4">
content here...
</div>
<div class="col-4">
content here...
</div>
</div>
</div>
The code you have should be working fine, columns will be aligned left by default; maybe what you are seeing is the result of using .container instead of .container-fluid which uses the full width of the viewport. It's either this or you might have some custom CSS that's affecting the layout of the columns
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row ">
<div class="col-4 col-md-4 border">content here...</div>
<div class="col-4 col-md-4 border">content here...</div>
</div>
</div>
<div class="container-fluid">
<div class="row ">
<div class="col-4 col-md-4 border">content here...</div>
<div class="col-4 col-md-4 border">content here...</div>
</div>
</div>
This problem was for my other base CSS.
Instead of:
*{
margin: 0 auto;
}
For this margin: 0 auto; in my main style.css file My bootstrap's grids were not working properly. Now I remove this margin: 0 auto from *.
Now
I write
* {
margin: 0;
padding: 0;
}
Now my bootstrap grids are working properly
Related
I am trying to build a website with flash-cards to help learn the Hebrew alphabet. My Card partial view looks like this:
#model FlashCards.MultipleChoice.ViewModels.CardViewModel
<div class="index-card">
<div class="row">
<div class="col-md-offset-5"></div>
<div class="col-md-2 text-center">
#Model.Numeric
</div>
</div>
<div class="row">
<div class="col-md-offset-2"></div>
<div class="col-md-8 text-center card-symbol">
#Html.Raw(Model.UnicodeEscape)
</div>
</div>
<div class="row">
<div class="col-md-offset-2"></div>
<div class="col-md-8 text-center">
#Model.Name
</div>
</div>
</div>
Now the col-md-offset works on all but the first row, causing the card to render as in the below image:
Now why isn't the 1 in the image offset like the glyph and the name for the letter Aleph?
My CSS file for these cards only contains the following so far:
.index-card {
height: 150px;
}
.index-card .card-symbol {
font-size: large
}
I believe you're using the offset classes wrong; do not apply them to empty divs.
Your text is centered. Second and third rows have widths of 8 columns. It looks like the offset is working but it really isn't. The first row is only 2 columns wide. None of your offset divs are having any effect on the layout.
You need to do something like this, at the very least:
<div class="index-card">
<div class="row">
<div class="col-md-offset-5 col-md-2 text-center">
#Model.Numeric
</div>
</div>
<div class="row">
<div class="col-md-offset-2 col-md-8 text-center card-symbol">
#Html.Raw(Model.UnicodeEscape)
</div>
</div>
<div class="row">
<div class="col-md-offset-2 col-md-8 text-center">
#Model.Name
</div>
</div>
</div>
I'm using bootstrap (version 3.3.6) for the first time to make my site. Readed the docs and start to code. Excluding the <link>'s the code below is my site's structure:
<body>
<div class="container">
<div class="row">
<div class="col-sm-2 col-md-2 col-lg-2 col-lg-pull-1">
<div class="loader">
<div class="loader-bg">
...
</div>
</div>
</div>
<div class="col-sm-10 col-md-10 col-lg-10 col-lg-push-1">
<div class="black-box">
<p class="info-message">Coming <span>VERY</span> soon!</p>
<p class="text-message">Until then, my contacts:</p>
...
</div>
</div>
</div>
</div>
Using push and pull classes I thought I was removed padding for the columns. Setting the main div with 'class="container"' I have the result:
Changing to 'class="container-fluid"' the behavior remains strange. Notice shapes overlapping page:
What I want in my results is: the circle and rectangle (both are divs) remains aligned to the edges of the page (left and right) with no padding or marging. Following docs until now doesn't work. What this behavior occurs?
by default col-* have padding so you just need to reset them
[class^="col"] {
padding: 0
}
[class$="-2"] {
background: orange
}
[class$="-10"] {
background: grey
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
<div class="loader">
<div class="loader-bg">
...
</div>
</div>
</div>
<div class="col-xs-10 col-sm-10 col-md-10 col-lg-10">
<div class="black-box">
<p class="info-message">Coming <span>VERY</span> soon!</p>
<p class="text-message">Until then, my contacts:</p>
...
</div>
</div>
</div>
I have three rows in my container. I'd like to apply one background across the bottom two rows. I don't want a background on the 1st row. I want to use one background ac I know I missing something, but can't figure out in the code where to edit it. My background only shows up in the first row of columns.
I don't want to apply a class to each .row that needs the background. The point is to specify the background once and have it apply to the two bottom rows.
Here's my bootply:
http://www.bootply.com/X5WsoQbuM1
Here's my HTML:
<div class="content-section-d">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h2>How many apples can you eat?</h2>
<p>
The apple tree (Malus domestica) is a deciduous tree in the rose family best known for its sweet, pomaceous fruit, the apple. I.</p>
</div>
</div>
<h2>Join us to pick the apples:</h2>
<div class="row centered-text" id="backgroundazul">
<div class="col-md-4 col-xs-12">
<h3>4,000,000+</h3>
</div>
<div class="col-md-4 col-xs-12">
<h3>1,500,000+</h3>
</div>
<div class="col-md-4 col-xs-12">
<h3>150,000+</h3>
</div>
</div>
<div class="row">
<div class="col-md-4 col-xs-12">
<h3>68,000+</h3>
</div>
<div class="col-md-4 col-xs-12">
<h3>2,000+</h3>
</div>
<div class="col-md-4 col-xs-12">
<h3>3 years</h3>
</div>
</div>
</div>
<!-- /.container -->
Here's my CSS:
#backgroundazul {
background: url(http://www.psdgraphics.com/file/green-hexagons-background.png) no-repeat center center;
padding: 0 0 50px 0;
}
If you want the background for all row use a class and repeat row
/* CSS used here will be applied after bootstrap.css */
.backgroundazul {
background: url(http://www.psdgraphics.com/file/green-hexagons-background.png) no-repeat center center;
padding: 0 0 50px 0;
}
<div class="container">
<div class="row">
<h2>Join us to access:</h2>
</div>
<div class="row centered-text backgroundazul " >
<hr class="section-heading-spacer">
<div class="col-md-4 col-xs-12">
<h3>4,000,000+</h3>
<p>Apples</p>
</div>
<div class="col-md-4 col-xs-12">
<h3>1,500,000+</h3>
<p>Oranges</p>
</div>
<div class="col-md-4 col-xs-12">
<h3>150,000+</h3>
<p>Mangos</p>
</div>
</div>
<div class="row centered-text backgroundazul " >
<div class="col-md-4 col-xs-12">
<h3>68,000+</h3>
<p>Bananas</p>
</div>
<div class="col-md-4 col-xs-12">
<h3>2,000+</h3>
<p>Honeydew</p>
</div>
<div class="col-md-4 col-xs-12">
<h3>3 years</h3>
<p>Blueberries</p>
</div>
</div>
Apply an id to you .container element and then apply the background to the .row elements.
<div id="backgroundazul" class="container">
<div class="row">
<!-- ... -->
</div>
<div class="row">
<!-- ... -->
</div>
</div>
#backgroundazul .row {
background: url(http://www.psdgraphics.com/file/green-hexagons-background.png) no-repeat center center;
padding: 0 0 50px 0;
}
Updated Bootply. Note that you did not wrap your second row of data in a .row and will not have the background applied. I do not know if this was intentional or not.
The solution is simple - you just need to insert in your css code a single line, so the code will look like:
#backgroundazul{
background: url(http://www.psdgraphics.com/file/green-hexagons-background.png) no-repeat center center;
background-size: cover;
padding: 0 0 50px 0;
}
And that's it :-)
I want my date picker to be in the middle of the page, eg. the line where I have: <div class="center-block text-center datepicker"></div>
Obviously center-block and text-center I tried already - but neither change anything. And with the offset it just makes it close to the centre without being perfectly centre aligned.
What do I need to do?
Thanks
<div class='row'>
<div class='col-sm-12'>
<div class='page-header page-header-with-icon mg-t'> <i class='fa-icon-calendar'></i>
<h2>Calendar</h2>
</div>
<div class="row">
<div class="col-sm-4 col-sm-offset-4">
<div class="center-block text-center datepicker"></div>
</div>
</div>
</div>
</div>
Try something like this:
<div class="col-sm-12">
<div class="datepicker"></div>
</div>
Then give the date picker something like:
.datepicker {
display:inline-block;
margin:0 auto;
}
I haven't tested this, but it would be where I would start.
style="text-align:center;" shall do the trick no? I tested and for me, the "CALENDAR" text is centered
<div class="col-sm-12">
<div class="page-header page-header-with-icon mg-t" style="text-align:center;">
<i class="fa-icon-calendar"></i>
<h2>Calendar</h2>
</div>
<div class="row">
<div class="col-sm-4 col-sm-offset-4">
<div class="center-block text-center datepicker"></div>
</div>
</div>
</div>
</div>
This is what should solve your problem. Add it somewhere in your custom stylesheet and change the width % to what suits your design.
.datepicker-inline {
width: 20%;
}
I'm trying to get a simple grid-like webpage done where there are 8 DIVs spanning across 9 positions.
I've done the following for another part of the website using Bootstrap's grid system without running into any kind of issue (Not the actual content, just a mockup using Photoshop)
What I want to do is this:
Having in mind that when the site is viewed in a mobile device, the order of the elements must be more-or-less preserved. Also Bootstrap standard margins/paddings must be used
Ideally this would be fixed-height DIVs inside of which I'll put an image or some text, depending on which one. The double-height one will contain a picture
<div class="wrapper" id="mypage">
<section class="grid-container service">
<ul class="small-grid grid-col-3">
<li class="col-3">
<div id="subtitle">
SUBTITLE 1
</div>
</li>
<li class="col-3">
<div id="title">
TITLE
</div>
</li>
<li class="col-3">
<div id="subtitle">
SUBTITLE 2
</div>
</li>
<a href="">
<li class="col-3 img-dynamic-size" style="background-image: url('../1.jpg')">
</li>
</a>
<a href="">
<li class="col-3 img-dynamic-size" style="background-image: url('../2.jpg')">
</li>
</a>
Sample code of the 1st screen
Thank you, I can't figure out how to do it after thinking about it for some time...
Okay.. I think I'm following you, I've just drawn up some sample bootstrap code for you to see what I'm talking about. You can achieve this look by just stripping out relevant padding/margin and using the Bootstrap equal-height columns experiment
I have just stripped out all relevant margin and padding on the nested rows in the example but you can obviously play with these values only cancelling out or amending the vertical/horizontal margin/padding as required for your own use.
HTML
<div class="container">
<div class="row">
<div class="col-xs-4 border">
<div id="subtitle">SUBTITLE 1</div>
</div>
<div class="col-xs-4 border">
<div id="title">TITLE</div>
</div>
<div class="col-xs-4 border">
<div id="title">TITLE</div>
</div>
</div>
<div class="row row-eq-height">
<div class="col-xs-8 nopadding">
<div class="row nomargin">
<div class="col-xs-6 nomargin border">Some Content...</div>
<div class="col-xs-6 nomargin border">Some More Content...</div>
</div>
<div class="row nomargin">
<div class="col-xs-6 nomargin border">Some Content Below...</div>
<div class="col-xs-6 nomargin border">Some More Content Below...</div>
</div>
</div>
<div class="col-xs-4 border">Content matching height using the 'row-eq-height' class</div>
</div>
CSS
.nomargin {
margin:0;
}
.nopadding {
padding: 0;
}
.row-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.border {
border: 1px solid red;
min-height: 50px;
}
You can see a jsFiddle here