I used to have my website with Boostrap 3.3.4, and since I moved to Bootstrap 4 everything is broken.
Essentially the structure of my website was very simple, a container that contained some jumbotrons and some panels
<body>
<section class="container">
<div class="jumbotron vertical-center">
<div><img src="img/hello.jpg" style="width: 35%" class="img-responsive" title="Hello" alt="World"></div>
<h2>my website!!</h2>
<div class="panel panel-default">
<div class="panel-body">
<h4> stackoverflow </h4>
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
<h4><span class="glyphicon glyphicon-education" aria-hidden="true"></span><strong> This is reall cool! </h4>
</div>
</div>
and so on.
CSS would be simply
.container {
max-width: 600px;
background:white;
padding: 30px 30px;
text-align: center;
background: transparent;
}
.jumbotron {
background: white;
}
Here I would have a suite of centered, responsive nice blocks (with roundede edges) that would NOT take the full width of the screen.
I have no idea how to adapt that with Bootstrap 4.
Whenever you switch from one major version to another, with any software, you should expect breaking changes.
In the case of Bootstrap, it's more than breaking-changes. It's almost a completely new library (in fact, it is completely rewritten, for the most part!). In terms of development, think of it as a different library vaguely resembling the old one.
The best advice I could give you is to revert to v3. If you want to take advantage of the fully developed product, use latest v3 available. There are very few real life cases where upgrading switching a functional website from Bootstrap v3 to Bootstrap v4 makes sense in terms of development time and/or investment.
If you are really determined to do this (maybe for educational purposes or whatnot), consider rebuilding it from scratch, using v4. If you do need to convert old templates (HTML markup) run them through the Bootstrap v3 to v4 markup converter.
But keep in mind that even with this tool or similar, considering all changes in terms of architecture, layout, JavaScript plugins, form elements, switch from glyphicons to font awesome, switch from LESS to SASS, renamed variables, changed responsive breakpoints and any custom CSS you (or any v3 theme/plugin/add-on) might currently use for overriding defaults, you still have a lot of chances of messing it up and you're better off (and with a superior end product) if you rebuild from scratch, IMHO.
Moving from v3 to v4 makes a lot more sense in terms of: "I used to develop websites using v3 and now I use v4 in new projects", rather than "I upgraded a website from v3 to v4".
v3 is not obsolete and will not be for a good number of years.
In fact, it is a much more more suitable option for a production environment than v4 at the moment. In this regard, a quick look at bootstrap-4 questions, will confirm it's not (yet) production ready. Basic functionality is still broken or at least under-developed on widely used devices.
In the particular case of your markup, this should do:
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<section class="container">
<div class="jumbotron vertical-center">
<div class="d-flex justify-content-around align-items-center">
<img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.svg?v=2bb144720a66" style="width: 35%" class="img-fluid" title="Hello" alt="World">
</div>
<h2>my website!!</h2>
<div class="card">
<div class="card-body">
<h4> stack<b>overflow</b> </h4>
</div>
</div>
<div class="card">
<div class="card-body">
<h4><i class="fa fa-university"></i><strong> This is reall cool! </strong></h4>
</div>
</div>
</div>
</section>
Note I replaced glyphicon with fa as Bootstrap v4 uses font awesome icons and I also centered the logo as a reminder v4 makes use of flexbox to center and evenly distribute, should you ever need it (i.e.: place <h2> inside .d-flex to align and distribute in line with logo)
Related
I am creating a web application in asp.net and I am using bootstrap version 4 for the layout of the site.
I have the following code to include a title on the left hand side (with some additional text) and then the image on the right, however when I resize the screen the image overlaps the "Welcome to the site" before it then eventually stacks the columns.
<div class="container-fluid">
<div class="row portal-intro">
<div class="col-md-4">
<p class="home-header">Welcome to the site</p>
<p>
You can make a variety of applications, reports and requests by using our online forms.
For example you can apply for resident permits, report an issue or you can request a call back.
</p>
</div>
<div class="col-md-8">
<img class="img-fluid" src="~/Content/Images/city.png" />
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<h2>Getting started</h2>
<p>
ASP.NET MVC gives you a powerful, patterns-based way to build dynamic websites that
enables a clean separation of concerns and gives you full control over markup
for enjoyable, agile development.
</p>
<p><a class="btn btn-default" href="https://go.microsoft.com/fwlink/?LinkId=301865">Learn more »</a></p>
</div>
<div class="col-md-4">
<h2>Get more libraries</h2>
<p>NuGet is a free Visual Studio extension that makes it easy to add, remove, and update libraries and tools in Visual Studio projects.</p>
<p><a class="btn btn-default" href="https://go.microsoft.com/fwlink/?LinkId=301866">Learn more »</a></p>
</div>
<div class="col-md-4">
<h2>Web Hosting</h2>
<p>You can easily find a web hosting company that offers the right mix of features and price for your applications.</p>
<p><a class="btn btn-default" href="https://go.microsoft.com/fwlink/?LinkId=301867">Learn more »</a></p>
</div>
</div>
</div>
I used img-fluid to see if that was the issue, but it still happens. The image eventually does stack it's just the "in between" size where it overlaps and is fine when the scree is full width.
I haven't added any additional CSS as this is done by the addition of the img-fluid class.
It may be worth adding that I have also tried setting the image to the background of the column and it does the same, suggesting there may be a problem with the column on the left rather than the image.
The problem is that your text is so large that the individual words don't fit the column space you've allotted. Reduce font size in a responsive way and it's all fine. For example:
#media (min-width: 768px) {
.home-header {
font-size: 30px;
}
}
Problem demonstration
Also, you should be using heading tags for headings. Semantic document structure is important.
I keep bumping into this issue where everyone keeps:
a) wanting to wrap HTML5 semantic tags with divs, and
b) wants to apply class selectors to the divs and not the semantic tags. It's as if people are afraid of slapping classes onto semantic tags for some reason.
For example, I am constantly told that this is "incorrect",
<body class="container">
<header class="row">
<div class="col-md-12"> ...
And something like this is more preferable,
<body>
<div class="container">
<div class="row">
<div class="col-md-12"> ...
And here, where the first example I have the column class in the h2 tag
<div class="row">
<h2 class="col-4 feature">Featured Work</h2>
</div>
But "the correct" way is to add yet another div tag to apply the class,
<div class="row">
<div class="col-4 feature">
<h2>Featured Work</h2>
</div>
</div>
I understand that this might be opinion-based, but I have found that when dealing with HTML5, opinions actually matter since virtually everyone is having issues and there is no other way to hammer out the details without opinions.
I recommend sticking to the
<body>
<div class="container">
<div class="row">
<div class="col-md-12"> ...
format.
If you intend to work with a lot other developers or with bootstrap templates- you will see that the container classes typically nest row class divs.
Since we are talking about markup there is no right answer, but following this convention is strongly recommended.
For consistency
For easy changes to styling & reusability with other projects- this even opens the door to drop-in replacements of css stylesheets from other projects or bootstrap templates. (I have had some surprisingly good results with this).
However, if you insist on giving non-div tags "container" and "col-X" tags, be consistent. I wouldn't recommend it though and would consider any template that follows its own convention to be an indicator of poor code quality.
Why isn't it possible to convert a layered image (such as in Photoshop) to a good web page with maintainable code?
<div id="2copy3"><img src="images/2copy3.png"></div>
<div id="Layer24"><img src="images/Layer24.png"></div>
<div id="Lines"><img src="images/Lines.png"></div>
<div id="Shape1"><img src="images/Shape1.png"></div>
<div id="Tab"><img src="images/Tab.png"></div>
<div id="Home"><img src="images/Home.png"></div>
<div id="LocationSouthAfrica"><img src="images/LocationSouthAfrica.png"></div>
<div id="CrewDragna"><img src="images/CrewDragna.png"></div>
<div id="Health100"><img src="images/Health100.png"></div>
<div id="Points44080"><img src="images/Points44080.png"></div>
<div id="Bullets28883"><img src="images/Bullets28883.png"></div>
<div id="TableDesign"><img src="images/TableDesign.png"></div>
Converting a visual representation to a fully functioning web page that is well thought out for many devices is something that requires a human. There is no algorithm (thus far, maybe in science fiction) that can make the appropriate decisions for interpreting a design and building a site out of it.
It's not just a conversion. There is an art to this. Unless of course you want a page that is just images...
I'm trying to create a site using bootstrap and no external css. It seems I can achieve many of my formatting goals using nested grid systems.
e.x.
<div class="container-fluid bs-docs-grid">
<div class="row show-grid">
<div class="col-md-6">
<div class="row show-grid">
<div class="col-md-4">
</div>
<div class="col-md-4">
</div>
</div>
</div>
<div class="col-md-6">
</div>
</div>
</div>
Is this a reasonable practice?
Your code for the nesting is exactly what Bootstrap recommends: http://getbootstrap.com/css/#grid-nesting
and
https://getbootstrap.com/docs/4.4/layout/grid/#nesting (for Bootstrap 4)
Unless you have a specific need for the show-grid and bs-docs-grid classes, there's no need to include them. They aren't part of the base bootstrap CSS.
If you can achieve the layout you need using nested grids, I would certainly use them. They will save you time and reduce potential browser compatibility issues.
Good luck!
At present, I'm currently working on a client's project to build timesheet/billing system and one of my key tasks is to build a good grid-layout that display the data in their correct places. We haven't decided which server-side programming platform we're going to use that will be used for this system yet (hence it's in plain html). The client wants to work with us in getting the aesthetic feel and look of the html layout first before any actual implementation can begin, as part of drafted client requirements...
http://cms.tmaarchive.com.au/timesheet-allemployee.html
Anyway I digress. If you look at the first row of the grid, you will notice there's a green 'Approve' and red 'Reject' buttons. Next to the reject button, there's a small slither of blue background colour in the background. We realised this is not correct and we need to fix this grid layout problem.
At the time of my investigation, I realised that this is more a responsive web design problem as I dont have this issue on my monitor screen 1440x900. It's laid out perfectly. But if you place the page on a wider(or smaller) resolution, both height and width respectively, then you will notice the blue background color is becoming more and more apparent. From this, I realised this is the consequence of not designing web responsive grid from the beginning. Though, in my own defense, it wasn't that important to address as we were not sure how the grid layout would come turn out in the first place after designing the web designer's mockup from scratch. Once we got the layout and outlined the baseline of the foundation as we move along the project, then we've become more knowledgeable in evaluating how our grid is going to become responsive later on.
But looks like I have to address them earlier than expected. Thus I'm under pressure to determine what's the best course of action to take in addressing this pending issue before we can show our to the client. I heard there's two approaches of grid-based responsive web ie DIY and framework-based and I haven't done responsive web design before and I need your recommendation which of the two is going to help me to correct the layout issues of the page (and eventually use that starting foundation for all other grids within the timesheet billing system.)
Here's the code for layout of the problematic row.
<div class="table_row 1">
<div class="table_column" style="width: 110px;">
Steven Kugel
</div>
<div class="table_column" style="width: 110px;">
Mrs Smith
</div>
<div class="table_column" style="width: 60px;">
03.07.2014
</div>
<div class="table_column" style="width: 110px;text-align:center;">
3.5
</div>
<div class="table_column" style="width: 120px;text-align:center;">
80%
</div>
<div class="table_column" style="width: 130px;text-align:center;">
4
</div>
<div class="table_column" style="width: 76px;text-align:center;">
7.5
</div>
<div class="table_column" style="width: 45px;">
1,575
</div>
<div class="table_column" style="width: 126px;background-color: #fff;display:inline-flex;">
<div style="float:left;margin-right: 5px;">
<input type="button" value="Approve" name="APPROVE" style="background-color: #6EBA66;width: 58px; height: 0px; margin-right: 4px; padding-top: 1px;padding-bottom: 18px;font-size:13px;"></div>
<div style="float:left;">
<input type="button" value="Reject" name="REJECT" style="background-color: #D70D1E;width: 58px; height: 0px; margin-right: 4px; padding-top: 1px;padding-bottom: 18px;font-size:13px;"></div>
</div>
</div>
Feel free to offer as much criticism if you could, so I can learn to improve my responsive web design skills further.
Use bootstrap or metroui, a standard version for responsive , check the grid system here
http://getbootstrap.com/css/#grid