I can't seem to understand this behavior:
CodePen demo
<div class="container-fluid buy-now">
<div class="row">
<div class="col-sm-offset-3 col-sm-6 text-center">
<button type="button" class="btn btn-primary btn-lg" id="buy-now-button" >BUY NOW FOR $400</button>
<button id="make-an-offer-button" type="button" class="btn btn-lg btn-info">MAKE AN OFFER</button>
</div>
</div>
</div>
Basically, the buttons stay next to each other until I get to about 1244px width when they stack on top of each other. Then, they go BACK to horizontal at about 768px. But then, at about 620px width, they go to stacked again.
Why is there such a "jumpy" behavior at seemingly random screen resolutions? According to the definitions I've set, these buttons should stay next to each other right until 768px (and below), when they go back to stacked mode.
You can replace the sm classes in the third line with xs so that it applies to all sizes:
<div class="col-xs-offset-3 col-xs-6 text-center">
This will result in only one horizontal/vertical break.
Here it is: https://codepen.io/anon/pen/QaMxPY
--
Second solution:
Erase col-xs-offset-3 col-xs-6 from that tag, resulting in
<div class="text-center">
This will center the buttons and only stack them when the screen becomes too narrow to have them side by side.
https://codepen.io/anon/pen/QaMxPY
--
Or use a smaller offset and a wider container class:
<div class="col-xs-offset-1 col-xs-10 text-center">
https://codepen.io/anon/pen/RxZBbx
--
And you can make the buttons smaller, by applying a different class to them (btn-sm instead of btn-lg) and changing their font-sizes:
https://codepen.io/anon/pen/mpMjyx
Related
I want to have an effect where the picture is on left side of text, but when the screen is smaller, the text is on top and img is below.
Currently, I have the former, but when the screen size reduces, the img goes on top and text is on bottom. How do I reverse this?
Here is my code (theres a div for img and one for the description text):
<div class="container productwrap shadow-lg mt-3">
<div class="row">
<div class="col-md-4 p-2 m-3 border">
<img src="../Pictures/snacks3.jpeg" alt="snacks2">
</div>
<div class="col-md-7 p-2 my-3 border rounded">
<p class="newarrival text-center pt-3 font-weight-bold">Trendy Snacks</p>
<h2 style="display: inline-block" class="p-3 ml-2 border rounded">Brown Sugar Yogourt</h2>
<span class="badge badge-success align-top m-1">NEW!</span>
<p class="lead font-weight-bold text-warning m-4">CAD $9,99</p>
<p class="m-4"><strong>Unit: </strong>2 x 100g</p>
<p class="m-4"><strong>Availability: </strong>In Stock</p>
<label for="qty" class="ml-4"><strong>Quantity:</strong>
<input type="text" id="qty" name="qty" class="small w-25 text-right" value="1">
<button class="btn btn-outline-success btn-sm" href="#" role="submit">Add to Cart</button>
</label>
<p>
<button class="btn btn-info btn-sm m-2 mr-3 rounded-pill" data-toggle="collapse" data-target="#moreinfo">More info</button>
<div id="moreinfo" class="collapse text-wrap">
This delicacy instills the careful mix of brown sugar and yogourt. Its rich nutriments will revitalize your spirit and set you ready for your day.
</div>
</p>
</div>
</div>
</div>
I have tried using float-right/left but it doesn't budge at all.
I want to have an effect where the picture is on right side of text, but when the screen is smaller, the text is on top and img is below. Currently, I have the former ...
I'm not seeing you have the former. On bigger screens, the picture is on the left side of text...
If you switch the order of the picture structure and your text structure, you achieve both:
<div class="container">
<div class="row">
<div class="col-md-7">
...
</div>
<div class="col-md-4">
<img />
</div>
</div>
</div>
demo: https://jsfiddle.net/davidliang2008/5m2z4s90/4/
Updates:
You can use order utilities class to achieve what you want:
<div class="container">
<div class="row">
<div class="col-md-4 order-2 order-md-1">
<img />
</div>
<div class="col-md-7 order-1 order-md-2">
...
</div>
</div>
</div>
On small screens, the image is 2nd item so it will appear at the bottom. On medium break point and up, you switch it back so that the image will appear on the left of the row.
demo: https://jsfiddle.net/davidliang2008/5m2z4s90/9/
Use CSS Grid and align how you want to align in default. Then use a media query and when the view gets smaller just change the div size and order of grid layout.
A common more complex responsive design technique is to use 'Media Queries' in CSS.
To start, align the items as you like them by default. Then, choose a limit for your resizing (ex: 'width less than 600px'). Once you have that set, you can begin a media query like so:
#media (max-width: 600px) {
*selector* {
*change you want to make when screen is smaller than 600px*;
}
}
Doing this will cause the changes to the CSS rules to automatically apply whenever the width of the screen is less than 600px, but it should also revert back to the default values whenever the screen increases in size again.
Media Queries can get a lot more complex and involved than in this example, but they are incredibly useful once you get used to them. I strongly suggest reading into them some.
I have web page where whole page is divided in two parts left and right. The partition is shown below. In the left section, I have two side by side buttons and one of the button having long text string as 'Edit Categories'. This button overflows the text and eventually collapses and stacks on top of another. I am developer but i am not really into designing. Tried using flex but seems not working. The expected behavior for this one is two buttons should be side by side in large screen and stack in medium small and extra small resolution. I also tried putting col-sm, col-md, col-xs on my divs which contains <a> but noluck.
<!-- Start Left Section -->
<div class="col-lg-3 col-md-4 col-sm-12 col-xs-12 animated fadeInLeft categories-lst">
<div class="row">
<div class="col-lg-6">
<a onclick="toggleLoader('show')" href="/Rec/EditCategories" class="btn btn-default btn-block"><span><i class="fa fa-pencil"></i>Edit Categories</span></a>
</div>
<div class="col-lg-6">
<a onclick="showNewPost();" class="btn btn-default btn-block" id="showNewPost"><span><i class="fa fa-plus"></i> New Post</span> </a>
</div>
</div>
</div>
<!-- Start Right Section-->
<div class="col-lg-9 col-md-8 col-sm-12 col-xs-12 animated fadeInRight">
</div>
To achieve expected result, use below option
a{
white-space:normal !important;
word-wrap: break-word;
}
code sample - https://codepen.io/nagasai/pen/MVRwoN
I am new to web development, particularly CSS and Bootstrap. I am struggling to center the set of 5 items in a Bootstrap row. Here is what I have:
<div class="container-fluid">
<div class="row text-center" style="border:2px solid green">
<div style="display:inline-block;float:none;vertical-align:top;margin-top:8px">My Label</div>
<div class="col-xs-2 col-sm-2 col-md-1"style="display:inline-block;float:none">
<input class="form-control" type="number"></input>
</div>
<div style="width:2%;display:inline-block;float:none"></div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-1"style="display:inline-block;float:none">
<button class="btn btn-default btn-block" role="button">Button1</button>
</div>
<div class="col-xs-3 col-sm-3 col-md-2"style="display:inline-block;float:none">
<input class="form-control" type="number"></input>
</div>
<div style="width:2%;display:inline-block;float:none"></div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-1"style="display:inline-block;float:none">
<button class="btn btn-default btn-block" role="button">Button2</button>
</div>
</div>
</div>
For the most part, it gives me the result I want in Firefox and Chrome. The controls are spaced a little and it is responsive -- the white space shrinks while the controls grow (in % of screen) as the screen gets smaller. Control widths are controlled via Bootstrap col-*-# classes. Though, IE seems to align the buttons at the bottom of the row for some reason. I'm not sure why.
Aside from defining custom CSS classes instead of style attributes, is this the correct/best way to achieve the result that I want? Or, is there a better way to do this in CSS or Bootstrap? It seems hackish to have to use vertical-align and margin to get the label to line up. Also, I started out using form elements and classes. But, that kept making things worse. What is the benefit of using the form element or downside to not using it?
I read numerous similar posts. But they all seemed to have something different enough that the solutions seemed to not fit what I am doing. I have a set of controls that I want centered as a unit. I do not want to simply snap them to the 12-column Bootstrap grid.
JSFiddle
You still can use a custom class when you need it :
.classname {
display: inline-block;
vertical-align: middle;
float: none;
}
I have the next code:
<div class="container-fluid">
<img src="images/w2.png" alt="W logo" class="center-block visible-xs-block visible-sm-inline-block visible-md-inline-block visible-lg-inline-block">
<h2 class="center-block visible-xs-block visible-sm-inline-block visible-md-inline-block visible-lg-inline-block">This is h2 header</h2>
<div class="hidden-xs visible-sm-inline-block visible-md-inline-block visible-lg-inline-block pull-right">
<div class="row">
<img src="images/user.png" alt="User image" class="col-sm-3 img-circle">
<span class="col-sm-9">Non register user</span>
</div>
<div class="row">
<button type="button" class="btn btn default btn-large col-sm-6">Log in</button>
<button type="button" class="btn btn default btn-large col-sm-6">Register</button>
</div>
</div>
</div>
The above code just show a div which have inside it a image with 50x50px and a h2 and another floated div by the .pull-right class. My problem appear when the viewport size come to set more than extra-small size (xs); the floated div disappear in xs size (at this point everything works well) but later when the viewport come to be small (sm) or higher, the floated div appear in another line: just below from the img and h2.
How can I solve this? thank you.
Edit the question above:
The behavior which I'm looking for is that the div.hidden-xs appear only when the viewport have more size than extra-small size (xs) and also that it appear horizontally aligned to the right (right float) at the same line of img and h2.
Thank you
if <div class="hidden-xs visible-sm-inline-block visible-md-inline-block visible-lg-inline-block pull-right"> is troubling you, that is because you only put class hidden-xs. Because that class means only hidden if viewport is xs. On the other hand, you put visible-sm-inline-block and visible-md-inline-block, so of course that div appear below the img and h2.
reference: bootstrap
Why don't you try
<div class="hidden-xs pull-right">
EDIT:
reference: learnlayout
I think I've got the wrong concept before, sorry. I think your <img> and <h2> not inside the <div> with class visible-*-*.
I am using Bootstrap and I came across the following error in displaying some buttons:
The HTML code is the following:
<div class="row" style="margin-top: 20px">
<div class="col-lg-6 text-left">
<button class="btn btn-primary profile-button">Save</button>
</div>
<div class="col-lg-6 text-right">
<button class="btn btn-primary profile-button">Reset</button>
</div>
</div>
The CSS for the custom class is:
.profile-button {
min-width: 125px;
}
The error only occurs when I am resizing the browser width. The screenshot attached is when the browser has half the width of the monitor (so 540px, given my resolution). I believe the display error starts at the 768px width value. The resolution I am currently using is 1920x1080.
I've tried wrapping the row inside a container div and also inside of a div that had both container and container-fluid classes.
Just add col-xs-6 class to both div
<div class="row" style="margin-top: 20px">
<div class="col-lg-6 col-xs-6 text-left">
<button class="btn btn-primary profile-button">Save</button>
</div>
<div class="col-lg-6 col-xs-6 text-right">
<button class="btn btn-primary profile-button">Reset</button>
</div>
</div>
DEMO
Bootstrap Grid
Bootstrap puts columns one under the other on smaller devices... It's likely that your columns are becoming full width and stacking, instead of staying at half the size. This is the standard behaviour.
If the buttons must remain side by side, I would recommend using your own classes and floating them, ensuring the max-width is 50%