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>
Related
I am using Bootstrap v2.3.0 to design footer content. I am trying to use the bootstrap grid to order my columns. In v2.3.0 by using span(adding up to 12 cols), my columns are not covering the entire row.
Only in 980px screen, it's covering the entire row. But when screen size gets larger than 980px, some space is getting left or uncovered on the right side. I want the 3rd span part to be in the extreme right of the screen.
Please refer to the image for the output of my code.
(https://i.stack.imgur.com/SlfyQ.png)
Actually I want my output like below code:
[Required or Expected output][1]
<link href="https://getbootstrap.com/3.0.0/assets/css/bootstrap.css" rel="stylesheet" />
<link href="https://getbootstrap.com/3.0.0/assets/css/bootstrap-responsive.css" rel="stylesheet"/>
<div class="container-fluid">
<h1>Hello World!</h1>
<div class="row">
<div class="col-sm-6" style="background-color:lavender;">.col-sm-6</div>
<div class="col-sm-6" style="background-color:lavenderblush;">
<div style="float:right;">.col-sm-6_Part-2</div>
<div style="float:right; padding-right: 100px">.col-sm-6_Part-1</div>
</div>
</div>
</div>
What should I use to get it correct? Please help. Thanks in advance !!
Below is the current/wrong code.
<body>
<div class="container-fluid">
<h1>Hello World!</h1>
<div class="row">
<div class="span4" style="background-color:lavender;">span4</div>
<div class="span4" style="background-color:lavenderblush;">span4</div>
<div class="span4" style="background-color:lavender;">span4</div>
</div>
</div>
</body>
Replace row class with row-fluid:
<link href="https://stackpath.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet"/>
<div class="container-fluid">
<h1>Hello World!</h1>
<div class="row-fluid">
<div class="span4" style="background-color:lavender;">span4</div>
<div class="span4" style="background-color:lavenderblush;">span4</div>
<div class="span4" style="background-color:lavender;">span4</div>
</div>
</div>
Here. I know you are using bootstrap v2 and I understand why but do this.
Do this
<div class="row" style="display: flex; justify-content: space-between">
I did inline style to not destroy other parts of code because bootstrap v2 is really old and I don't know how it will work if you put this CSS globally for every row element
It will put first span to left second span to center and third span to right of the screen.
Is this what you want to do? If not then post in comments.
UPDATE
If you only want to push the third element to the right and leave other two on their current places you can do this
<div class="span4" style="background-color:lavender; float: right">span4</div>
It will float that element to the far right of its parent
UPDATE 2
Based on new info I got from comment here is the solution
<div class="row">
You need
<div class="row-fluid">
row-fluid will take the whole width of parent and spans will stretch
This is a bootstrap 2 feature. Read more about it here
check this:
minimum amount of code:
<div class="container-fluid">
<h1>Hello World!</h1>
<div class="row">
<div class="col-4 col-xs-4 col-sm-4 col-md-4 col-lg-4" style="background-color:lavender;">span4</div>
<div class="col-4 col-xs-4 col-sm-4 col-md-4 col-lg-4" style="background-color:lavenderblush;">span4</div>
<div class="col-4 col-xs-4 col-sm-4 col-md-4 col-lg-4" style="background-color:lavender;">span4</div>
</div>
</div>
check :https://jsfiddle.net/sugandhnikhil/ut8d0j3m/
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
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 am trying to center the first column in the middle vertically , for the mobile mode xs:
<div class="row toplineheight vcenteritems totalblue visible-xs">
<div class="col-xs-6 vcenteritems small">Your order</div>
<div class="col-xs-3">
<div class="col-xs-12"><span class="tiny">Upfront</span></div>
<div class="col-xs-12 dollar large middle">0</div>
</div>
This is my css(bootstrap 3):
.cart {
.verticalline {
border-left: thin solid #f7f7f7;
}
At the moment the 'your order' text stays stuck to the top of the div. How can I align this in the center?
Codepen here: codepen
using the class visible-xs on your .row element is overriding your display:flex css value. Moving the class to a containing element
CODEPEN
HTML
<div class="cart">
<div class="visible-xs"> <!-- move visible-xs class to a parent container -->
<div class="row toplineheight vcenteritems totalblue">
<div class="col-xs-6 vcenteritems small">Your order</div>
<div class="col-xs-3">
<div class="col-xs-12"><span class="tiny">Upfront</span></div>
<div class="col-xs-12 dollar large middle">0</div>
</div>
<div class="col-xs-3">
<div class="col-xs-12"><span class="tiny">Monthly</span></div>
<div class="col-xs-12 dollar large middle">0</div>
</div>
</div>
</div>
</div>
Hi I'm new in bootstrap and just trying to understand how the grid line works and making boxes on it. I don't know why does the style doesn't take effect.
Here is my code:
<div id="content" class="container">
<div class="row">
<div class="col-md-12 main ">
<h2>Welcome to Dashboard!</h2>
</div>
<div class="col-md-4 sidebar style="background-color: #dedef8;box-shadow:inset 1px -1px 1px #444, inset -1px 1px 1px #444; ">
<h2>Sidebar</h2>
</div>
</div>
</div>
Your HTML is invalid, you should close class attribute quote, and add missing </div> tag. After all you also make sure that total sum of columns is exactly 12 per row. Something like this maybe:
<div id="content" class="container">
<div class="row">
<div class="col-xs-4 sidebar">
<h2>Sidebar</h2>
</div>
<div class="col-xs-8 main ">
<h2>Welcome to Dashboard!</h2>
</div>
</div>
</div>
Demo 1: http://plnkr.co/edit/YpfBDxXHrmGslzMUjEVh?p=preview
Here col-xs-4 + col-xs-8 fills 12 column row. col-xs- styles are effective starting from extra small dimensions and higher. You can of course make it more sophisticated, for example you want sidebar to take whole row pushing main content below it for xs devises:
<div class="row">
<div class="col-xs-12 col-sm-4 sidebar">
<h2>Sidebar</h2>
</div>
<div class="col-xs-12 col-sm-8 main">
<h2>Welcome to Dashboard!</h2>
</div>
</div>
Demo 2: http://plnkr.co/edit/YpfBDxXHrmGslzMUjEVh?p=preview