How can you create Fixed Layout with Bootstrap?

I have a problem with table-layout:fixed and width of inner columns if their content wider than column. ... Questions for Interview, JavaScript MCQ (Multiple Choice Questions)...

asked Aug 1, 2022 in Education by JackTerrance

JackTerrance · Answer 1 · 2021-04-04T10:12:53+0000

With Bootstrap you can create layouts of web pages based on a fixed number of pixels. To create the fixed yet responsive layout you should start the container with the .container class. Then create the row with the .row class to wrap the horizontal groups of columns. Rows must be placed within a container for proper alignment and padding. Further columns can be created within rows using the predefined grid classes like .col-xs-*, .col-sm-*, .col-md-* and .col-lg-* where * represents a grid number.

The following code creates a fixed width responsive layout that is 970px wide on a medium device like desktop and laptop with a screen width ≥992px and 1170px wide on large devices like large desktops with a screen width ≥1200px. However the layout width will be automatically calculated for devices that have a screen width <768px like tablets and cell phones.

HTML Code

<!DOCTYPE html >  
<html>  
  
<head>  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
    <title>Fixed Layout with Bootstrap</title>  
    <!-- compiled and minified CSS -->  
    <link rel="stylesheet" href="css/bootstrap.min.css">  
    <!-- Optional theme -->  
    <link rel="stylesheet" href="css/bootstrap-theme.min.css">  
</head>  
  
<body>  
    <div class="container">  
        <div class="jumbotron">  
            <h1>Fixed Layout with Bootstrap </h1>  
            <p>With Bootstrap you can create layouts of web pages based on fixed number of pixels. To create the fixed yet responsive layout you should starts container with the .container class. After that create row with the .row class to wrap the horizontal groups of columns. Rows must be placed within a container for proper alignment and padding. Further columns can be create within rows using the predefined grid classes like .col-xs-*, .col-sm-*, .col-md-* and .col-lg-* where * represent grid number.</p>  
        </div>  
        <div class="row">  
            <div class="col-sm-4">  
                <h2>HTML</h2>  
                <p>HTML is a markup language that is used for creating web pages. The HTML tutorial section will help you understand the basics of HTML, so that you can create your own web pages or website.</p>  
            </div>  
            <div class="col-sm-4">  
                <h2>CSS</h2>  
                <p>CSS is used for describing the presentation of web pages. The CSS tutorial section will help you learn the essentials of CSS, so that you can fine control the style and layout of your HTML document.</p>  
            </div>  
            <div class="col-sm-4">  
                <h2>Bootstrap</h2>  
                <p>Bootstrap is a powerful front-end framework for faster and easier web development. The Bootstrap tutorial section will help you learn the techniques of Bootstrap so that you can quickly create your own website.</p>  
            </div>  
        </div>  
        <hr>  
    </div>  
  
    <!-- compiled and minified JavaScript -->  
    <script type="text/javascript" src="js/bootstrap.min.js"></script>  
</body>  
  
</html>  

Result

On a tablet, desktop and larger device,

desktop view

Mobile Device